開始之前
首先你需要知道react是一個javascript的函式庫
以及需要具備一些基礎的jacascript知識
準備檔案
從react git hub上下載需要的檔案(如欲跟隨本文章操作建議下載v15版本)
https://github.com/facebook/react/releases
分別是
react.js
react-dom.js
將react加入你的網頁
與你的網頁檔案放置在 一起然後引入
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
※這邊我已經先將檔案放置在react資料夾底下
編輯你的網頁
建立一個<div id="root">的標籤
然後加入
ReactDOM.render(
React.DOM.h1(null,"Hello World!"),
document.getElementById('root')
);
到這邊,你已經完成Hello World!
完整的網頁參考如下
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="root"> <!-- render here --> </div> <script src="react/react.js"></script> <script src="react/react-dom.js"></script> <script > ReactDOM.render( React.DOM.h1(null,"Hello World!"), document.getElementById('root') ); </script> </body> </html>
最後建議各位安裝react的開發者工具,有助於除錯以及看到目前元件的狀態
chrome商店
設定也要記得打開