小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
-
如要要使用 JSX 语法，必须先运行
cnpm i babel-preset-react -D，然后再.babelrc中添加 语法配置； -
如果你采用的是create-react-app 脚手架的形式来创建的项目，那么不需要1.的步骤
-
JSX语法的本质：还是以 React.createElement 的形式来实现的，并没有直接把 用户写的 HTML代码，渲染到页面上；
-
如果要在 JSX 语法内部，书写 JS 代码了，那么，所有的JS代码，必须写到 {} 内部；
let title = 'this is a title'; let mydiv = <div> 这是使用功jsx语法创建的div元素 <h1 title={title}>这是一个h1</h1> </div> -
当 编译引擎，在编译JSX代码的时候，如果遇到了
<那么就把它当作 HTML代码去编译，如果遇到了{}就把 花括号内部的代码当作 普通JS代码去编译； -
在{}内部，可以写任何符合JS规范的代码；
-
在JSX中，如果要为元素添加
class属性了，那么，必须写成className，因为class在ES6中是一个关键字；和class类似，label标签的for属性需要替换为htmlFor. -
在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
-
如果要写注释了，注释必须放到 {} 内部
React中：第一种创建组件的方式
第一种基本组件的创建方式
// 在react中，构造函数，就是一个最基本的组件
// 如果想要把组件放到页面中，可以把构造函数的名字，当做组件的名称，以html标签的形式引入页面中。
// 注意：react在解析所有的标签的时候，是以标签的首字母来区分的，
// 如果首字母是小写的，那么就是按照普通的html标签来解析的。
// 如果首字母是大写的，那么就按照组件的形式去解析。
// 组件的首字母必须是大写
function hello(){
return <div>
<h1>这是在Hello组件中定义的元素</h1>
</div>
}
父组件向子组件传递数据
let obj = {
name:'lisi',
age:20,
job:'xuesheng'
}
function Hello(props){
//在组件中，如果想要使用功外部传递过来 的数据，必须显示的在构造函数参数列表中，定义props属性来接收
//通过props得到的数据都是只读的，不能修改
// props.name = 'aaa';
return <div>
<h1>这是在Hello组件中定义的元素</h1>
<div>姓名：{props.name}</div>
<div>年龄：{props.age}</div>
<div>工作：{props.job}</div>
</div>
}
ReactDOM.render(
//展开运算符
<Hello {...obj}/>
,
document.getElementById('root')
);
将组件封装到单独的文件中
src
components
hello.js 组件
hello.js组件
import React from 'react';
function Hello(props){
return <div >
<h1>这是在Hello组件中定义的元素</h1>
<div>姓名：{props.name}</div>
<div>年龄：{props.age}</div>
<div>工作：{props.job}</div>
</div>
}
export default Hello;
index.js
import Hello from './components/hello.js'
