React[2]

[HuangHongRui]

新增一新的React组件

React 的首要思想是通过 组件 来开发应用。

组件指的是能完成某个特定功能的独立的&可重用的代码

React 非常适合构建用户交互组件。

目录src中，入口文件是： index.js

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

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

该应用所做的事情， 渲染名为 App 的组件 [同目录下App.js].

现在尝试定义一个新的组件。名为ClickCounter，修改结果如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './ClickCounter'; //导入组件
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<ClickCounter />, //渲染组件
document.getElementById('root'));
registerServiceWorker();

然后需要在目录src下，新增该组件的代码文件ClickCounter.js..Code如下

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>
                    count : {this.state.count}
                </div>
            </div>
        )
    }
}
export default ClickCounter

操作过程，网页自动刷新改变，目前点击按钮，数字会随着增加【成功构建一个有交互性的组件】