在菜鸟说的不是必须用jsx写，但是原生js咱也不知道怎么写。还是按主流来吧。
据说是运行快、编写快、安全。
PS:安全是因为在编译的过程中能发现错误，因为Babel文件能把ES6编译成ES5来运行，这里所谓的ES5和ES6其实就是js的现在版本和未来的版本，ES6已经发布了，据说是以后的发展趋势。
ReactDOM.render(
<div>
<h1>Hello, React!</h1>
<p>我在学习React</p>
</div>,
document.getElementById('demo')
);
这个就是jsx的格式也就是ES6的格式，在里面使用html标签，不再需要原生的创建标签，插入之类的操作，不用引号了。最后指定输入位置OK。
但是html代码块一样需要一个大的外层标签包裹起来。
错误的例子：
ReactDOM.render(
<h1>Hello, React!</h1>
<p>这个是错误的例子</p>,
document.getElementById('demo')
);
正确的写法：
ReactDOM.render(
<div>
<h1>Hello, React!</h1>
<p>我在学习React</p>
</div>,
document.getElementById('demo')
);
这个html外层包裹标签，一定要注意，我在这里就加了好半天才找到原因。没用心看，这个不大的坑让我自己敲的时候摔了好大一跤。
其实这样看起来确实编写很快，很方便哦！嘿嘿！！！
据说也可以跟我们之前一样把html和js文件分离。
创建一个js文件，然后html引入js。
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/babel" src="js/demo.js"></script>
<title></title>
</head>
<body>
<div id="demo"></div>
</body>
</html>
js:
ReactDOM.render(
<div>
<h1>Hello, React!</h1>
<p>我在学习React</p>
</div>,
document.getElementById('demo')
);
PS:引入的js文件是demo.js。请一定要注意引入的js文件的时候script的type="text/babel"一定要写，要不然不会显示了。
网友评论