JSX语法

1. 在 JSX 中使用表达式

1. 表达式要包含在大括号里。
2. 书写 JSX 带上换行和缩进,增强代码的可读性
3. JSX 代码的外面扩上一个小括号，这样可以防止 分号自动插入 的 bug。
4. 可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以：

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

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

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

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

5，文档引入以下是三个文件

    // react 库
    <script src="https://cdn.bootcss.com/react/16.9.0-alpha.0/umd/react.development.js"></script>
    // DOM渲染
    <script src="https://cdn.bootcss.com/react-dom/16.9.0-alpha.0/umd/react-dom.development.js"></script>
    // Babel 语法解析 jsx
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

2.JSX 属性

1. react DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

案例

class 变成了 className，而 tabindex 则对应着 tabIndex。

2. 引号来定义以字符串为值的属性

const element = <div tabIndex="0"></div>;

3.== 大括号==来定义以 JavaScript 表达式为值的属性

const red = {
    color:'red'
}
const element = (
  <h1 className={red.color}>
    Hello, {formatName(user)}!
  </h1>
);

3.JSX 嵌套

1. JSX 标签是闭合式的，那么你需要在结尾处用 />
2. JSX 标签同样可以相互嵌套

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
    <img src={user.avatarUrl} />
  </div>
);

4.SX 防注入攻击

你可以放心地在 JSX 当中使用用户输入：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。

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

//1. 转化为

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

//2. React.createElement() 首先会进行一些避免bug的检查，返回类似于下面的对象
// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};