React JSX语法

<!--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;