要求： 熟悉主流的開發框架（React,Augular,Vue至少一個）。
React可以直接下載使用，https://reactjs.org/
也可以直接使用 BootCDN的React CDN庫，地址如下：
<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>
React 實例：
<!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="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
實例解析：
我們引入了三個庫： react.min.js, react-dom.min.js和babel.min.js;
react.min.js -React的核心庫。
react-dom.min.js -提供與DOM相關的功能。
babel.min.js -Babel可以將ES6代碼轉爲 ES5代碼，這樣我們就能在目前不支持ES6瀏覽器上執行 React代碼。Babel內嵌了對JSX的支持。通過將Babel和 babel-sublime包一同使用可以讓源碼
的語法渲染上升到一個全新的水平。
ReactDom.render(
<h1> Hello,world! </h1>,
document.getElementById('example')
);
以上代碼將換一個h1標題，插入id = "example"節點中。
注意：
如果我們需要使用JSX,則<script>標籤的type屬性需要設置爲text/babel.
學習前端框架React －begining
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章