React学习笔记--环境搭建

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开发的知识和技巧了。