首先，咱得把Node.js装上。这没啥好说的，React现在这生态，离了Node.js根本玩不转。去官网下个LTS版本，稳定第一。装完之后，命令行里敲个 和 ，能出版本号就行。不过这里有个小细节，如果你之前装过旧版本，最好先彻底卸载干净再装新的，不然有时候会出灵异问题。我一般推荐用nvm（Node Version Manager）来管理Node版本，特别是如果你手头不止一个项目，不同项目可能依赖不同Node版本，用nvm切换起来那叫一个丝滑。
有了Node.js，咱就可以请出今天的重量级工具------Create React App（简称CRA）。这可是Facebook官方出的脚手架工具，专治各种环境配置不服。你不需要自己去折腾Webpack、Babel那些破事，CRA全给你搞定了。打开命令行，找个你放代码的目录，直接运行 。注意，这里用npx是为了确保你用到的是最新版本的CRA，不需要全局安装。等它跑完，一个崭新的React项目骨架就生成了。
项目生成好了，cd到项目目录里， 一把梭。正常情况下浏览器会自动打开 ，看到那个转动的React logo就成功了一大半。如果没自动打开，手动访问这个地址也行。这时候你可以试着改一下src/App.js里的代码，保存一下，浏览器页面会自动刷新，这就是热重载（Hot Reload）在起作用了，开发体验直接拉满。
不过有时候你会遇到端口被占用的情况，比如3000端口已经被别的程序占了。这时候命令行会提示你换端口，按y它就会换个新的。或者你也可以手动指定端口，比如 。另外，有些童鞋在公司内网开发，可能会遇到代理问题，这时候就需要在package.json里加个proxy字段配置一下后端API地址。
说到目录结构，CRA生成的项目挺清晰的。src文件夹放源代码，components里放组件，App.js是根组件，index.js是入口文件。public里放静态资源。刚开始学的时候，别急着去动那些配置文件，像webpack.config.js这种，CRA故意把它们藏在了react-scripts依赖里，就是怕新手乱改给改崩了。等玩熟了，真的觉得CRA满足不了你了，再执行 把配置暴露出来，不过这一步是不可逆的，eject之前最好先commit一下代码。
样式方面，CRA默认支持CSS，你也可以用Sass/Less，不过要额外安装一下依赖。比如用Sass的话，就 装一下，然后把.css文件改成.scss就行了，Webpack会自动帮你编译。要是想用CSS Modules，把css文件命名成[name].module.css就行了，这样可以避免样式冲突。
等代码写差不多了，要打包发布的时候，运行 ，它会创建一个build文件夹，里面就是优化压缩后的生产环境代码。这个build出来的东西可以直接扔到静态服务器上部署。如果遇到打包后白屏，大概率是路径问题，检查一下package.json里的homepage字段，或者配置一下路由的basename。
最后唠叨几句，React环境这块，最大的建议就是：前期尽量用CRA，别自己瞎配置。很多人一开始就想着从零配置Webpack，结果99%的时间都花在了环境调试上，正经代码没写几行。先把React玩明白了，知道CRA哪里不方便了，再去考虑自己搭环境。还有，遇到问题多查查官方文档，比在群里问强多了。好了，今天就唠到这，希望能帮到正在搭环境的你。