寫一個簡單的Hello Word程式
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script></head><body> <div id="root"></div> <script type="text/babel"> var Hello=React.createClass({ render:function(){ return <h1>Hello, world!</h1> } }); ReactDOM.render(<Hello/>,document.getElementById('root')); </script></body></html>
這是沒有使用構建工具來使用react來編寫一個顯示Hello, world的程式，以下是我們使用react需要做的幾件事情：
1. 引入react.min.js，react-dom.min.js，babel.min.js這三個檔案，其中
1. react.min.js 是react的核心庫 2. react-dom.min.js 提供了與DOM相關的操作，比如插入組件到DOM的某一個節點中 3. babel.min.js用來編譯jsx和es6文法
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
2. 在模板檔案中，這裡是以上的html檔案，提供一個容器，來將內容插入到這個容器中
<div id="root"></div>
3. 編寫jsx代碼,這裡的script的type="text/babel"，指定使用babel來編譯jsx檔案，在這個jsx檔案中兩件事情： 1. 使用React.createClass來建立一個組件名為Hello 2. 使用ReactDOM.render來將Hello組件插入到節點id為root的div中
<script type="text/babel"> var Hello=React.createClass({ render:function(){ return <h1>Hello, world!</h1> } }); ReactDOM.render(<Hello/>,document.getElementById('root')); </script>
點此查看示範
原始碼github地址
文章參照 [ 菜鳥教程-react ]
文章參照 [ 阮一峰老師-react ]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
