React学习笔记
一 环境搭建
看着端开发如火如荼，内心痒痒，也想顺应潮流，跳入这个大坑。通过认真的比较，感受React比较顺眼，因而就选择该框架做为我学习前端技术的入门。
工欲善其事必先利其器，环境的搭建时第一步，在参考了React官方网站和Babel以及阮一峰先生的React实例入门后，我搭建起好了环境，环境搭建步骤以下：javascript
- 安装node js
- 安装babel及相关插件,为避免每一个工程项目都从新安装相关依赖我使用了npm全局安装的方式
npm install --save-dev babel-cli babel-preset-env -g
npm install --save-dev babel-preset-react -g
铛铛铛~~~，到目前位置基本上已经能够进行React开发了，是否是很简单。不过目前的环境开发须要大量的手动配置，不过也很符合咱们做为初学者了解相关原理的美好愿望。固然了也可使用create-react-app,这个插件能够建立一个带有配置和环境的单页面App,有点像Virtual Studio的项目建立，避免了手动配置的麻烦。css
使用VSCode建立一个新的目录demo1，在目录中添加index.html，package.json和.babelrc文件，在demo1下建立src子目录，src子目录下填加test.js文件。在index.html文件中填加以下代码：html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="test"></div>
<script type="text/babel" src="../src/test.js"></script>
</body>
</html>
在.babelrc文件中填加以下配置，若是使用的时本地babel，则后面的值只须要写babel-preset-react,此处我使用的时全局babel，故填写个人babel插件的路径：前端
{
"presets": ["C:/Users/qdhg/AppData/Roaming/npm/node_modules/babel-preset-react"] }
在test.js中加入以下代码：java
var names=['Mike','Jerry','Tom']
ReactDOM.render(
<div> { names.map(function(name){ return <h1>Hello,{name}!</h1> }) } </div>, document.getElementById('example') );
而后把demo1目录配置成IIS下的一个应用程序访问index.html就能看到以下页面：
铛铛铛~~~node
到目前为止好像没有用到Babel啊，这是由于咱们在index.html中加入了babel.js的引用，该js会在浏览器加载页面时对ES6语法的js文件进行解释为ES5的语法，再交给浏览器执行。这种方式适合学习开发阶段，若是要部署到生产环境就须要将src中的test.js先转义为符合ES5语法格式的JavaScript文件，这是在Console中进入demo1目录执行以下命令：react
这样在部署到生产环境时，将lib目录下生成的JavaScript文件copy到src中便可。慢着，这个好像也比较麻烦啊，固然了现代的前端技术给咱们提供了更好的打包部署工具WebPack，Gulp等，到目前尚未用到package.json文件就是为此准备的，后面有时间在研究一下如何使用工具打包发布。
到此一个基本的React开发环境已经搭建完成，接下来就能够集中精力学习React开发的知识和技巧了。web
