摘要：配置做的小例子根据昨天的配置我们继续往下做，我们在做一个小例子，首先还是要接着昨天的继续往下配置安装完之后要下载编译并压缩后的和字体文件。

根据昨天的配置我们继续往下做，我们在做一个小例子，首先还是要接着昨天的继续往下配置

npm i bootstrap url url-loader style-loader css-loader --save

安装完之后要下载bootstrap编译并压缩后的 CSS、JavaScript和字体文件。不包含文档和源码文件。然后配置在自己的app.js文件下

import React from "react";
import ReactDOM from "react-dom";
import TodoApp from "./components/TodoApp";

import "./css/bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(,document.getElementById("app")); 

都配置完之后再接着在webpack.config.js里面添加语句

var path = require("path");
module.exports = {
  //devtool:"source-map",
  entry: "./app.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" }
      ]
    }
}

都配置完之后接下来就做我们小例子的内容吧

TodoApp.js

import React from "react";

import TodoList from "./TodoList";
import TodoForm from "./TodoForm";

class TodoApp 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);
        this.okItem=this.okItem.bind(this);



    }
    okItem(id){
        this.state.todos.map(item=>{
            if(item.id==id){
                 item.done=1;
            }
            return item;
        });
        this.setState({
            todos:this.state.todos
        });
    }
    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 (
            


                

                

                

                

                

                    

                            
ToDo 你要做什么？
                            

                    
                    

                           
                             
                             
                    
                
 
            
          
        );
    }
}

export default TodoApp;

TodoList.js

import React from "react";

import TodoItem from "./TodoItem";
class TodoList extends React.Component{
    render(){
        let todos=this.props.data;
       
        let todoItems=todos.map(item=>{
            return 
        });


        return (
            
                    {todoItems}
                

                

                    

                        
内容
                        
时间
                        
状态
                        
操作
                    
                
                

                
            
          


        );
    }
}

export default TodoList;

TodoItem.js

import React from "react";


class TodoItem extends React.Component{

    delete(){
        this.props.deleteItem(this.props.data.id);
    }
    complete(){
       console.log(this);
        this.props.okItem(this.props.data.id);
    }
    render(){


        let {text,time,done,id}=this.props.data;

        return (
           
               {text}
               {time}
               {done==0?"未完成":"完成"}
               
                   删除
                   
                            完成
                   
                
           


        );
    }
}

export default TodoItem;

TodoForm.js

import React from "react";


class TodoForm 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 TodoForm;

都写完之后就可以看看我们的index.html，html里的代码没有变动，和昨天的都是一样

都完成之后就来看一下我们的结果，当点击添加的时候回添加上信息，直接按Enter也会添加消息，当点击删除就会删除已在的消息，点击完成的时候未完成的信息就会显示成完成