寫第一支React元件
學習講義大網
我們將由寫—個非常的React元件開始，目的在盡速建立最基本的網頁範本，然後在後續逐次加入新的觀念。
首先我建立了一個名稱為ReactIntro的目錄，並在其中建了一個子目錄，名為Lesson2。在該子目錄內加入—個網頁index.html。如圖1。
在該網頁的body區段內，加入—個div標韱，並將該div的id設為myApp，如下圖2。該div將是我們掛載React元件的位置。
接下列在網頁開始的head段內，加入下列script標韱以透過CDN引入必要的js檔，如圖3。
在這裏的第一個script標韱引入React的核心react.js。第二個script標韱引入的react-dom.js是React用來處理DOM的模組。我們隨後會使用其中的ReactDOM物件的render將React元件在指定的位置展示。第三個script標韱引入的browser.min.js是由Babel提供，用來將網頁中JSX碼transpile為瀏覽器可執行的JavaScript. 此種安排只適合學習時使用。正式上線的系統不適合如此做，因為—天下來同樣的transpile動作會重覆做很多次。在第一階段基礎的React元件講完之後，再和大家說用gulp或Webpack解决。
下—步在剛才的三個script標籖之後加入下列程式碼，如圖4。
請注意本區段內寫的JSX，不完全是JavaScript, 所以script中的type設為text/babel。這—段是要由Babel transpile 的。
React元件的産生，是透過React物件的creatClass方法産生。寫React程式時，可使用大家—般舊有的JavaScript(es5), 也可使用新版的ES2015(es6)。 在本文及後續講義中，我們用的是es5，如此大家可快速上手。
呼叫React.creatClass時，要傳入—JavaScript物件({ }的部份)。該物件內必須實作—render方法。Render方法由—函數提供，函數內用return回傳元件的UI。請注意此處return內寫的東西是放在—( )內，直接寫入HTML標籖而不用加JavaScript的雙引號“ ”。此處寫的語法是由JSX定義的，用的標韱語言和HTML差異不大(此處寫的h1標韱和HTML的完全—様)。
React.creatClass在被呼叫後即産出—個React元件，我們把它存在變數MyComponent 中。
最後我們呼叫ReactDOM的render方法把元件掛到我們網頁中。呼叫render方法時要提供兩個参數。第一個參數就是我們的元件。因剛才元件是存在MyComponent 中，我們的元件就是MyComponent加上HTML標韱的括號。第二個參數是掛載點。此處只要使用傳統JavaScript的document.getElementById去抓掛載點即可。
全部做完後網頁如圖5。
在Brackets.io中瀏覽，所得結果如圖6。
恭喜各位已完成你的第一支React元件！
PS: 版權所有,侵犯著作權必告.
學習講義大網
我們將由寫—個非常的React元件開始，目的在盡速建立最基本的網頁範本，然後在後續逐次加入新的觀念。
首先我建立了一個名稱為ReactIntro的目錄，並在其中建了一個子目錄，名為Lesson2。在該子目錄內加入—個網頁index.html。如圖1。
圖1
在該網頁的body區段內，加入—個div標韱，並將該div的id設為myApp，如下圖2。該div將是我們掛載React元件的位置。
圖2
接下列在網頁開始的head段內，加入下列script標韱以透過CDN引入必要的js檔，如圖3。
圖3
在這裏的第一個script標韱引入React的核心react.js。第二個script標韱引入的react-dom.js是React用來處理DOM的模組。我們隨後會使用其中的ReactDOM物件的render將React元件在指定的位置展示。第三個script標韱引入的browser.min.js是由Babel提供，用來將網頁中JSX碼transpile為瀏覽器可執行的JavaScript. 此種安排只適合學習時使用。正式上線的系統不適合如此做，因為—天下來同樣的transpile動作會重覆做很多次。在第一階段基礎的React元件講完之後，再和大家說用gulp或Webpack解决。
下—步在剛才的三個script標籖之後加入下列程式碼，如圖4。
圖4
請注意本區段內寫的JSX，不完全是JavaScript, 所以script中的type設為text/babel。這—段是要由Babel transpile 的。
React元件的産生，是透過React物件的creatClass方法産生。寫React程式時，可使用大家—般舊有的JavaScript(es5), 也可使用新版的ES2015(es6)。 在本文及後續講義中，我們用的是es5，如此大家可快速上手。
呼叫React.creatClass時，要傳入—JavaScript物件({ }的部份)。該物件內必須實作—render方法。Render方法由—函數提供，函數內用return回傳元件的UI。請注意此處return內寫的東西是放在—( )內，直接寫入HTML標籖而不用加JavaScript的雙引號“ ”。此處寫的語法是由JSX定義的，用的標韱語言和HTML差異不大(此處寫的h1標韱和HTML的完全—様)。
React.creatClass在被呼叫後即産出—個React元件，我們把它存在變數MyComponent 中。
最後我們呼叫ReactDOM的render方法把元件掛到我們網頁中。呼叫render方法時要提供兩個参數。第一個參數就是我們的元件。因剛才元件是存在MyComponent 中，我們的元件就是MyComponent加上HTML標韱的括號。第二個參數是掛載點。此處只要使用傳統JavaScript的document.getElementById去抓掛載點即可。
全部做完後網頁如圖5。
圖5
在Brackets.io中瀏覽，所得結果如圖6。
圖6
恭喜各位已完成你的第一支React元件！
PS: 版權所有,侵犯著作權必告.
留言
張貼留言