当前位置: 首页 > Web前端 > HTML

create-react-app留言板

时间:2023-04-03 00:48:36 HTML

create-react-app留言板搭建环境创建package.json文件npminit-yinstallcreate-react-appnpminstall-gcreate-react-app使用命令创建myapp目录create-react-appmyapp进入myapp目录cdmyapp运行npmstart会自动跳转到页面:installlodernpminstallsass-loadernode-sass--save-dev修改项目修改项目目录后删除不需要的项目编写程序因为我们这里要用到Bootstarp,所以需要首先下载一个样式库;下载Bootstarp样式库官网网址:http://v3.bootcss.com/getting-started/#download直接在浏览器中打开即可。打开后会出现如下页面。点击第一个下载Bootstrap新建一个index.js文件即可.css';//导入样式文件ReactDOM.render(,document.getElementById("app"));//输出到页面创建LiuYanapp.js文件(道具);这个.ids=1;this.state={todos:[]};this.addItem=this.addItem.bind(th是);this.deleteItem=this.deleteItem.bind(this);}deleteItem(id){letnewtodos=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:(newDate()).toLocaleString(),done:0})this.setState({todos:这个.state.todos});}render(){return(




</div>留言板
);}}exportdefaultLiuYanapp;创建LiuYanForm.js文件importReactfrom'react';classLiuYanFormextendsReact.Component{tijiao(event){event.preventDefault();}add(event){if(event.type=="keyup"&&event.keyCode!=13){返回假;}让txt=this.refs.txt.value;如果(txt==“”)返回假;this.props.addItem(txt);this.refs.txt.value="";}render(){return(
留言);}}exportdefaultLiuYanForm;创建LiuYanItem.js文件importReactfrom'react';classLiuYanItemextendsReact.Component{delete(){this.props.deleteItem(this.props.data.id);}render(){let{text,time,done,id}=this.props.data;返回({文本}

{time}删除留言);}}exportdefaultLiuYanItem;创建LiuYanList.js文件importReactfrom'react';importLiuYanItemfrom'./LiuYanItem';classLiuYanListextendsReact.Component{render(){lettodos=this.props.data;lettodoItems=todos.map(item=>{return});return(留言);}}exportdefaultLiuYanList;创建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$/,排除:/node_modules/,loader:"style-loader!css-loader"},{test:/\.eot(\?v=\d+\.\d+\.\d+)?$/,loader:"file-loader"},//add{test:/\.(woff|woff2)$/,loader:"url-loader?prefix=font/&limit=5000"},//Add{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"}//Add]}}输入命令运行页面npmstart现在我们的页面就完成了,当前目录:运行页面接下来让我们看看来看看效果吧!