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

        随着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 my-app
$ cd my-app/
$ npm start

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


猜你喜欢

转载自blog.csdn.net/tiangongkaiwu152368/article/details/80847494