React-APP搭建项目
React有三种安装的方式，想了解的登录React官网查看，今天介绍的一个自动安装的不需要怎么配置环境，自动生成的方式，类似于vue-cli！并实现一个小案例，留言功能！
官网的安装教程！
@H_301_11@安装react-app//依次安装 npm install -g create-react-app create-react-app my-app cd my-app npm start
最终启动自后会出现一个Welcome React页面,
大家可以去试试.
下边我们配置一下项目结构
@H_301_11@安装我们需要的loadernpm file-loader url url-loader --save-dev@H_301_11@配置webpack
rules: [
{test: /\.js$/,exclude: /node_modules/,loader: "react-hot-loader!babel-loader"},{test: /\.css$/,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" }
]
@H_301_11@复制之前的webpack.config.js文件
我们加以改造
module.exports = {
entry: './index.js',output: {
path:path.resolve(__dirname,"build"),publicPath:"/assets/",filename: 'bundle.js'
},module: {
rules: [
{ test: /\.js$/,loader: "react-hot-loader!babel-loader" },{ test: /\.css$/,loader: "style-loader!css-loader" },//添加
{ test: /\.(woff|woff2)$/,//添加
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,//添加
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,loader: "url-loader?limit=10000&mimetype=image/svg+xml" } //添加
]
}
}
@H_301_11@导入我们之前的json文件
{
"name": "myapp","version": "0.1.0","private": true,"dependencies": {
"antd-mobile": "^1.5.0","react": "^15.6.1","react-dom": "^15.6.1","react-scripts": "1.0.10"
},"scripts": {
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"
},"devDependencies": {
"babel-plugin-import": "^1.2.1","node-sass": "^4.5.3","sass-loader": "^6.0.6"
}
}
@H_301_11@输入npm install补全我们的项目结构
npm install@H_301_11@引入bootstap模块
我们的bootstap是事先安装完成之后，把他移动到css项目目录下的，index配置如下
//入口文件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")); //输出到页面@H_301_11@创建留言模板，并划分项目模块
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;
@H_301_11@创建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;
@H_301_11@创建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;
@H_301_11@创建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;
这样我们的留言功能就创建完了，大家输入npm start就可以对项目进行启动！想了解的同学们可以复制回去实验一下！
原文链接：https://www.f2er.com/react/303342.html