1. JSX

　　JSX是yi一种拥有描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。

1.1 基本语法

　　JSX可以嵌套多个HTML标签，可以使用大部分符号HTML规范的属性。

　　TodoList.js：

import React, { Component } from 'react'

class TodoList extends Component {
    render(){
        return (
            <ul>
                <li>To Do</li>
                <li>In Progress</li>
                <li>Done</li>
            </ul>
        );
    }
}

export default TodoList;

　　index.js：

import React from 'react';
import ReactDOM from 'react-dom';

import TodoList from './components/TodoList'

ReactDOM.render(<TodoList />, document.getElementById('root'));

　　index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

　　JSX中的HTML标签属性绝大多数与HTML规范一致，但是class和for这两个属性在JSX中需要写为className何htmlFor。

　　class和for是JavaScript中的保留字。

1.2 标签类型

　　在JSX语法中，使用的标签类型有两种：DOM类型标签和React组件类型标签。

　　使用DOM类型标签时，标签的首字母必须小写。

　　使用React类型标签时，组件名称的首字母必须大写。

　　React通过首字母的大小写判断渲染的是DOM类型标签，还是React组件类型标签。

// DOM类型标签
const element = <h1>Hello World</h1>;

// React组件类型标签
const element =  <TodoList />;

// 嵌套使用
const element = {
    <div>
        <TodoList />
    </div>
}

1.3 JavaScript表达式

　　在JSX中使用JavaScript表达式需要将表达式用大括号 {} 包括起来。

　　在JSX中使用表达式的两个场景：（1）通过表达式给标签属性赋值（2）通过表达式定义组件。

　　JavaScript表达式要求必须有返回值，因此无法直接使用if else语句，可以使用三元操作表达式、||、&&。

import React, { Component } from 'react'

class TodoList extends Component {
    render() {
        const todos = ['To Do', 'In Progress', 'Done'];

        return ( 
            <ul>
            {
                todos.map((item, index) =>
                    <li key = { index }> { item } </li>
                )
            } 
            </ul>
        );
    }
}

export default TodoList;

1.4 标签属性

　　（1）当JSX标签属性是DOM类型的标签时，JSX支持对于DOM标签的属性。

　　JSX中的内联样式通过style属性来定义，但属性值必须为对象，且对象中的属性名需要使用camelCase（驼峰命名法）。

　　例：font-size改为fontSize。

import React, { Component } from 'react'

class TodoList extends Component {
    render() {
        const todos = ['To Do', 'In Progress', 'Done'];

        return ( 
            <ul style={{color: 'red', fontSize: '14px'}}>
            {
                todos.map((item, index) =>
                    <li key = { index }> { item } </li>
                )
            } 
            </ul>
        );
    }
}

export default TodoList;

　　（2）当JSX标签是React组件类型时，可以任意自定义标签的属性名。

　　HelloWorld.js

import React, { Component } from "react"

class HelloWorld extends Component {
    render() {
        return ( 
            <div> Hello { this.props.name }! </div>
        );
    }
}

export default HelloWorld;

　　index.js：

import React from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './components/HelloWorld'

ReactDOM.render(<HelloWorld name='World' />, document.getElementById('root'));

1.5 注释

　　JSX中，在标签子节点内的注释写在{}中。

import React, { Component } from 'react'

class TodoList extends Component {
    render() {
        const todos = ['To Do', 'In Progress', 'Done'];

        return ( 
            <ul style={{color: 'red', fontSize: '14px'}}>
            {/* 注释 */}
            {
                todos.map((item, index) =>
                    <li key = { index }> { item } </li>
                )
            } 
            </ul>
        );
    }
}

export default TodoList;

　　JSX语法只是 React.createElement(component, props, ...children)的语法糖，所有的JSX语法最终都会被转换成该方法调用。

　　在项目智勇首选使用JSX语法。

React笔记：React基础（2）