React学习记录1.2——JSX

JSX语法规则

这里先说几条基本的，有些细节部分会穿插在示例中。

jsx必须依赖react环境
不使用双引号
在jsx中运行js代码 <h1>{javascript code}</h1>

组件

类名必须以大写字母开头，驼峰命名
使用React.createClass()方法来创建
每个组件类必须实现自己的 render方法，返回值true false 或组件模板
组件类只能包含一个顶层标签

JSX语法示例——hello world

<body>
		<div id="main_0"></div>
		<div id="main_1"></div>
		<script type="text/babel">
			let Main0 = React.createClass({
				render:() => {
					return <h1>Hellow World</h1>
				}
			});
			
			let Main1 = React.createClass({
				render:() => {
					return (
						<h2>I am</h2><br/>
						<p>react</p>
					)
				}
			});
			
			ReactDOM.render(
				<Main0/>,
				document.getElementById('main_0')
			)
			ReactDOM.render(
				<Main1/>,
				document.getElementById('main_1')
			)
		</script>
	</body>

注：1、在render函数中，如果写多行的虚拟dom，并且第一行没有写标签，那么内容要写在小括号（）中。如下注释
2、在这里的组件Main1中，浏览器会报错，Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag
这是因为多行代码的外面需要包裹整个的一个容器，正确的代码如下：

let Main1 = React.createClass({
				render:() => {
					return (
						<div>
							<h2>I am</h2><br/>
							<p>react</p>
						</div>
					)
					/* 这样写也是对的
					return <div>
						
							<h2>I am</h2><br/>
							<p>react</p>
						</div>
					*/
				}
			});

来源：CSDN

作者：_王十四

链接：https://blog.csdn.net/sinat_30122989/article/details/103549983

标签

react

jsx