<!-- 1.核心文件 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <!-- 2.操作的DOM --> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 3.翻译器 将浏览器不识别的JS（es7，es8）语法转化为识别的es5 JSX语法 翻译成浏览器识别的语法 --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script><body> <!-- react布局容器 --> <div id="app"> </div> <script type="text/babel"> // render(布局，容器) ReactDOM.render(<h1>hello world !</h1>, //在哪个容器中使用 document.querySelector("#app") ) </script></body>这样，hello world !就会显示在页面上啦！
script中的type一定要写type=”text/babel“
<body> <div id="app2">乌拉</div> <script type="text/babel"> ReactDOM.render( <div><h1>新闻标题</h1> <p>乌克兰的总统是个好演员</p> <hr/>{ //单表签一定要加"/",不然直接报错 //JSX语法中< </ 识别为html解析的开始和结束 } <p>注释{ // 这样写单行注释 // JSX{}识别为JS // 单括号语法 里面可以写表达式 /* 段落注释 多行注释 */ } </p> </div>,app2) // 布局比较复杂的时候 用（）包起来 简洁 方便阅读 // react和vue2使用组件一样，必须有唯一的根元素，即有<div></div>包裹 // 在app2中有内容的情况下，内容会被覆盖掉 </script></body>上方3的代码越多，看起来越复杂，越紊乱，可以用变量将html接收一下
<body> <div id="app2">乌拉</div> <script type="text/babel"> //layout 虚拟Dom 一般把虚拟DOM 看作一个js对象(存储了布局的信息) let layout=( <div><h1>新闻标题</h1> <p>乌克兰的总统是个好演员</p> <hr/> <p>注释 </p> </div> ) ReactDOM.render(layout,app2) console.log("lauout:",layout) console.log("app2:",app2) </script></body>