手把手教你react写个加法计算器

1.安装环境 下载vscode nodejs，装reactor框架包，在node安装目录下运行命令 npm install create-react-app，具体可百度下
2.新建文件夹叫simple_add，执行指令如下：npx create-react-app my_app，这个需要等待一段时间

在 my_app文件夹运行npm start , react图标就出现了

3 写个hello world,把src里的文件全部删掉，新建App.js,index.jsh

index.js文件写入：

import React from 'react'
import ReactDOM from 'react-dom'
//引入了一个APP组件，目前这个组件还是没有的，需要一会建立
import App from './App'
//然后用React的语法把APP模块渲染到了root ID上面.这个rootID是在public\index.html文件中的
ReactDOM.render(<App />,document.getElementById('root'))

App.js文件写入：

import React from 'react'
const Component = React.Component
class App extends Component{
    render(){
        return(           
            <div>
                hello world
            </div>              
           
        )
    }
}
export default App

结果如下：
4 做个加法计算器，先是做个界面
App.js文件如下：

import React, { Fragment } from 'react'
const Component = React.Component
class App extends Component{
    render(){
        return(
            <Fragment>
            <div>
                <input/>
                +<input/>
                =<input/>
            </div> 
            <div>
                <button>加法计算</button>
            </div> 

            </Fragment>           
                       
           
        )
    }
}
export default App

界面如下：

5 添加变量，绑定数据


6绑定事件 事件1输入框可以输入字符 事件2 按钮可以计算
最终App.js代码如下：

import React, { Fragment } from 'react'
const Component = React.Component
class App extends Component{
    //构造函数
    constructor(props){
        //
        super(props)
        this.state = {
            //定义变量 这是数据            
            number1:0,
            number2:0,
            sum:0,
        }
    }
    render(){
        return(
            <Fragment>
            <div>
                <input value = {this.state.number1} onChange = {this.inputchange_num1.bind(this)}/>
                +<input value = {this.state.number2} onChange = {this.inputchange_num2.bind(this)}/>
                =<input value = {this.state.sum}/>
            </div> 
            <div>
                <button onClick={this.add2.bind(this)}>加法计算</button>
            </div> 

            </Fragment>     
          
        )     
    }
    inputchange_num1(e){
        this.setState({
            number1: e.target.value
        })           
    }
    inputchange_num2(e){
        this.setState({
            number2: e.target.value
        })           
    }
    add2(){
        var a = parseFloat(this.state.number1) 
        var b = parseFloat(this.state.number2)
        var c = a+b
        this.setState({
            sum: c
        })           
    }
}
export default App

运行如下：