react 入門（一）
阿新 • • 發佈：2017-11-05
需要 三個參數 create 直接 rip containe pan 參數 渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic Example</title> <!-- react.js是react的核心庫--> <script src="./build/react.js" charset="utf-8"></script> <!-- react-dom.js提供與dom有關的功能--> <scriptsrc="./build/react-dom.js" charset="utf-8"></script> <!-- browser.min.js將JSX語法轉換成javascript語法，然後才能在瀏覽器上執行--> <script src="./build/browser.min.js" charset="utf-8"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>--> </head> <body> <!-- react渲染的模板內容會插入到這個DOM節點中，作為一個容器--> <div id="container"> </div> </body> <!-- 在react開發中，使用JSX，跟JavaScript語法不兼容，在使用JSX的地方，藥設置type="text/babel"--> <!-- babel轉換編譯器，ES6轉換成可以在瀏覽器中運行的代碼--> <script type="text/babel"> /*此處編輯react代碼*/ /* 001.渲染一行標題 ReactDOM.render() React的最基本方法，用於將模板轉換成html語言，渲染DOM，並插入到相應的DOM節點中 3個參數 第一個參數：模板的渲染內容 第二個參數：這段模板需要插入的DOM節點 一般是ID為container的div節點 第三個參數：渲染後的回饋 一般不用 */ /* ReactDOM.render( <h1>basic react native</h1>, document.getElementById("container") ); */ /* 002.JSX語法（語法糖） 第一：JSX必須借助React環境運行 第二：JSX標簽騎士就是HTML標簽，只不過我們在JavaScript中書寫這些標簽的時候，不使用""括起來，可以像XML一樣書寫 第三：JSX語法能夠更直觀看到DOM結構，不能直接在瀏覽器上運行，需要轉換成JavaScript代碼才能執行 第四：如何在JSX中運行JavaScript代碼——使用{}括起來 {表達式} */ /*JSX語法 ReactDOM.render( <h1>basic react native</h1>, document.getElementById("container") ); */ /*轉換成JavaScript代碼 註意：React.createElement("h1",null,"basic react native"),三參數分別是標簽、屬性、內容 ReactDOM.render( React.createElement("h1",null,"basic react native"), document.getElementById("container") ); */ /*在JSX中運行JavaScript代碼——用{}括起來 var text = "basic react native 變量"; ReactDOM.render( <h1>{text}</h1>, document.getElementById("container") ); */ </script> </html>
react 入門（一）