create-react-app做的留言板

先看一下我们的留言板，然后在去实现功能

做留言板首先要配置好我们的文件，然后才能接着做我们的留言板

快速开始：

npm install -g create-react-app       /* 安装create-react-app，建议使用cnpm */create-react-app myapp                 /* 使用命令创建应用，myapp为项目名称 */cd myapp                                        /* 进入目录，然后启动 */npm start

接下来看看我们的代码吧

index.html

index.js

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

LiuApp.js

import React from 'react';import LiuList from './LiuList';import LiuForm from './LiuForm';class LiuApp 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 LiuApp;

LiuList.js

import React from 'react';import LiuItem from './LiuItem';class LiuList extends React.Component{    render(){        let todos=this.props.data;               let todoItems=todos.map(item=>{            return 
    
             });                return (            
     
                           {todoItems}                
                      
                           
                                
留言板
                           
                      
                      
      
                                 
                  );    }}export default LiuList;
    

LiuForm.js

import React from 'react';class LiuForm 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 LiuForm;

LiuItem.js

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

以上就是多有的代码，现在看看我们最终的结果