【React (二)、简单的认识JSX】

---

前言

例如：在使用create-react-app创建脚手架项目前，首先你得先具备React的基础知识，我们先来认识JSX。

---

一、JSX是什么？

我们先引入一个简单的示例：

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

这种是JXS的写法，它拥有HTML的模板写法又具有Js的语法，是JavaScript的扩展语法。

并且React推荐我们配合使用JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

JSX能够很好的把渲染逻辑和ui逻辑进行耦合，在我们在ui中绑定事件，在某些时刻触发事件改变数据状态，会通知到ui，ui会展示准备好的数据。

二、JSX的嵌入表达

	const name = 'jack';
	const element = <h1>Hello, {name}</h1>;

可以看到名字name可以插入到大括号中

方法也是可以在大括号中

	function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

三、JSX表达式

浏览器是不认识JSX的我们是将JSX编译成普通的JavaScript对象才交给浏览器。
JSX的表达式也是如此：

	function getGreeting(user) {
	  if (user) {
	    return <h1>Hello, {formatName(user)}!</h1>;
	  }
	  return <h1>Hello, Stranger.</h1>;
	}

四、JSX指定属性

首先普通的属性指通过【字符串方式】简单声明。

然后是通过JSX的语法使用【大括号】声明。

注意

1.使用大括号的时候不要在外面使用引号。

2.并且在ReactDom中属性的名称是使用小驼峰来命名。

3.需要使用内联样式的时候需要用style={{backgroundColor:red}}的形式。

4.类名的指定不在class，而是className。

5.一个跟标签，标签自闭合。

6.标签首字母大写为组件标签，小写为HTML标签。

五、JSX的优点

能够防止XSS攻击，它会将React DOM在渲染输入的内容之前进行转义。

---