<!--React 核心模块-->
<script src="js/react.min.js"></script>
<!--操作DOM模块-->
<script src="js/react-dom.min.js"></script>
<!--加载 babel 环境的模块-->
<script src="js/browser.min.js"></script>
毕竟 JSX 不是 JS 所有浏览器不能直接使用 需要把JSX编译成JS才能供浏览器使用
* 编译:通过babel进行编译 可以把 ES6 和JSX编译成浏览器能够识别的JS
* 通过引入 browser.js 可以布置该babel环境
<script type="text/babel">
//babel 环境 要把 type类型该成 text/babel 设置 babel 环境然后 JSX代码才能被转化
</script>
ReactDOM.render(<h1>Hello,JSX</h1>,wrap);
ReactDOM.render(
<div>
<h1>Hello,JSX</h1>
<p>1234567890</p>
</div>,
wrap
);
render 的第一个参数 只能有一个根节点 ,wrap是body中的一个div
JSX 会检索 <></> 然后在底层自动调用 React.createElement 生成对应的 React节点
同时也会检索 {} 然后使用js语法解析
{} 大括号中只能写一句js代码 一句按我的理解就是 对一个元素进行的操作(支持链式操作),一个函数,一个分支语句;
不可以放对象 但是能放对象的属性值
//遍历数组可以用 map 方法 v 是当前元素 k是下标
var arr = ["隐形的翅膀","卡路里","青山依旧"];
ReactDOM.render(
<div>
{arr.map(function(v,k){
return <li>{v}</li>
})}
</div>,
box
);
标签结合标签属性的使用
* 注意: for 和class 这两个标签属性 由于和React的关键字重名,因此 我们在 JSX语法中使用这两个属性时分别替换成
* htmlFor 和className;