前言:

react 最近實在是很熱,熱到我覺得我去學 angularjs 有點選錯邊

但其實我是在等 angularjs 2 出來啦,想說趁無聊來玩一下 reactjs 好了

要開始學習react之前當然要先搞定開發環境 (這篇是講在 windows 上)

這篇根本從零開始....我剛開始連babel是啥都不知道 ><

前端高手們可以直接跳過,或進來指正教導一下

因為本人前端的東東摸得實在很淺....

只玩過jquery、angularjs、一下下的Node.js、一點點的typescript而已

平常沒在用的話,後者幾乎都已經忘得差不多....orz

而且windows 環境設定感覺又比較麻煩,所以這篇適合像我一樣的新手觀看

 

以下開始:

如果你是要快速 + 快樂的使用 React 來開發

不管哪個平台,就直接到React官網下載回來,直接用 javascript 開始寫

或是再引用一個 Babel 的CDN即可使用 JSX 來開發

新手的名詞解釋:JSX 是啥 

新手的名詞解釋:Babel 是啥

 

然後React 的開發方式有很多種,像是在 .Net 也有  http://reactjs.net/

但是這篇會以大多數人都使用的方式來做

就像上面提到的 react 可以讓你用純 javascript 來開發,或是使用 jsx 來開發

但是 jsx 必須要透過轉譯成 js 才能執行,所以上面提到了需要掛載 babel 作轉譯的動作

再來就分兩種方式來介紹該如何開始弄好開發環境

一、引用 React 核心 + Babel CDN 來開發

二、引用 React 核心 + 離線轉譯

 

首先最簡單的

 

一、引用 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 命令列工具

新手的名詞解釋:npm是啥 

繼續開始

在 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 來驗證元件屬性

 

 

arrow
arrow
    全站熱搜

    小雕 發表在 痞客邦 留言(1) 人氣()