摘要：配置做的小例子根據(jù)昨天的配置我們繼續(xù)往下做，我們在做一個(gè)小例子，首先還是要接著昨天的繼續(xù)往下配置安裝完之后要下載編譯并壓縮后的和字體文件。

根據(jù)昨天的配置我們繼續(xù)往下做，我們在做一個(gè)小例子，首先還是要接著昨天的繼續(xù)往下配置

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" }
      ]
    }
}

都配置完之后接下來就做我們小例子的內(nèi)容吧

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}
                

                

                    

                        
內(nèi)容
                        
時(shí)間
                        
狀態(tài)
                        
操作
                    
                
                

                
            
          


        );
    }
}

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里的代碼沒有變動，和昨天的都是一樣

都完成之后就來看一下我們的結(jié)果，當(dāng)點(diǎn)擊添加的時(shí)候回添加上信息，直接按Enter也會添加消息，當(dāng)點(diǎn)擊刪除就會刪除已在的消息，點(diǎn)擊完成的時(shí)候未完成的信息就會顯示成完成