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
