1、本篇文章内容结构说明，主要有以下12个部分：1.安装nodejs2.使用nodejs的npm包安装create-react-app模块3.使用creat-react-app模块创建我们的项目4.了解控制我们项目运行测试打包的几个命令5.通过npm start运行我们的项目6.查看生产的项目目录的结构，并了解其作用7.开始创建几个我们自己的组件8.再次运行我们的项目9.开始打包生产环境中需要的代码10.将我们的代码部署进入我们的服务器11.ok,上线了，我们可以让用户正式访问了12.维护调试
2、安装node:我们要用create-react-app来开发react,首先要通过包管理器安装create-react-app,而包管理器一般安装了nodejs后会自带的,所以我们的第一步是在我们的电脑上安装node。请参考我以前写的nodejs安装教程：
3、检测npm包是否可用:安装好后，并且也配置进入了环境变量，然后我们来检测下你的npm包是否可用，打开cmd窗口，输入npm -v进行检测，如下所示，若显示版本号则说明安装成功，环境变量也配置成功，可用开始安装creact-react-app进行react开发了。如果，你输入npm -v后没有弹出版本号，那么可能是你的环境变量没有配置好。请参考下面的我以前写的如何配置环境变量教程。
4、通过npm包来安装create-react-app:当你的npm包可用后，我们来开始通过npm包来安装create-react-app。输入如下命令进行安装：npminstall -g create-react-app命令解释：npm ：表示调用的随node一起安装的npm包install :顾名思义，就是安装的意思-g :表示全局安装,安装后在系统的任意位置都能使用,这就是全局安装的意思create-react-app:这就是我们要安装的模块提示：安装好后，如果你想卸载，可以直接把install改为uninstal即可，也就是在前面个un就可以表示卸载了。有时候卸载后在安装可能会报写错，此时你直接定位的create-react-app安装目录，然后把这个目录删除一般就能解决了。安装示意图如下,等他反应完就行了：
5、通过creact-react-app来创建我们的rea罕铞泱殳ct项目在cmd窗口中执行命令如下：create-react-app project_name解释：create-react-app ：表示调用的create-react-app模块来创建项目project_name:表示我们要创建的项目名称注意：1. 由于npm命名限制，项目名称只能为小写。2. 当前我们的cmd窗口所定位到的目录在那里，我们的项目就会创建在那里，如我的当前目录在C:\Users\Administrator，所以我的项目就会被创建在这里，关于这个目录你们可以自己更改。【我这里是演示下，工作中，一般不要把项目创建在这个目录下，因为这是系统目录，请安装到自己的项目目录里面】3.在创建项目的过程中，有时候可能会卡着不动，此时点击下回车键就行，一般不用管，所谓更改目录就是直接定位到新目录下就可以，一般直接输入命令cd /d新目录绝对路径就可以了，如果不会，请参考我下面的目录定位教程
6、项目创建完成后的示意图，安装好后，他给你说了些命令，这些命令大致如下 npm start 命令作用：Starts the development server. npm run build 命令作用：构建用于生产的静态代码【我们开发完成后，发布时就使用此命令获得我们想要的用于生产的代码放入服务器】 npm test 命令作用：运行测试服务器 npm run eject 命令作用： 复制构建依赖关系，配置文件和脚本进入应用程序目录。（默认依赖关系是隐藏的，如果你执行此了操作，这你的项目就会出现此依赖关系）注意：此操作是不可逆的， 如何开始你的项目： cd project_name npm start
7、找到我们创建的项目安装好后，我们复制cmd窗口中项目所在路径到资源管理器里面打开找到。如下：
8、让我们的项目跑起来好了，项目已经生成了，我们可以让他跑起来了，根据上面的命令提示我们执行命令 cd project_name npm start解释：cd project_name ：表示目录跳转，进入到我们的项目根目录里面npm start：此项目内置命令，执行后会在本地创建一个服务器，端口号为3000,并且将此项目在浏览器中运行。
9、项目运行在浏览器里面截图如下，可以看到，他确实创建了本地服务器，并且端口号为3000http://localhost:3000/
10、查看项目目录结构然后我们打开项目目录，可以看下其目录结构大致如下图所示，共有三个文件夹，四个文件解释如下：三个文件夹node_modul髫潋啜缅es //用来盛放你安装的所有node模块的文件夹public //用来盛放所有公共资源的文件夹，比如html模板，项目图标src //用来盛放你自己代码的文件夹，默认生成app.js代码也在里面四个文件.gitignore //这个是用来定义那些在提交到远程代码库时要忽略的文件package.json //用来声明项目的各种模块安装信息，脚本信息等package-lock.json //用来锁定模块安装版本的，能确保大家安装的模块版本一致README.md //盛放关于这个项目的说明文件（全英文的，有兴趣可以看看）
11、src文件夹然后我们来重点看看src文件夹，因为我们的react组件代码待会也会写在里面。这里面的文件也不多，就四部分1、APP相关的js，css文件 //自动给我们创建的一个组件2、index相关的js，css文件3、一个logo.svg图标 //默认的一个简单图标文件4、一个registerServiceWorker.js文件 //此文件能进行缓存一些资源，一般是用到生产环境的，主要是用来加快访问速度，
12、大致的分析下组件结构主要说些比较重要的文件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.xml3.然后就是在scr目录下的index.js文件，他不是一个react组件，他是链接react与htnl模板的桥梁，所有的react组件最终都是由他进行渲染到html模板中。然后整个文件中引入了一个系统默认生成的组件APP,有index.js进行渲染。4.registerServiceWorker.js文件，这个文件是用于生产环境的，它可以缓存些资源，让用户在离线模式下也能访问缓存的内容，以给用户更好的体验，开发环境中没什么用处。。。5.最后还有个app.test.js文件，主要是用来组件测试的，有兴趣可以取好好了解下，这里就不多讲这个。
13、创建我们自己的组件1. 整个项目文件基本分析完了，然后我们就可以创建自己的组件了。2. 我们在src下新建一个目录：myselfComponent,用来盛放我们新创建的组件3.我们分别创建两个组件C1,C2,他们分别各显示一句话即可，4.然后我们在index.js里面引入C1,C2组件，5.然后在浏览器查看运行效果C1.jsimport React, { Component } from 'react';import './C1.css';class C1 extends Component { render() { return ( <div className="c1"> Hello,我是在src/myselfComponent目录下的C1.js文件中的C1组件 我引入了相同目录下的 C1.css 文件，用来给我包含的文字设为红色 </div> ); }}export default C1;--------------------------------------------------------C2.jsimport React, { Component } from 'react';import './C2.css';class C2 extends Component { render() { return ( <div className="c2"> Hello,我是在src/myselfComponent目录下的C2.js文件中的C1组件 我引入了相同目录下的 C2.css 文件，用来给我包含的文字设为蓝色 </div> ); }}export default C2;------------------------------------------------index.jsimport 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 registerServiceWorker from './registerServiceWorker';ReactDOM.render( <div> <C1/> <App /> <C2/> </div>, document.getElementById('root'));registerServiceWorker();----------------------------------------ok，css文件就不展示了，免得让你们眼睛看花了
14、在浏览器中的运行效果可以看到，运行的非常完美
15、在复杂点上面中，我们是把所有组件全部引入了index.js文件中，然后统一渲染的。但是在实际开发中组件间必然存在嵌套关系，就是一个组件里面嵌套着另一个组件，现在我们就来在写个耘资诡拨组件C3,然后把他嵌套进APP组件中。C3.jsimport React, { Component } from 'react';import './C3.css';class C3 extends Component { render() { return ( <div className="c3"> Hello,我是在src/myselfComponent目录下的C3.js文件中的C3组件 我引入了相同目录下的 C3.css 文件，用来给我包含的文字设为粗体黄色 </div> ); }}export default C3;------------------------------------------------------APP.jsimport React, { Component } from 'react';import logo from './logo.svg';import './App.css';import C3 from './myselfComponent/C3.js';class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={ logo } className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <C3 /> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); }}export default App;
16、打包为生产版ok,基本上还是很简单的，然后我们的项目开发演示完成了，现在我们来开始进行生成生产环境的代码（所谓生产环境就是值用来发布到服务器里面的代码，是根据我们开发环境的代码生成）执行命令：num run build执行此命令后，他会在我们的项目目录下创建一个build文件夹，里面存放的就是生产环境需要的代码了
17、将其放在服务器中执行生成环境中的代码生成后就要开发发布了，也就是放到我们的服务器上，供用户访问使用这部就比较简单了，直接将build里面的所有文件复制到服务器的根目录下即可，如下（这里我是直接复制到我本地搭建的apach服务器的根目录里面的）
18、在看浏览器里面的运行结果（我的apach服务器的端口为8087）
19、将其放到远程服务里面部署刚刚演示的是本地服务器，现在我再将其放到远程服务器里面进行部署如果你不知道如何将文件上传到远程服务器，请参考我以前的一篇经验文章
20、在浏览器中访问，ok,一切正常注意：如果你不想将文件复制到根目录，那么你需要修改inde.html文件中对js和css文件的路径，不然无法正常访问。
21、部署到服务器上后的维护当我们项目上线后可能还要开发新功能，也可能项目运行期间会出bug，此时该怎么办呢？1. 当要开发新功能时，我们直接在本地开发好，然后打包生产文件，最后直接放到远程服务器里面就可以了2.当出问题后，我们可以直接在浏览器里面访问，然后在线的打开控制台调试，并修改运行中的html代码，当改好后，再在本地修改即可。当然如果bug很复杂的话，那就需要认真思考了，不过要相信没有解决不了的bug
22、在总结下：流程如下1.安装nodejs2.使用nodejs的npm包安装create-react-app模块3.使用creat-react-app模块创建我们的项目4.了解控制我们项目运行测试打包的几个命令5.通过npm start运行我们的项目6.查看生产的项目目录的结构，并了解其作用7.开始创建几个我们自己的组件8.再次运行我们的项目9.开始打包生产环境中需要的代码10.将我们的代码部署进入我们的服务器11.ok,上线了，我们可以让用户正式访问了12.维护调试
23、到此，这篇文章就算完了，简单的讲了下，如何从无到有的搭建react开发环境，创建react项目，开发自己的项目，最后部自己的项目，然后在运营期间的维护其实这篇文章讲的内容还很少，所以后面我会在讲下，如下内容1. 纯react的各个组件如何通信2.使用原生的redux如何管理react数据，如何让各个组件间交流3.使用react-redux如何管理react数据，如何让各个组件间交流4.路由相关5. 。。。。。如果感兴趣的话，你可以关注我的百度账号，以便及时阅读我的新文章。
