開始之前
首先你需要知道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商店
設定也要記得打開