接React结合webpack配置!

制作一个简单的表格

TodoApp.js里的代码

import React from &＃39;react&＃39;;import TodoList from &＃39;./TodoList&＃39;; import TodoForm from &＃39;./TodoForm&＃39;;class TodoApp extends React.Component{constructor(props){super(props);

this.ids&＃61;1;this.state&＃61;{todos:[]};this.addItem&＃61;this.addItem.bind(this);this.deleteItem&＃61;this.deleteItem.bind(this);this.okItem&＃61;this.okItem.bind(this);

} okItem(id){this.state.todos.map(item&＃61;>{if(item.id&＃61;&＃61;id){item.done&＃61;1;}return item;});this.setState({todos:this.state.todos}); } deleteItem(id){let newtodos&＃61;this.state.todos.filter((item)&＃61;>{return !(item.id&＃61;&＃61;id)});this.setState({todos:newtodos});}addItem(value){this.state.todos.unshift({id:this.ids&＃43;&＃43;,text:value,time:(new Date()).toLocaleString(),done:0})this.setState({todos:this.state.todos});}render(){return (

下面的代码是表格最基本的排版内容&＃xff1a; 可以参考网站&＃xff1a;
bootstrap

`ToDo 学习学习`

);}}export default TodoApp;

使用bootstrap先配置文件
cnpm file-loader url url-loader --save-dev
再webpack.config.js文件里添加

{ test: /\.eot(\?v&＃61;\d&＃43;\.\d&＃43;\.\d&＃43;)?$/, loader: "file-loader" },{ test: /\.(woff|woff2)$/, loader:"url-loader?prefix&＃61;font/&limit&＃61;5000" },{ test: /\.ttf(\?v&＃61;\d&＃43;\.\d&＃43;\.\d&＃43;)?$/, loader: "url-loader?limit&＃61;10000&mimetype&＃61;application/octet-stream" },{ test: /\.svg(\?v&＃61;\d&＃43;\.\d&＃43;\.\d&＃43;)?$/, loader: "url-loader?limit&＃61;10000&mimetype&＃61;image/svg&＃43;xml" }

index.js

import React from &＃39;react&＃39;; import ReactDOM from &＃39;react-dom&＃39;; import TodoAPP from &＃39;./components/TodoAPP&＃39;; //引用文件 import &＃39;./lib/bootstrap/css/bootstrap.min.css&＃39;;ReactDOM.render(,document.getElementById("app"));

TodoForm.js

import React from &＃39;react&＃39;;

class TodoForm extends React.Component{tijiao(event){event.preventDefault();} add(event){if(event.type&＃61;&＃61;"keyup"&&event.keyCode!&＃61;13){return false;}let txt&＃61;this.refs.txt.value;if(txt&＃61;&＃61;"") return false;this.props.addItem(txt);

this.refs.txt.value&＃61;""; } render(){return(

);}
}
export default TodoForm;

TodoItem.js

import React from &＃39;react&＃39;; 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}&＃61;this.props.data;return ({text}{time}{done&＃61;&＃61;0?"未完成":"完成"}删除完成); } }export default TodoItem;

TodoList.js

import React from &＃39;react&＃39;;import TodoItem from &＃39;./TodoItem&＃39;; class TodoList extends React.Component{render(){let todos&＃61;this.props.data;let todoItems&＃61;todos.map(item&＃61;>{return });/*let todoItems&＃61;[,,,,,];*/

return (

{todoItems}