作任何东西之前需要搭建环境

首先：安装create-react-app

npm install -g create-react-app

使用命令创建myapp目录

create-react-app myapp

下一步:进入目录命令

cd myapp

运行

npm start

它会自动跳转到浏览器

npm install sass-loader node-sass --save-dev

上面就是环境搭建

可以进去官网直接去下载

也可以参考博客

index.js

import React from 'react';import ReactDOM from 'react-dom';import LiuYanapp from './LiuYanapp';import './bootstrap/css/bootstrap.min.css';ReactDOM.render(
    ,document.getElementById("app"));

LiuYanapp.js

import React from 'react';import LiuYanList from './LiuYanList';import LiuYanForm from './LiuYanForm';class LiuYanapp extends React.Component{    constructor(props){        super(props);        this.ids=1;        this.state={                todos:[]        };                this.addItem=this.addItem.bind(this);        this.deleteItem=this.deleteItem.bind(this);    }    deleteItem(id){        let newtodos=this.state.todos.filter((item)=>{            return !(item.id==id)        });          this.setState({            todos:newtodos        });    }    addItem(value){       this.state.todos.unshift(            {                id:this.ids++,                text:value,                time:(new Date()).toLocaleString(),                done:0            }       )        this.setState({            todos:this.state.todos        });       }    render(){        return (            
    
                
     
                
     
                
     
                
     
                
     
                    
      
                                                     
       
                                                  
      
                    
      
                                                            
       
都来留言啊!!!
                             
                                    
                             
        
       
      
                
     
             
    
                 );    }}export default LiuYanapp;

LiuYanForm.js

import React from 'react';class LiuYanForm extends React.Component{   tijiao(event){        event.preventDefault();    }    add(event){                if(event.type=="keyup"&&event.keyCode!=13){            return false;        }        let txt=this.refs.txt.value;        if(txt=="") return false;               this.props.addItem(txt);        this.refs.txt.value="";    }    render(){        return(             
    
                
     
                    
      
                        
                           
      
                    
      
                      
       留言                    
      
                               
     
                       
    
        );    }}export default LiuYanForm;

LiuYanItem.js

import React from 'react';class LiuYanItem extends React.Component{    delete(){        this.props.deleteItem(this.props.data.id);    }    render(){        let {text,time,done,id}=this.props.data;        return (                          {text}                   
                   
               {time}                                                 删除留言                                   );    }}export default LiuYanItem;

LiuYanList.js

import React from 'react';import LiuYanItem from './LiuYanItem';class LiuYanList extends React.Component{    render(){        let todos=this.props.data;               let todoItems=todos.map(item=>{            return 
    
             });                return (            
     
                           {todoItems}                
                      
                           
                                
评论评论
                                                  
                      
                      
      
                               
        );    }}export default LiuYanList;