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

本文主要是介绍玩转Reactjs第一篇-构建工程(create-react-app)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

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

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

二、工程构建

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

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

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

1、安装nodejs

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

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

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

在“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

执行结果如下：

安装成功。

3、安装 create-react-app

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

输入以下指令：

cnpm install -g create-react-app

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

4、创建应用

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

输入指令：

create-react-app my-app

以下是部分截屏

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

启动应用

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

三、工程结构

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

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

1.package.json

主要分三个部分

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

第二部分，项目相关依赖，这里配置了基本的依赖，如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完成应用框架的渲染，其中

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

是根节点，所有的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><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}export default App;

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