第一节：React简介

该篇是该专栏的第一节，主要参考官网采用更简单易懂的方式来介绍React。

什么是React？

React是一个声明式的、高效的、并且灵活的用于构建用户界面的javaScript库。它允许使用components(组件)小而巧的js代码片段来组合出复杂的UI。
从官网上来看，React是一个js库，并不是框架，通过编写js函数和class类来生成对用的DOM元素。我们常说的React框架是React和react-router、react-redux的组合。

下面是官网的完整代码示例：

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

// ======================================== 
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);

通过官网的示例，我们可以理解到哪些基本功能呢？

• 类组件（component）

class ShoppingList extends React.Component {
	render(){
		return (
	      <div className="shopping-list">
	        <h1>Shopping List for {this.props.name}</h1>
	        <ul>
	          <li>Instagram</li>
	          <li>WhatsApp</li>
	          <li>Oculus</li>
	        </ul>
     	 </div>
		) 
	}
}

1. ShoppingList是一个React组件类，组件接受参数，称之为props属性，并通过render方法返回一个要渲染的html内容。而这种js返回html内容的语法，名叫jsx；

• 文本插值

和vue不同，React的文本插值，是通过单大括号方式

<div> {status} </div>

• className

和传统html不同，传统的html是通过class="active"来定义元素的类名，而React是通过className="active"来定义元素的类名`

渐进式框架

React同样也是渐进式的，具备灵活性和”可以逐步集成“的特点。可以在不同的方式使用React，我这边了解到的有：

• 单页应用（SPA）
• 渐进式增强静态的html（CDN引入）
• Electron+React开发桌面端

第二节，主要学习下React核心概念：jsx, 了解jsx，才能明白，React作为一个js库，如何将js和UI结合在一起的。