随着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安装教程:
二、检测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/ ,结果如下图所示: