React 基础小知识：JSX

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

JSX 简介

JSX（全称：JavaScript XML），React 定义的一种类似于 XML 的 JS 扩展语法：JS + XML，本质是 React.createElement(component, props, ...children) 方法的语法糖。

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

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

JSX 语法规则

• 定义虚拟 DOM 时不要写引号：var ele = <h1>Hello JSX</h1>。它不是字符串，也不是 HTML/XML 标签。它最终产生的就是一个 JS 对象。
• 标签中混入 JS 表达式时要用 {}：const element = <h1>Hello, {name}</h1>
• 样式的类名指定不要用 class，要用 className：return <div className="sidebar" />
• 内联样式要用 style={{key: value}} 的形式去写
• 只有一个根标签
• 标签必须闭合
• 标签首字母：
  • 若小写字母开头，则将该标签转为 HTML 中同名元素，若 HTML 中无该标签对应的同名元素，则报错。return <div>Hello {props.toWhat}</div>;
  • 若大写字母开头，React 就去渲染对应的组件，若组件没有定义，则报错。return <Hello toWhat="World" />;

JSX 练习

区分JS语句代码和JS表达式：

• JS 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
  • a
  • a+b
  • demo(1)
  • arr.map()
  • function test() {}
• JS 语句/代码：
  • if(){}
  • for(){}
  • switch(){case:xxxx}