React 入门 -- 配置 + 组件

从git clone项目

git clone 项目地址
npm install
npm run mork//模拟数据
npm start//开始

跟着阮一峰老师的教程走

react入门实例教程

入口：
/src/index.js

引用同级组件时：import PostItem from "../PostItem/PostItem"

prop和state传值的使用

prop – 只读，父子组件间传值

子组件获得父组件的值： const {title,author,date}=this.props;
父组件的写法：<PostItem title={item.title} author={item.author} date={item.date} />

state – 可变，修改state来实现组件状态的变化

class PostItem extends Component{
    constructor(props){
        super(props);//用于完成初始化
        this.state={
            vote:0
        };
    }

    //处理逻辑
    handleClick(){
        let vote=this.state.vote;
        vote++;
        //获取状态
        this.setState({
            vote:vote
        });
    }
    render (){
  		 //
    }
}

最后还需要提醒大家，只有类组件才具有生命周期方法，函数组件是没有生命周期方法的，因此永远不要在函数组件中使用生命周期方法。

组件样式

或者

return (
	<h1 style={{width:"100px"}}></h1>