初识React脚手架

最新推荐文章于 2024-02-22 23:05:55 发布

程序员华仔

最新推荐文章于 2024-02-22 23:05:55 发布

阅读量405

点赞数

分类专栏： ReactJS 文章标签： react.js react native javascript

本文链接：https://blog.csdn.net/nogodoss2018/article/details/127989020

版权

ReactJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近接手了一个React的项目，学习和摸索了一段时间，刚好有一些心得，就记录下来。

这个项目是混合开发(Hybird)的.整体是以原生+Cordova+ReactJS 架构，下面简单说下。

原生是由Swift+OC共同实现的原生框架。有网络请求、获取设备信息、地理位置等原生功能模块。对于网络请求来说，无非就是大家耳熟能详的Alamofire和AFNetworking开源库。至于为什么会有两个相同功能的网络库存在，个人认为是历史原因吧。

也许拿历史原因来说理由，能解释清楚很多项目中实际存在现象。因为这是一个通用的、说不清楚、道不明白、没有办法反驳的理由。

当然还有设备信息和地理位置等功能模块，这些是该系统具有的功能需求，所以存在也是必然。

再说下Cordova，说起跨平台框架，其实现在有很多跨平台框架可选择。例如React Native(RN)、Flutter、Xamarin、lonic、Nativescript等等。关于跨平台框架的介绍，可以看下这篇文章。

站在现在的角度去看Cordova框架是有些过时。若现在立项并确定框架的话，一般是选择Flutter。

但是我们不能以现在的眼光去看待历史框架。因为每一个框架的确定，取决于当时的情况和架构师的认识水平和素养。切不可站在现在的角度去评价，否则有可能“后人复笑后人矣”。当然本文也不是介绍Cordova的知识的，这里就不表述了。

再说下ReactJS。说实话，这里蕴藏着很多的概念和知识点.

例如:JS和JSX、TS与TSX、TSX与JSX的区别、React脚手架、还有Redux，Saga,Router等等概念和知识点。下面简单说几个：

大家都是知道JS就是JavaScript,浏览器识别的脚本语言。

JSX就是JavaScript+XML。在表达上，又比纯粹的JS方便很多了。

TS就是TypeScript，微软开发出来的一个开发语言。比JS高大尚一些，典型的就是支持类型定义，适合大型项目等等，还有其他的一些技术点，这里不一一列举了。我打算把一些我知道的知识点放在以后的文章介绍，今天先聊一聊React脚手架。

React脚手架

脚手架，用原生开发来说，应该就是App的整体框架，只不过Web端喜欢这么叫，而原生端没有这么称呼。其实就如建房子围在房子外围的一层东西而已。如下图

其主要作用是起保护和隔离分层：

保护的意思是：“框架内的东西，不会随意飞出框架外”。例如建房子时，框架内的砖头不会掉到外面砸到人。在我们程序的角度来说，写的程序、调用的库或者方法在框架内，不会调用框架外的库或接口。

隔离分层，以建房子的例子来说，在5楼建房子所需要的材料（如砖头，工具）不需要跑到1楼来取。而是可先把砖头、工具之类的材料，从1楼搬到5楼。然后在5楼内部不同区域获取。显然地，这种方式比上下楼取材料的方式要方便得多。

具体到React脚手架来说，React帮我们封装好了很多组件，我们只要按它的规则使用即可。最简单的例子就是Router，一个Key加一个Component即可以了。Key代表了Component的唯一ID，由Action进行驱动。最终展示出这个Component的界面。至于它是怎么个路由流程，React脚手架帮我们封装并实现好了，我们只管调用。同样的例子还有npm和webpack，都是React帮我们封装好了。

若不采用React脚手架又会怎么样？其实对于功能来说，不会实现不了，只是要花很多的时间和精力，毕竟从零开始开发。

若采用React脚手架呢，那就站在别人的肩膀上开发，那又何偿不是一件省时省力的事情呢？

最后也说下，脚手架也有弊的一面。由于不清楚脚手架内部实现细节，对于实现细节，心里没有底而有所担心。更重要的是，当脚手架出现Bug的时候，那就是痛苦万分了。放弃不行，又不能解决问题。

总之，React的脚手架利弊，我以个人之见上述如上。下面演示下React脚手架。

React脚手架的安装

React脚手架安装很简单，三步骤：

在终端命令上输入(先要进入指定目录)：

1.全局安装create-react-app库。

npm install -g create-react-app

至于为什么要全局安装，而不是局部安装。因为有些权限问题。

2.进入到目录，创建项目名称

create-react-app hello_react

3.进入目录，启动React脚手架

npm start

最后，执行 npm start，就可以在浏览器上看到React的Demo页面了。

Index.html的介绍

由于React是单页面应用(SPA)。整个页面的入口就是index.html.下面介绍下index.html文件内信息。信息都是以注释说明了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
   <!-- 加载收藏logo。其中 %PUBLIC_URL%指的是Publick文件夹路径-->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    <!-- 开启理想视图， 主要是移动端页面的适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!--适配浏览器页签+地址栏的颜色-->
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 用于指定页面添加到手机主屏幕后的图标-->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <!-- 用于应用加壳的配置文件-->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <!--当浏览器不支持JavaScript的提示-->
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>
  </body>
</html>

以上就是React 脚手架的知识。