Webpack + React 开发 02 JSX 语法

 

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写；

render(<h1>Hello World</h1>, document.getElementById('helloworldDiv'));

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

var names = ['Alice', 'Emily', 'Kate'];

render(
  <div>
  {
    names.map( name => {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('helloworldDiv')
);

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员；

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
render(<div>{arr}</div>,  document.getElementById('helloworldDiv'));

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板；