接React结合webpack配置!

制作一个简单的表格

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 (

• 下面的代码是表格最基本的排版内容： 可以参考网站：
  bootstrap

        <div className="container">

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

• 使用bootstrap先配置文件

• cnpm file-loader url url-loader –save-dev

• 再webpack.config.js文件里添加

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

index.js

import React from 'react';
import ReactDOM from 'react-dom'; 
import TodoAPP from './components/TodoAPP';
//引用文件
import './lib/bootstrap/css/bootstrap.min.css';

ReactDOM.render(<TodoAPP/>,document.getElementById("app"));

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;

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)}>
             <span className="glyphicon glyphicon-ok" aria-hidden="true"></span>
                    完成
           </a>
        </td>
   </tr>
    );
}
}

export default TodoItem;

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}/>
    });
    /*let todoItems=[
                <TodoItem/>,
                <TodoItem/>,
                <TodoItem/>,
                <TodoItem/>,
                <TodoItem/>,
                <TodoItem/>
    ];*/

    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;

这就是一个简单表格的完整代码，接下来看下效果图

这是我最新的项目目录