create-react-app留言板

搭建环境

• 创建package.json文件

npm init -y

• 安装create-react-app

npm install -g create-react-app

• 使用命令创建myapp目录

create-react-app myapp

• 进入myapp目录

cd myapp

• 运行

npm start

它会自动跳转到页面：

• 安装loder

npm install sass-loader node-sass --save-dev

修改项目

• 删除不需要的项目

• 修改完以后的项目目录
  

编写程序

因为我们这里会用到Bootstarp，所以我们需要先下载一个样式库；

• 下载Bootstarp样式库

官网网址：
http://v3.bootcss.com/getting-started/#download
直接在浏览器打开就可以，打开以后会出现以下页面，点击第一个，下载Bootstrap就可以；

• 创建index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import LiuYanapp from './LiuYanapp';import './bootstrap/css/bootstrap.min.css';  //引入样式文件
ReactDOM.render(<LiuYanapp/>,document.getElementById("app"));      //输出到页面

• 创建LiuYanapp.js文件

import React from 'react';import LiuYanList from './LiuYanList';
import LiuYanForm from './LiuYanForm';class LiuYanapp 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);}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"><hr/></div><div className="panel-body">           <h1 className="text-center ">留言板</h1><LiuYanList deleteItem={this.deleteItem} data={this.state.todos}/><LiuYanForm addItem={this.addItem}/> </div></div> </div>         );}
}export default LiuYanapp;

• 创建LiuYanForm.js文件

import React from 'react';class LiuYanForm 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 LiuYanForm;

• 创建LiuYanItem.js文件

import React from 'react';class LiuYanItem extends React.Component{delete(){this.props.deleteItem(this.props.data.id);}render(){let {text,time,done,id}=this.props.data;return (<tr><td>{text}<br/><br/>{time}</td><td><a className="btn glyphicon glyphicon-remove btn-danger" onClick={this.delete.bind(this)}>删除留言</a></td></tr>);}
}export default LiuYanItem;

• 创建LiuYanList.js文件

import React from 'react';import LiuYanItem from './LiuYanItem';
class LiuYanList extends React.Component{render(){let todos=this.props.data;let todoItems=todos.map(item=>{return <LiuYanItem deleteItem={this.props.deleteItem} key={item.id} data={item}/>});return (<table className="table table-striped"><thead><tr><th>留言</th>                       </tr></thead><tbody>{todoItems}</tbody>              </table>);}
}export default LiuYanList;

• 创建webpack.config.js文件

module.exports = {entry: './index.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" } //添加]}
}    

• 输入命令，运行页面

npm start

现在我们的页面就完成了，现在的目录：

运行页面

• 接下来就让我们看看效果吧！