React项目从开发到上线运行全过程记录笔记

梦里梦外; 2022-12-15 11:25 181阅读 0赞

### React项目从开发到上线运行全过程笔记 ###

*  一、Linux上安装node
 *  二、检测npm包是否可用
 *  三、使用 create-react-app 快速构建 React 开发环境
 *  四、常用命令解释
 *   *  npm start
     *  npm run build
     *  npm test
     *  npm run eject
 *  五、查看项目目录结构
 *   *  src文件夹
     *  分析组件结构
 *  六、创建我们自己的组件
 *  七、打包为生产版
 *  八、将其放在服务器中执行
 *  九、将其放到远程服务里面部署
 *  十、部署到服务器上后的维护

https://blog.csdn.net/tiangongkaiwu152368/article/details/80847494?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param

# 一、Linux上安装node #

我们要用create-react-app来开发react，首先要通过包管理器安装create-react-app，而包管理器一般安装了nodejs后会自带的，所以我们的第一步是在我们的电脑上安装node。

直接使用已编译好的包

Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：

> wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz // 下载  
> tar xf node-v10.9.0-linux-x64.tar.xz // 解压  
> cd node-v10.9.0-linux-x64/ // 进入解压目录  
> ./bin/node -v // 执行node命令 查看版本

解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接：

> ln -s /usr/software/nodejs/bin/npm /usr/local/bin/  
> ln -s /usr/software/nodejs/bin/node /usr/local/bin/

# 二、检测npm包是否可用 #

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]

# 三、使用 create-react-app 快速构建 React 开发环境 #

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

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

执行以下命令创建项目：

> npm install -g create-react-app  
> ln -s /usr/local/nodejs/bin/create-react-app /usr/local/bin  
> create-react-app project\_name  
> cd project\_name/  
> npm start

![在这里插入图片描述][20201016162142341.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 1]

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 2]

命令解释：

> npm ： 表示调用的随node一起安装的npm包  
> install : 顾名思义，就是安装的意思  
> \-g : 表示全局安装,安装后在系统的任意位置都能使用,这就是全局安装的意思  
> create-react-app: 这就是我们要安装的模块

提示：安装好后，如果你想卸载，可以直接把install改为uninstal即可，也就是在前面个un就可以表示卸载了。有时候卸载后在安装可能会报写错，此时你直接定位的create-react-app安装目录，然后把这个目录删除一般就能解决了。

# 四、常用命令解释 #

安装好后，他给你说了些命令，这些命令大致如下

## npm start ##

> 命令作用：Starts the development server.

## npm run build ##

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

## npm test ##

> 命令作用：运行测试服务器

## npm run eject ##

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

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

如何开始你的项目：

> cd project\_name  
> npm start

# 五、查看项目目录结构 #

大致如下图所示，共有三个文件夹，四个文件  
![在这里插入图片描述][20201016164745218.png_pic_center]

解释如下：

三个文件夹

node\_modules //用来盛放你安装的所有node模块的文件夹

public //用来盛放所有公共资源的文件夹，比如html模板，项目图标

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

四个文件

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

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

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

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

## src文件夹 ##

然后我们来重点看看src文件夹，因为我们的react组件代码待会也会写在里面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 3]

这里面的文件也不多，就四部分

1、APP相关的js，css文件 //自动给我们创建的一个组件

2、index相关的js，css文件

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

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

## 分析组件结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 4]

主要说些比较重要的文件

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文件，主要是用来组件测试的，有兴趣可以取好好了解下，这里就不多讲这个。

# 六、创建我们自己的组件 #

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 (
    
          <div className="c1">
    
            Hello,我是在src/myselfComponent目录下的C1.js文件中的C1组件 我引入了相同目录下的 C1.css 文件，用来给我包含的文字设为红色
    
          </div>
          );
      }
    }
    export default C1;

创建C1.css

.c1 { 
      font-size: 30px;
      color: #ff0000;
    }

创建C2.js

import React, {  Component } from 'react';
    
    import './C2.css';
    
    class C2 extends Component { 
    
      render() { 
    
        return (
    
          <div className="c2">
    
            Hello,我是在src/myselfComponent目录下的C2.js文件中的C1组件 我引入了相同目录下的 C2.css 文件，用来给我包含的文字设为蓝色
    
          </div>
    
          );
      }
    }
    
    export default C2;

创建C2.css

.c2 { 
      font-size: 30px;
      color: #0000ff;
    }

修改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 * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(
    
      <div>
    
        <C1/>
    
        <App />
    
        <C2/>
    
      </div>,
    
      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();

# 七、打包为生产版 #

ok,基本上还是很简单的，然后我们的项目开发演示完成了，现在我们来开始进行生成生产环境的代码（所谓生产环境就是值用来发布到服务器里面的代码，是根据我们开发环境的代码生成）

执行命令：

> npm run build

执行此命令后，他会在我们的项目目录下创建一个build文件夹，里面存放的就是生产环境需要的代码了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 6]

# 八、将其放在服务器中执行 #

生成环境中的代码生成后就要开发发布了，也就是放到我们的服务器上，供用户访问使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 7]

这部就比较简单了，直接将build里面的所有文件复制到服务器的根目录下即可，如下（这里我是直接复制到我本地搭建的nginx服务器的根目录里面的）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 8]  
浏览器访问：http://20.20.24.130:8080/

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 9]

# 九、将其放到远程服务里面部署 #

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

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

注意：如果你不想将文件复制到根目录，那么你需要修改inde.html文件中对js和css文件的路径，不然无法正常访问。

# 十、部署到服务器上后的维护 #

当我们项目上线后可能还要开发新功能，也可能项目运行期间会出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. 维护调试

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3d06caf342704aaa8b7d7b648608703a.png
[20201016162142341.png_pic_center]: /images/20221123/3825ea138b104accb87110581852d300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/1f58b654c4e14a9d90a76f9ebf950906.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/2020b342994f4a3aad7190501e84dd5d.png
[20201016164745218.png_pic_center]: /images/20221123/a3f938997d8e42c1916c3186e57849b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/2198daade83247da99211346c6e99ce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/c003966534a4450d8744ca09bf0fd9d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/64b2fdd4e48248c2956f5427f8b1836d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/15e47189e7f2484ca5147c8444de7e12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/24626a25c2ee448da64c4939e1f4c698.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/5bb87d3ccfcf4e939b7b22c1d794f542.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/63de22d0877345fcaa464ee7411ec074.png