webpack配置react做的小例子

webpack配置react做的小例子

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

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(<TodoApp/>,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 (
            <div className="container">

                <br/>
                <br/>
                <br/>
                <br/>
                <div className="panel panel-default">
                    <div className="panel-headingbg-danger">
                            <h1 className="text-center ">ToDo <small>你要做什么？</small></h1>
                            <hr/>
                    </div>
                    <div className="panel-body">
                           
                             <TodoForm addItem={this.addItem}/>
                             <TodoList  okItem={this.okItem} deleteItem={this.deleteItem} data={this.state.todos}/>
                    </div>
                </div> 
            </div>
          
        );
    }
}

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 <TodoItem okItem={this.props.okItem} deleteItem={this.props.deleteItem} key={item.id} data={item}/>
        });


        return (
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th>内容</th>
                        <th>时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {todoItems}
                </tbody>
                
            </table>
          


        );
    }
}

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 (
           <tr>
               <td>{text}</td>
               <td>{time}</td>
               <td>{done==0?"未完成":"完成"}</td>
               <td>
                   <a className="btn btn-primary" onClick={this.delete.bind(this)}>删除</a>
                   <a className="btn btn-success" onClick={this.complete.bind(this)}>
                            完成
                   </a>
                </td>
           </tr>


        );
    }
}

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(
             <form className="form-horizontal" onSubmit={this.tijiao.bind(this)}>
                <div className="form-group">
                
                    <div className="col-sm-10">
                        <input ref="txt"  type="text" className="form-control" onKeyUp={this.add.bind(this)} id="exampleInputName2" placeholder="请输入内容"/>
                    </div>
                    <div className="col-sm-2">
                <button type="button" className="btn btn-primary" onClick={this.add.bind(this)}>添加</button>
                    </div>
                
                </div>

            
            </form>
        );
    }
}
export default TodoForm;

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

<body>
    <div id="app">
        
    </div>
    <script src="/assets/bundle.js"></script>
</body>

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