[React]React超級入門




開始之前

首先你需要知道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商店

設定也要記得打開

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料