react开发项目到上线全过程详解

时间 2019-11-13

原文原文链接

随着react的流行，愈来愈多的前端工程师使用react来进行开发，当时用react时，creact-react-app无疑进入了你们的眼帘，本篇文章主要讲述如何从无到有的使用creact-react-app开发react应用，而后本地调试，直到最后的上线运行。css

本篇文章内容结构说明，主要有如下12个部分：html

1. 安装nodejs前端

2.使用nodejs的npm包安装create-react-app模块node

3. 使用creat-react-app模块建立咱们的项目react

4. 了解控制咱们项目运行测试打包的几个命令git

5. 经过npm start运行咱们的项目npm

6. 查看生产的项目目录的结构，并了解其做用json

7. 开始建立几个咱们本身的组件浏览器

8. 再次运行咱们的项目缓存

9. 开始打包生产环境中须要的代码

10. 将咱们的代码部署进入咱们的服务器

11. ok,上线了，咱们可让用户正式访问了

12. 维护调试

1、安装node:
咱们要用create-react-app来开发react，首先要经过包管理器安装create-react-app，而包管理器通常安装了nodejs后会自带的，因此咱们的第一步是在咱们的电脑上安装node。

请参考如下nodejs安装教程：

Node.js安装配置

2、检测npm包是否可用：
安装好后，而且也配置进入了环境变量，而后咱们来检测下你的npm包是否可用，打开cmd窗口，输入npm -v 进行检测，以下所示，若显示版本号则说明安装成功，环境变量也配置成功，可用开始安装creact-react-app进行react开发了。若是，你输入npm -v后没有弹出版本号，那么多是你的环境变量没有配置好。请参考下面的如何配置环境变量教程。

环境变量是什么？如何配置环境变量

3、使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook，经过该命令咱们无需配置就能快速构建 React 开发环境。

create-react-app 自动建立的项目是基于 Webpack + ES6 。

执行如下命令建立项目：

$ cnpm install -g create-react-app
$ create-react-app project_name
$ cd project_name/
$ npm start
在浏览器中打开 http://localhost:3000/ ，结果以下图所示：

命令解释：

npm ：表示调用的随node一块儿安装的npm包

install : 顾名思义，就是安装的意思

-g : 表示全局安装,安装后在系统的任意位置都能使用,这就是全局安装的意思

create-react-app: 这就是咱们要安装的模块

提示：安装好后，若是你想卸载，能够直接把install改成uninstal便可，也就是在前面个un就能够表示卸载了。有时候卸载后在安装可能会报写错，此时你直接定位的create-react-app安装目录，而后把这个目录删除通常就能解决了。

4、经常使用命令解释
安装好后，他给你说了些命令，这些命令大体以下

npm start

命令做用：Starts the development server.

npm run build

命令做用：构建用于生产的静态代码【咱们开发完成后，发布时就使用此命令得到咱们想要的用于生产的代码放入服务器】

npm test

命令做用：运行测试服务器

npm run eject

命令做用：

复制构建依赖关系，配置文件和脚本进入应用程序目录。（默认依赖关系是隐藏的，若是你执行此了操做，这你的项目就会出现此依赖关系）

注意：此操做是不可逆的，

如何开始你的项目：

cd project_name

npm start

5、查看项目目录结构
而后咱们打开项目目录，能够看下其目录结构

大体以下图所示，共有三个文件夹，四个文件

解释以下：

三个文件夹

node_modules //用来盛放你安装的全部node模块的文件夹

public //用来盛放全部公共资源的文件夹，好比html模板，项目图标

src //用来盛放你本身代码的文件夹，默认生成app.js代码也在里面

四个文件

.gitignore // 这个是用来定义那些在提交到远程代码库时要忽略的文件

package.json //用来声明项目的各类模块安装信息，脚本信息等

package-lock.json //用来锁定模块安装版本的，能确保你们安装的模块版本一致

README.md //盛放关于这个项目的说明文件（全英文的，有兴趣能够看看）

src文件夹

而后咱们来重点看看src文件夹，由于咱们的react组件代码待会也会写在里面。

这里面的文件也很少，就四部分

一、APP相关的js，css文件 //自动给咱们建立的一个组件

二、index相关的js，css文件

三、一个logo.svg图标 //默认的一个简单图标文件

四、一个registerServiceWorker.js文件 //此文件能进行缓存一些资源，通常是用到生产环境的，主要是用来加快访问速度，

大体的分析下组件结构

主要说些比较重要的文件

1. 首先是public目录下盛放着index.html模板，若是开发单页应用，那么全部的代码都会渲染在这里。【index.html文件中也就三部份内容。1.经过meat标签引入的主页一个自适应的viewport声明。2. 经过link标签引入的一个项目基本 m配置文件anifest.json和图标，3. 一个用来让react组件渲染的div标签】

2. 也是在public目录下的manifest.json文件，此文件记录着这个react的APP应用的基本配置信息，他相似于Android的AndroidManifest.xml

3. 而后就是在scr目录下的index.js文件，他不是一个react组件，他是连接react与htnl模板的桥梁，全部的react组件最终都是由他进行渲染到html模板中。而后整个文件中引入了一个系统默认生成的组件APP,有index.js进行渲染。

4. registerServiceWorker.js文件，这个文件是用于生产环境的，它能够缓存些资源，让用户在离线模式下也能访问缓存的内容，以给用户更好的体验，开发环境中没什么用处。。。

5. 最后还有个app.test.js文件，主要是用来组件测试的，有兴趣能够取好好了解下，这里就很少讲这个。

6、建立咱们本身的组件
1. 整个项目文件基本分析完了，而后咱们就能够建立本身的组件了。

2. 咱们在src下新建一个目录：myselfComponent,用来盛放咱们新建立的组件

3. 咱们分别建立两个组件C1,C2,他们分别各显示一句话便可，

4. 而后咱们在index.js里面引入C1,C2组件，

5. 而后在浏览器查看运行效果

C1.js

import React, { Component } from 'react';

import './C1.css';

class C1 extends Component {

render() {

return (

Hello,我是在src/myselfComponent目录下的C1.js文件中的C1组件我引入了相同目录下的 C1.css 文件，用来给我包含的文字设为红色

</div>

);

}

export default C1;

C2.js

import React, { Component } from 'react';

import './C2.css';

class C2 extends Component {

render() {

return (

Hello,我是在src/myselfComponent目录下的C2.js文件中的C1组件我引入了相同目录下的 C2.css 文件，用来给我包含的文字设为蓝色

</div>

);

}

export default C2;

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import C1 from './myselfComponent/C1.js';

import C2 from './myselfComponent/C2.js';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(

<div>

<C1/>

<App />

<C2/>

</div>,

document.getElementById('root'));

registerServiceWorker();

ok，css文件就不展现了，省得让大家眼睛看花了

在浏览器中的运行效果

能够看到，运行的很是完美

再复杂点

上面中，咱们是把全部组件所有引入了index.js文件中，而后统一渲染的。可是在实际开发中组件间必然存在嵌套关系，就是一个组件里面嵌套着另外一个组件，

如今咱们就来在写个组件C3,而后把他嵌套进APP组件中。

C3.js

import React, { Component } from 'react';

import './C3.css';

class C3 extends Component {

render() {

return (

Hello,我是在src/myselfComponent目录下的C3.js文件中的C3组件我引入了相同目录下的 C3.css 文件，用来给我包含的文字设为粗体黄色

</div>

);

}

export default C3;

APP.js

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import C3 from './myselfComponent/C3.js';

class App extends Component {

render() {

return (

<img

src={ logo }

className="App-logo"

alt="logo" />

<h1 className="App-title">Welcome to React</h1>

</header>

<C3 />

To get started, edit <code>src/App.js</code> and save to reload.

</p>

</div>

);

}

export default App;

7、打包为生产版
ok,基本上仍是很简单的，而后咱们的项目开发演示完成了，如今咱们来开始进行生成生产环境的代码（所谓生产环境就是值用来发布到服务器里面的代码，是根据咱们开发环境的代码生成）

执行命令：

num run build

执行此命令后，他会在咱们的项目目录下建立一个build文件夹，里面存放的就是生产环境须要的代码了

8、将其放在服务器中执行
生成环境中的代码生成后就要开发发布了，也就是放到咱们的服务器上，供用户访问使用

这部就比较简单了，直接将build里面的全部文件复制到服务器的根目录下便可，以下（这里我是直接复制到我本地搭建的apach服务器的根目录里面的）

在看浏览器里面的运行结果（个人apach服务器的端口为8087）

9、将其放到远程服务里面部署
刚刚演示的是本地服务器，如今我再将其放到远程服务器里面进行部署

若是你不知道如何将文件上传到远程服务器，请参考这一篇文章

怎么把H5上传到服务器

在浏览器中访问，ok,一切正常

注意：若是你不想将文件复制到根目录，那么你须要修改inde.html文件中对js和css文件的路径，否则没法正常访问。

10、部署到服务器上后的维护
当咱们项目上线后可能还要开发新功能，也可能项目运行期间会出bug，此时该怎么办呢？

1. 当要开发新功能时，咱们直接在本地开发好，而后打包生产文件，最后直接放到远程服务器里面就能够了

2. 当出问题后，咱们能够直接在浏览器里面访问，而后在线的打开控制台调试，并修改运行中的html代码，当改好后，再在本地修改便可。固然若是bug很复杂的话，那就须要认真思考了，不过要相信没有解决不了的bug

再总结下：流程以下

1. 安装nodejs

2.使用nodejs的npm包安装create-react-app模块

3. 使用creat-react-app模块建立咱们的项目

4. 了解控制咱们项目运行测试打包的几个命令

5. 经过npm start运行咱们的项目

6. 查看生产的项目目录的结构，并了解其做用

7. 开始建立几个咱们本身的组件

8. 再次运行咱们的项目

9. 开始打包生产环境中须要的代码

10. 将咱们的代码部署进入咱们的服务器

11. ok,上线了，咱们可让用户正式访问了

12. 维护调试