React学习笔记
一 环境搭建
看着端开发如火如荼，心里痒痒，也想顺应潮流，跳入这个大坑。经过认真的比较，感觉React比较顺眼，于是就选择该框架作为我学习前端技术的入门。
工欲善其事必先利其器，环境的搭建时第一步，在参考了React官方网站和Babel以及阮一峰先生的React实例入门后，我搭建起好了环境，环境搭建步骤如下：
- 安装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的项目创建，避免了手动配置的麻烦。
使用VSCode创建一个新的目录demo1，在目录中添加index.html，package.json和.babelrc文件，在demo1下创建src子目录，src子目录下填加test.js文件。在index.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中加入如下代码：
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就能看到如下页面：
铛铛铛~~~
到目前为止好像没有用到Babel啊，这是因为我们在index.html中加入了babel.js的引用，该js会在浏览器加载页面时对ES6语法的js文件进行解释为ES5的语法，再交给浏览器执行。这种方式适合学习开发阶段，如果要部署到生产环境就需要将src中的test.js先转义为符合ES5语法格式的JavaScript文件，这是在Console中进入demo1目录执行如下命令：
这样在部署到生产环境时，将lib目录下生成的JavaScript文件copy到src中即可。慢着，这个好像也比较麻烦啊，当然了现代的前端技术给我们提供了更好的打包部署工具WebPack，Gulp等，到目前还没有用到package.json文件就是为此准备的，后面有时间在研究一下如何使用工具打包发布。
到此一个基本的React开发环境已经搭建完成，接下来就可以集中精力学习React开发的知识和技巧了。