React---(JSX简介)

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

这段代码就是JSX，是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

const name = '羅寛良';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

结果显示

在JSX语法中你可以在{}中写JS语法，例如2+2、user.firstName 或 formatName(user) 都是有效的 JS表达式。

在下面的示例中，将调用 JavaScript函数 formatName(user)的结果，并将结果嵌入到 <h1>元素中。

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

const user = {
  firstName: '羅寛良',
  lastName: '马化腾'
};

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

结果显示

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

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

也可以使用大括号写JS表达式

const element = <img src={user.avatarUrl}></img>;

警告：

要么用引号写字符串，要么用{}写JS表达式，不能对同一属性俩者都用！

const element = <img src={user.avatarUrl} />;

JSX可以写多个标签：

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

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

React在渲染内容之前，会对所有内容进行转义，都会变成字符串，这样就不会让恶意输入的值给攻击到，例如输入的是弹出框、或者关闭页面等恶意JS代码。有效的防止了XSS（cross-site-scripting, 跨站脚本）攻击。

XSS：跨站点脚本（XSS）是Web应用程序中常见的一种计算机安全 漏洞。XSS使攻击者能够将客户端脚本注入其他用户查看的网页中。攻击者可能会使用跨站点脚本漏洞绕过访问控制，例如同源策略。

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元素进行实时更新！