玩转Reactjs第一篇-构建工程(create-react-app)

缺乏、安全感 2023-07-03 06:20 121阅读 0赞

# 一、前言 #

前期对vue的使用以及源码做了一些介绍和分析，vue由于其易用易学，性能高等特点，吸引越来越多的前端开发者在使用。作为前端框架的三剑客之一的Reactjs，得到了facebook社区大力支持，有着丰富的UI框架组件，用户群也大大多于Vue，ng，算是老牌的前端框架。Vue和Reactjs的异同特性，网上也总结了非常多，但大部分都是概念性的泛泛而谈，本系列博客在学习Reactjs的同时，也将与Vue在使用方法，实现原理等方面进行比较，通过具体的实例了解两者的差异，故需要各位对Vue基本知识以及原理有一定的了解。

本章节先了解下Reactjs的工程构建。

# 二、工程构建 #

reactj的环境搭建有两种方法，一种是直接引用reactjs

其中babel是用来编译JSX的，一般用于开发环境，生产环境需要预先编译好，这样速度更快。这个方法适合初学者，做一些demo性的实验。下面我们重点要讲第二个方法，使用npm搭建工程。

## 1、安装nodejs ##

可以使用“node -v”检查你的机器上是否安装过。如果没有检测到，则进行安装，否则跳过下面安装步骤。从[nodejs官网][nodejs]下载安装文件

![70][]

安装完成后，可以检查安装是否成功

![20200203152623322.png][]

在您的环境变量中path路径中，自动添加了安装node目录。nodejs安装完成后，就可以使用npm工具包安装

![70 1][]

在“C:\\Users\\XXXX\\AppData\\Roaming\\"(XXXX代表当前的用户)生成npm文件夹，npm工具安装的组件包都会存储在这个目录下。

## 2、安装cnpm ##

由于伟大的墙，npm在国内使用的时候，资源下载非常慢，但淘宝给我们提供了cnpm可以替代npm命令行

输入以下指令:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org  
$ npm config set registry https://registry.npm.taobao.org

执行结果如下：

![20200203153949539.png][]

安装成功。

## 3、安装 create-react-app ##

通过create-react-app命令行，可以零配置搭建工程

输入以下指令：

cnpm install -g create-react-app

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70][]

安装完成后，可以到“C:\\Users\\XXXX\\AppData\\Roaming\\npm\\node\_modules"(XXXX代表当前的用户)会增加以下两个文件夹，相关的资源都在该文件下。

![20200203155746568.png][]

## 4、创建应用 ##

现在可以使用create-react-app创建应用

输入指令：

create-react-app my-app

以下是部分截屏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 1][]

这个过程需要下来依赖包，速度会慢些，创建的过程可能会遇到一些问题，可以上网找下解决方法，一般都能搞定。

启动应用

![20200203163929666.png][]

输入：[http://localhost:3000/][http_localhost_3000]，看到久违的react logo，大功告成。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 2][]

# 三、工程结构 #

进入my-app目录，目前目录的说明如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 3][]

整个项目是基于webpack搭建的，我们对其中几个重要的文件进行说明

## 1.package.json ##

主要分三个部分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 4][]

第一部分是应用的描述信息，包括应用名称，版本等信息。

第二部分，项目相关依赖，这里配置了基本的依赖，如react，react-dom，其实还有很多其他的依赖插件，后面用到我们再介绍。Reactjs将webapack的相关配置封装到react-scripts中，对用户进行隐藏，减少了用户的配置。

第三部分，相关命令行，比如"npm run start "启动应用，"npm run build"编译应用。执行"npm run eject"，会发现根目录下会增加两个子目录config以及scripts。打开这两个目录会发现，实际就是将react-scripts中相关webpack的配置开放给用户了，用户可以根据需要进行配置。注意这个过程是单向，不可逆的。

其他部分主要和eslint以及browser相关。暂时不做重点分析。

## 2、index.html ##

index.html可以理解为整个工程的web容器，它将配合index.js完成应用框架的渲染，其中

是根节点，所有的dom节点都会挂载在此根节点下。

## 3、index.js ##

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    //app组件渲染到根节点
    ReactDOM.render(<App />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();

导入相关的资源和组件，ReactDOM.render将App组件渲染到root节点下。

## 4、app.js ##

import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }
    
    export default App;

app方法返回一段JSX代码，这段代码渲染后，就是上面展示的demo页面。后面我们会具体分析Reactjs组件的使用。

# 四、与VUE比较 #

vue的工程创建大家可以参考我的[VUE探索第二篇-手脚架(vue-cli)][VUE_-_vue-cli]，其与reactjs的创建过程非常类似

1、项目默认都是基于webpack+ES6。

2、官方提供手脚架，vue为vue-cli,reactjs为create-react-app.

3、工程目录架构相似，包含主页面(index.html)，入口js(vue为main.js,reactjs为index.js),组件文件(vue为app.vue,reactjs为app.js)

当然也有着差异点：

1、reactjs与vue相比较，默认目录结构没有webpack相关配置，也没有路由组件。

2、reactjs的css与js是单独的文件，而vue是合成在.vue文件中。

3、reactjs的dom是基于JSX的，vue是基于template的。

# 五、总结 #

本章节主要介绍了reactjs工程的搭建过程，并与vue的手脚架创建的过程和目录进行了对比，下面我们将学习Reactjs的JSX语法。

[nodejs]: https://nodejs.org/en/
[70]: https://img-blog.csdn.net/20180727215937647?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[20200203152623322.png]: https://img-blog.csdnimg.cn/20200203152623322.png
[70 1]: https://img-blog.csdn.net/20180727220842820?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[20200203153949539.png]: https://img-blog.csdnimg.cn/20200203153949539.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200203154855280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz,size_16,color_FFFFFF,t_70
[20200203155746568.png]: https://img-blog.csdnimg.cn/20200203155746568.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200203161916885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz,size_16,color_FFFFFF,t_70
[20200203163929666.png]: https://img-blog.csdnimg.cn/20200203163929666.png
[http_localhost_3000]: http://localhost:3000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020020316562583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200203173345926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200203180105279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RjeTgz,size_16,color_FFFFFF,t_70
[VUE_-_vue-cli]: https://blog.csdn.net/tcy83/article/details/81229349