React基础--JSX

React使用JSX来代替常规的Javascript。JSX是一种看起来很像XML的JavaScript的语法扩展，JSX是在JavaScript内部实现的。
元素是构成React应用的最小单位，JSX就是用来声明React当中的元素。
一、JSX语法规则

1. 定义虚拟DOM，不能使用“”
   两种创建虚拟DOM的方式
   (1) 使用JSX创建虚拟DOM

const element = <h1>Hello, world!</h1>

(2) 使用JS创建虚拟DOM

//创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容)
const element = React.createElement('h1',{id:"title"},"Hello, world!")

2. 标签中混入JS表达式的时候使用{}

const name = 'world'
const element = <h1>Hello, {name}!</h1>

3. 样式的类名指定不要使用class，使用className

 <span className = "sss" style = {{fontSize:'50px'}}>sss</span>

4. 内联样式要使用双大括号包裹
   样式css要写成驼峰形式，例如：fontSize:‘20px’，backgroundColor:‘#fff’，textAlign:‘center’；

（来自react官网）
5. 不能有多个跟标签，只能有一个跟标签
没有具体的html标签时，要包裹在jsx标签内，<></>
6. 标签必须闭合
7. 如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错；如果是大写字母开头，react就去渲染对应的组件，如果没有就报错

二、 JSX表示对象

Babel会把JSX转译成一个名为React.createElement()函数调用。
以下两种示例代码完全等效：

const element = (
	<h1 className="greeting">
		hello,world!
	</h1>
);

const element = React.createElement(
	'h1',
	{className: 'greeting'},
	'hello,world!'
);

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象:

// 注意：这是简化过的结构
const element = {
	type:'h1',
	props:{
		className: 'greeting',
		children:'hello,world!',
	}
};

这些对象被称为 “React 元素”。它们描述了希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

参考链接：
react官网-jsx
超详细的新手React入门教程