React学习指南

           学习React快一个星期了，说一下我这个星期的学习路线和心得。在决定学习react之后，我大部分在实验室的时间都用来学习React，中间也有接触过RN（react native），RN是基于移动端开发的框架，而React是基于Web浏览器的框架。

          我的学习路线如下：

          学一门新的技术，最好的途径是看它官网提供的文档，平时看英文文档特头大，效率低，好在有翻译过的中文文档。还有一个React China论坛，可以看看别人学习react时碰到的问题，看你能否解决，同样你也可以和他们探讨你学习react时碰到的问题，在论坛上我看到了别人分享的React学习资源汇总，里面有一系列的从入门到精通的文章推荐。后面我也是按照这里面的学习路线进行学习的。

          看了阮一峰网络日志后，更加清楚了该如何用React开发项目的整套流程，React 技术栈系列教程，这里面介绍了和react相关的要学的技术，主要包括现在流行的ES6,转码器Babel,还有模块化和打包工具Webpack。于是知道了现在主要采用ES6+React+Webpack的开发模式。接下来讲一下怎样搭建一个基本的项目框架。

        最终的项目目录结构如下：

                                

   

        用npm安装react、webpack

•                   默认已安装了nodejs，并输入：npm init根据提示输入内容并创建package.json文件，然后依次输入：

              npm install react --save-dev

              npm install  webpack  --save-dev

         意思是安装最新版本的React与Webpack并将它们保存至package.json内的开发依赖项目中，安装成功如下图：

                     

•           创建webpack.config.js配置文件        

                     

           其中entry指定了webpack的人口地址，output指定了模板存放的路径,bundle.js就是这样编译后自动生成的。

• 安装并启动webpack-dev-server

         webpack-dev-server允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到类似BrowserSync（即文件修改能被监听，并自动刷新浏览器）的效果！

                          

           ps：dev里各属性值的意思是：
webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器
--devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
--progress: 显示合并代码进度
--colors: 在命令行中显示颜色
--content-base build:指向设置的输出目录

• 运行npm run dev 即可自动监听文件修改