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

最新推荐文章于 2024-09-26 08:38:16 发布

chunchun1230

最新推荐文章于 2024-09-26 08:38:16 发布

阅读量1.3k

点赞数

分类专栏： React点滴

原文链接：https://blog.csdn.net/tiangongkaiwu152368/article/details/80847494

版权

React点滴专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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

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

1. 安装nodejs

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

3. 使用creat-react-app模块创建我们的项目

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

5. 通过npm start运行我们的项目

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

7. 开始创建几个我们自己的组件

8. 再次运行我们的项目

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

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

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

12. 维护调试

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

请参考以下nodejs安装教程：

Node.js安装配置

二、检测npm包是否可用：

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

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

三、使用 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安装目录，然后把这个目录删除一般就能解决了。
四、常用命令解释

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

npm start

命令作用：Starts the development server.

npm run build

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

npm test

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

npm run eject

命令作用：

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

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

如何开始你的项目：

cd project_name

npm start
五、查看项目目录结构

大致如下图所示，共有三个文件夹，四个文件

解释如下：

三个文件夹

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

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

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

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

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

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

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

src文件夹

然后我们来重点看看src文件夹，因为我们的react组件代码待会也会写在里面。

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

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

2、index相关的js，css文件

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

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

六、创建我们自己的组件

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">
            <h1>你好，我是新学的react中的第一个组件</h1>
          </div>
        );
    }
}
export default C1;

c2.js代码如下:

import React, { Component } from 'react';
import './c2.css';
class C2 extends Component{
    render(){
        return(
            <div className="C2">
                <h1>66666666666这是组件2</h1>
            </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 * 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();

浏览结果如图所示：

再复杂点

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

现在我们就来在写个组件C3,然后把他嵌套进APP组件中。

c3.js代码如下所示：

import React, { Component } from 'react';
class C3 extends Component{
  render(){
      return(
          <div className="c3">
             <h1> hello 我是嵌套的组件</h1>
          </div>
      );
  }  
}
export default C3;

APP.js代码如下所示：

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

export default App;

浏览器浏览结果如图所示