creact-react-app应用如何从开发到上线运行
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安装教程：
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新目录绝对路径就可以了，如果不会，请参考我下面的目录定位教程
7、找到我们创建的项目安装好后，我们复制cmd窗口中项目所在路径到资源管理器里面打开找到。如下：
9、项目运行在浏览器里面截图如下，可以看到，他确实创建了本地服务器，并且端口号为3000http://localhost:3000/
11、src文件夹然后我们来重点看看src文件夹，因为我们的react组件代码待会也会写在里面。这里面的文件也不多，就四部分1、APP相关的js，css文件 //自动给我们创建的一个组件2、index相关的js，css文件3、一个logo.svg图标 //默认的一个简单图标文件4、一个registerServiceWorker.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文件就不展示了，免得让你们眼睛看花了
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;
18、在看浏览器里面的运行结果（我的apach服务器的端口为8087）
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. 。。。。。如果感兴趣的话，你可以关注我的百度账号，以便及时阅读我的新文章。