开发React应用时，很少有人直接引入react的源JS文件，然后再开发。大家都是用webpack + es6来结合react开发前端应用。而webpack的使用又比较繁琐，为此官方提供了用于快速构建开发环境的脚手架工具Create React App。该脚手架将Webpack、Babel工具的配置进行了封装。使用它创建的项目，开发者不需要对其进行任何的配置工作，从而使你可以专注于开发！
1、安装
eate-react-app安装起来简单的要命，只需要一条命令！打开你的命令控件台，输入以下命令：
cnpm install -g create-react-app
通过-g可以将create-react-app安装到全局环境中，这样你就可以为所欲为的在任意路径下玩耍它了。
查看安装的版本号：
create-react-app -V
2、创建你的应用
输入以下命令：
create-react-app my-app
这个时候会在你当前的路径下创建一个名字为 my-app的文件夹， my-app也就是你新创建的React应用。
注意：你的应用名字不要使用大写，这样做只要是为了严谨性，因为在Linux下是严格区分大小写的。
3、运行你的应用
创建应用完毕后，接下来就可以运行它了，输入以下命令：
cd my-app
npm start
运行后，它会主动打开你的浏览器，端口号默认为3000。如图：
打开my-app目录，你会发现结构非常简单清晰。
node_modules：存放的是安装所需要的所有依赖模块。
public：index.html为你项目的入口 页面。
src：你项目的源代码，其中index.js是你的代码入口。
package.json：项目中的基本信息都在这里了，例如你的项目名称、版本号、执行的命令、依赖的模块项之类的。
所有的源码都放到src目录下了，其它杂七乱八的东西你都不用搭理它，你只管在该文件下静静开发即可。因为其它的create-react-app都给你处理好了。
接下来我们可以打开index.js，你会发现它使用入了App.js。再打开App.js，修改render方法。将“Welcome to React”修改为“欢迎来到React的世界做客！”。代码如下：
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<h1 className="App-title">欢迎来到React的世界做客！</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
当你保存文件后，你会发现你的浏览器也会实时进行更新，这是因为Create React App具有热更新的功能。如图：
4、编译你的应用
只需要一条命令即可将你的应用编译为开发环境中的代码！
cnpm run build
编译好的文件都会放到build目录中。另外它还提供一个服务器，让我们在本地也能看到线上生产环境类似的效果，是不是很方便，是不是有种马上就想尝试下的冲动？
若想编译你的生产环境首先安装pushstate-server用于将已经编译好的项目进行部署：
cnpm install -g pushstate-server
然后就可以在本地查看你的效果啦
pushstate-server build
然后浏览器访问http://127.0.0.1:9000/，就可以看到编译后的测试项目啦！
网友评论