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

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

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也會添加消息，當點擊刪除就會刪除已在的消息，點擊完成的時候未完成的信息就會顯示成完成