create-react-app留言板

搭建环境

• 创建package.json文件

npm init -y

• 安装create-react-app

npm install -g create-react-app

• 使用命令创建myapp目录

create-react-app myapp

• 进入myapp目录

cd myapp

• 运行

npm start

它会自动跳转到页面：

• 安装loder

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

修改项目

• 删除不需要的项目

• 修改完以后的项目目录

  

编写程序

因为我们这里会用到Bootstarp，所以我们需要先下载一个样式库；

• 下载Bootstarp样式库

官网网址：http://v3.bootcss.com/getting-started/#download直接在浏览器打开就可以，打开以后会出现以下页面，点击第一个，下载Bootstrap就可以；

• 创建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;
    

• 创建webpack.config.js文件

module.exports = {  entry: './index.js',  output: {    path:path.resolve(__dirname,"build"),    publicPath:"/assets/",    filename: 'bundle.js'  },  module: {      rules: [    { test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },    { test: /\.css$/, exclude: /node_modules/, loader: "style-loader!css-loader" },    { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },  //添加    { test: /\.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000" }, //添加    { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" }, //添加    { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" } //添加      ]    } }

• 输入命令，运行页面

npm start

现在我们的页面就完成了，现在的目录：

运行页面

• 接下来就让我们看看效果吧！