Time: 20190717

组件：能够完成特定功能的、独立的、可重用的组件。

组件是React的核心思想，通过组件来开发应用。

将大的应用拆分成若干小的组件，每个组件只需要关注某个小范围的特定功能。

通过create-react-app构建出来的项目，我们只需要关注src目录下的文件即可。

项目的入口文件是：index.js,初始情况下：

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

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

只渲染了一个组件App，这是从App.js中导出的。

App.js内容如下：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

这是用function并结合return来生成的组件，我们用class结合extends Component的方式生成一个组件：

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>
                Click Count: {this.state.count}
            </div>
        )
    }
}

export default ClickCounter;

在index.js中使用此组件：

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

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

END.