1.2 增加一個新的React組件

React的首要思想是通過組件（Component）來開發應用。所謂組件，簡單說，指的是能完成某個特定功能的獨立的、可重用的代碼。

基于組件的應用開發是廣泛使用的軟件開發模式，用分而治之的方法，把一個大的應用分解成若干小的組件，每個組件只關注于某個小范圍的特定功能，但是把組件組合起來，就能夠構成一個功能龐大的應用。如果分解功能的過程足夠巧妙，那么每個組件可以在不同場景下重用，那樣不光可以構建龐大的應用，還可以構建出靈活的應用。打個比方，每個組件是一塊磚，而一個應用是一座樓，想要一次鍛造就創建一座樓是不現實的。實際上，總是先鍛造很多磚，通過排列組合這些磚，才能構建偉大的建筑。

React非常適合構建用戶交互組件，讓我們從創建一個React組件開始。

學習任何一門語言或者任何一門框架，往往是從寫Hello World程序開始，不過只是展示一句Hello World并不足以體現React的神奇能力，所以，我們要做一個不那么簡單的組件，為了體現React對交互功能的支持，我們做一個顯示點擊次數的組件。

我們先看一看create-react-app給我們自動產生的代碼，在first-react-app目錄下包含如下文件和目錄：

src/
public/
README.md

package.json

node_modules/

在開發過程中，我們主要關注src目錄中的內容，這個目錄中是所有的源代碼。

create-react-app所創建的應用的入口是src/index.js文件，我們看看中間的內容，代碼如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

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

這個應用所做的事情，只是渲染一個名叫App的組件，App組件在同目錄下的App. js文件中定義，渲染出來的效果就是在圖1-1中看到的界面。

我們要定義一個新的能夠計算點擊數組件，名叫ClickCounter，所以我們修改index. js文件如下：

import React from 'react';
import ReactDOM from 'react-dom';
import ClickCounter from './ClickCounter';
import './index.css';

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

我們接下來會介紹代碼的含義。現在我們先來看看如何添加一個新組件，在src目錄下增加一個新的代碼文件ClickCounter.js，代碼如下：

import React, { Component } from 'react';
class ClickCounter extends Component {

  constructor(props) {
    super(props);
    this.onClickButton = this.onClickButton.bind(this);
    this.state = {count: 0};
  }

  onClickButton() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return (
      <div>
        <button onClick={this.onClickButton}>Click Me</button>
        <div>
        Click Count: {this.state.count}
        </div>
      </div>
    );
  }
}
export default ClickCounter;

如果你是從上一節不停頓直接讀到這一節，而且沒有關閉命令行中的npm start命令，當你保存完這個文件之后，不需要主動做刷新網頁的動作，就會發現網頁中的內容已經發生改變，如圖1-2所示。

去點擊那個“Click Me”按鈕，可以看到“Click Count”后面的數字會隨之增加，每點擊一次加一。

恭喜你，現在你已經構建了一個有交互性的組件！

現在讓我們來逐步詳細解釋代碼中各部分的要義。

在index.js文件中，使用import導入了ClickCounter組件，代替了之前的App組件。

import ClickCounter from './ClickCounter';

import是ES6（EcmaScript 6）語法中導入文件模塊的方式，ES6語法是一個大集合，大部分功能都被最新瀏覽器支持。不過這個import方法卻不在廣泛支持之列，這沒有關系，ES6語法的JavaScript代碼會被webpack和babel轉譯成所有瀏覽器都支持的ES5語法，而這一切都無需開發人員做配置，create-react-app已經替我們完成了這些工作。

在ClickCounter.js文件的第一行，我們從react庫中引入了React和Component，如下所示：

import React, { Component } from 'react';

Component作為所有組件的基類，提供了很多組件共有的功能，下面這行代碼，使用的是ES6語法來創建一個叫ClickCounter的組件類，ClickCounter的父類就是Component：

class ClickCounter extends Component {

在React出現之初，使用的是React.createClass方式來創造組件類，這種方法已經被廢棄了，但是在互聯網上依然存在大量的文章基于React.createClass來講解React，這些文章中依然有很多真知灼見的部分，但是讀者要意識到，使用React.createClass是一種過時的方法。在本書中，我們只使用ES6的語法來構建組件類。

細心的讀者會發現，雖然我們導入的Component類在ClickCounter組件定義中使用了，可是導入的React卻沒有被使用，難道在這里引入React沒有必要嗎？

事實上，引入React非常必要，你可以嘗試刪掉第一行中的React，在網頁中立刻會出現錯誤信息，如圖1-3所示。

這個錯誤信息的含義是：“在使用JSX的范圍內必須要有React。”

也就是說，在使用JSX的代碼文件中，即使代碼中并沒有直接使用React，也一定要導入這個React，這是因為JSX最終會被轉譯成依賴于React的表達式。

接下來，我們就要認識什么是JSX。