<!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有关的功能--> <script src="./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>