前言:
react 最近實在是很熱,熱到我覺得我去學 angularjs 有點選錯邊
但其實我是在等 angularjs 2 出來啦,想說趁無聊來玩一下 reactjs 好了
要開始學習react之前當然要先搞定開發環境 (這篇是講在 windows 上)
這篇根本從零開始....我剛開始連babel是啥都不知道 ><
前端高手們可以直接跳過,或進來指正教導一下
因為本人前端的東東摸得實在很淺....
只玩過jquery、angularjs、一下下的Node.js、一點點的typescript而已
平常沒在用的話,後者幾乎都已經忘得差不多....orz
而且windows 環境設定感覺又比較麻煩,所以這篇適合像我一樣的新手觀看
以下開始:
如果你是要快速 + 快樂的使用 React 來開發
不管哪個平台,就直接到React官網下載回來,直接用 javascript 開始寫
或是再引用一個 Babel 的CDN即可使用 JSX 來開發
然後React 的開發方式有很多種,像是在 .Net 也有 http://reactjs.net/
但是這篇會以大多數人都使用的方式來做
就像上面提到的 react 可以讓你用純 javascript 來開發,或是使用 jsx 來開發
但是 jsx 必須要透過轉譯成 js 才能執行,所以上面提到了需要掛載 babel 作轉譯的動作
再來就分兩種方式來介紹該如何開始弄好開發環境
首先最簡單的
一、引用 React 核心 + Babel CDN 來開發
Babel 就是用來轉譯將 JSX 變成 JS 的,如果是打算要用純 javascript 開發也可以不引用 Babel
步驟粉簡單:
1. 到 https://facebook.github.io/react/docs/getting-started.html 下載 React 核心套件
解壓縮之後,核心程式在 build 資料夾,也有 examples 資料夾一堆範例可以參考
其中 build 資料夾裡面有這幾隻
react.js:就是 react 的核心
react-dom.js:是用來提供與 DOM 有關的功能
react-dom-server.js:是 react 在伺服器端用來 render DOM用的 (感覺好厲害)
react-with-addons.js:react 的相關套件 (還不知道怎麼用)
後面有加上 .min 的就是最小化後的檔案
所以要滿足最基本開發條件的話,至少要引用
1. react.js
2. react-dom.js
如果要使用 JSX 的話,還要再多引用一個 Babel 的 CDN
Babel 可以來下面這個連結指定版本
https://cdnjs.com/libraries/babel-core
於似乎,引用這三個 js 就可以快快樂樂進行開發了
如下圖:
開始寫之前記得要先把區段定義成 text/babel
<script type="text/babel">
</script>
這樣的開發方式最快了,不太需要管有的沒的,因為掛載了 Babel 也可以使用 JSX 來開發
但是缺點是執行時會需要先把你的 text/babel 區段轉譯成純 Javascript
可能多少會占用一些效能
二、引用 React 核心 + 離線轉譯
離線轉譯的意思就是把你所寫的 JSX 在上線前就先轉譯成 Javascript
因此網頁在執行時就不需要再做轉譯的動作了,效能當然就比較好一些
但這個對我來講就比較難搞一點,必須要使用 npm 來安裝 Babel 命令列工具
繼續開始
在 Node.JS 的 Windows 版本 0.6.25 開始內建了 npm 這個工具了
所以你可以直接用 nodejs.org 的官方安裝程式下一步下一步一直裝就能直接使用 npm 了
但是如果你想直接裝 npm,也可以到這邊來下載
https://www.npmjs.com/package/npm
這邊有 linux 與 windows 版本
不過不知道是網站有問題還是已經不給裝,我點進去時是空的,找不到 zip file = =
這邊也有 npm 在 windows 的升級說明
https://github.com/npm/npm/wiki/Troubleshooting#upgrading-on-windows
繼續開始
還是直接下載 node.js 來安裝比較快
首先到 https://nodejs.org/en/ 下載穩定版本的 nodejs
安裝時選擇你要安裝的地方
一直下一步下一步就裝完了,連環境變數都幫你加好了
想要知道有沒有安裝成功,可以打開 Node.js command prompt
輸入 npm -v
就可看到你安裝的 npm 版本了
這篇不是在講 npm 命令的學習心得,但還是稍微提一下
等下會使用 install 命令來進行安裝,而 install 有個參數叫做 --global (或是打 -g 也可)
像下面這樣
npm install --global babel-cli
而如果你在使用 install 命令時沒有加 --global 的話,該套件就會安裝在你下命令的那個資料夾
看看下圖,我在 d:\React 資料夾下輸入 npm install babel-cli
他就會安裝在 d:\React 資料夾
如果加了 --global 參數就會被安裝到系統資料夾
C:\npm
屁了太多,繼續開始
首先按照 官網 所說,用 npm 安裝一下 Babel command-line tools 套件
按照順序執行下面兩個命令進行安裝
npm install -g babel-cli npm install -g babel-preset-react
裝完之後就可以在 C:\ 下看到 npm 資料夾跟裡面的套件
然後重點是要怎麼用!!
首先將目錄切換到 c:\npm ,然後建立一個 hello.js 裡面放以下的 JSX code 假裝是等下要轉換的對象
ReactDOM.render( <h1>Hello world</h1>, document.getElementById('hello') );
然後輸入
babel --presets react hello.js
輸出的資料就是轉譯後的內容了
然後也可以直接將轉譯後的內容輸出成檔案
babel --presets react hello.js --out-dir D:\React
上面那行就是把 hello.js 轉譯後,輸出到 D:\React 資料夾
然後就會看到 D:\React 資料夾多了一個 hello.js
每次都要下命令轉也很麻煩,所以可以用 watch 的方式,只要有異動就自動輸出轉譯後的檔案
babel --presets react hello.js --watch --out-dir D:\React
之後只要 hello.js 有異動就會自動轉譯到內容 D:\React 了
但是這樣還是很難管理,因為專案的來源跟輸出放在不同的地方
所以可以在專案資料夾中建立 source、output 資料夾
當 source 裡面的 js 有異動就轉譯到 output 資料夾
像執行下面這行之後
babel --presets react D:\react\source\ --watch --out-dir D:\react\output\
之後 Source 資料夾 js 有異動,就會自己輸出到 Output 資料夾啦
這篇就這樣簡單結束,下面是補充資料
新手的名詞解釋:JSX 是啥
***************************
jsx 就是在 js 裡面,可以直接寫 html tag,但是需要轉譯成 js,會比較好維護
你也可以直接寫 javascript,只是官方會建議是寫 jsx
像下面官網的範例這樣:
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
實際上轉譯成可讓瀏覽器執行的 javascript 是下面這樣
ReactDOM.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
當然你也可以不使用 JSX 直接寫 Javascript
新手的名詞解釋:Babel 是啥
*****************************
Babel 是一個轉譯器,是由澳大利亞的開發者Sebastian McKenzie創建的
官網在這邊:https://babeljs.io/
它的用途是讓你可以直接用JavaScript ECMAScript 6的語法來寫code,不需要等待瀏覽器支援
同時他也支援了React與JSX,據說此人目前已被挖角到 facebook react 開發團隊
新手的名詞解釋:npm是啥
*****************************
npm 全名是 Node Package Manager,是 Node.js 的套件管理工具
把他想像成 .net 的 NuGet就是了
npm 指令可以參考官網:
https://docs.npmjs.com/cli/npm
參考資料:
https://facebook.github.io/react/docs/getting-started.html
http://infoheap.com/reactjs-jsx-to-javascipt-using-babel-cli/
快快樂樂學 React 系列
=========================================
React 初學者筆記與教學 (一) - 新手村搞定開發環境
React 初學者筆記與教學 (二) - Virtual DOM、Component (元件) 的建立與傳值
React 初學者筆記與教學 (三) - State 的介紹與使用方式,讓你的元件可以跟使用者互動!
React 初學者筆記與教學 (四) - 使用 React.PropTypes 來驗證元件屬性
留言列表