react（一）

react主流的开发方式

ES6编写
react-router路由组件
react-redux状态管理
npm开发包管理 环境配置
babel将react转译成JavaScript调试

nodejs构建官方开发、调试环境

cnpm install create-react-app -g // 安装React构建工具到全局

create-react-app demo // 构建demo的开发环境

cd demo && npm start  // 进入文件夹 用npm命令行运行

localhost:3000 // chrome中运行

react调试插件安装

React Developer Tools安装React Developer Tools之后 可以在谷歌里面快捷查看React组件，
state、props、context是React开发必备神器
步骤:
1.下载 react-developer-tools.crx
2.打开chrome://extensions
3.将crx文件拖到chrome中
4.OK

react中的component提供继承

class Component {
    setState(newState){
        this.state = {
            ...this.state,
            ...newState
        }
    }
}
// 继承component方法
class Home extends Component {
    constructor(){
        super()
    }
}

react书写组件

1.以类的方式 在同一个js文件里面 App.js

import React, {Component} from 'react'
class Nav extends Component {
    constructor() {
        super()
    }
    render() {
        return (
            <div class={{color: "#fff", backgroundColor: "#000"}}>NavBar</div>
        )
    }
}

class App extends React.Component {
    constructor() {
        super()
    }
    render() {
        return (
            <Nav />
        )
    }
}

// 继承了component 可以实现很多的属性和方法

2.函数方式

const Button = () => {
    return (
        <button type="button">函数button组件</button>
    )
}

class App extends React.Component{
    ......
    render() {
        return (
            <Button />
        )
    }
}
// 仅仅只有一个渲染功能 别的干不了

3.将组件提取到其它文件中 component/Button.js

import React, {Component} from 'React'  // Component = React.Component
class Button extends Component {
    constructor() {
        super()
    }
    render() {
        return (
            <Button type="button">Button.js的按钮组件</Button>
        )
    }
}

export default Button

App.js

import Button from './component/Button'
class App extends React.Component {
    ......
    render () {
        return (
            <Button />
        )
    }
}