摘要:留言板搭建環境創建文件安裝使用命令創建目錄進入目錄運行它會自動跳轉到頁面安裝修改項目刪除不需要的項目修改完以后的項目目錄編寫程序因為我們這里會用到,所以我們需要先下載一個樣式庫下載樣式庫官網網址直接在瀏覽器打
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(,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 (); } } 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(); } } 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 (); } } export default LiuYanItem; {text}
{time}刪除留言
創建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}); return ( ); } } export default LiuYanList;
{todoItems} 留言
創建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
運行頁面現在我們的頁面就完成了,現在的目錄:
接下來就讓我們看看效果吧!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51055.html
摘要:做的留言板先看一下我們的留言板,然后在去實現功能做留言板首先要配置好我們的文件,然后才能接著做我們的留言板快速開始安裝,建議使用使用命令創建應用,為項目名稱進入目錄,然后啟動接下來看看我們的代碼吧留言板留言板 create-react-app做的留言板 先看一下我們的留言板,然后在去實現功能 showImg(https://segmentfault.com/img/bVRSna?w=1...
摘要:留言板搭建環境創建文件安裝使用命令創建目錄進入目錄運行它會自動跳轉到頁面安裝修改項目刪除不需要的項目修改完以后的項目目錄編寫程序因為我們這里會用到,所以我們需要先下載一個樣式庫下載樣式庫官網網址直接在瀏覽器打 create-react-app留言板 搭建環境 創建package.json文件 npm init -y 安裝create-react-app npm install -g c...
摘要:搭建項目有三種安裝的方式,想了解的登錄官網查看,今天介紹的一個自動安裝的不需要怎么配置環境,自動生成的方式,類似于并實現一個小案例,留言功能官網的安裝教程安裝依次安裝最終啟動自后會出現一個頁面大家可以去試試下邊我們配置一 React-APP搭建項目 React有三種安裝的方式,想了解的登錄React官網查看,今天介紹的一個自動安裝的不需要怎么配置環境,自動生成的方式,類似于vue-cl...
摘要:通過裝飾器或者利用時調用的函數來進行使用下面代碼中當或者發生變化時,會監聽數據變化確保通過觸發方法自動更新。只能影響正在運行的函數,而無法影響當前函數調用的異步操作參考官方文檔用法裝飾器函數遵循中標準的綁定規則。 前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術棧,使用Create-React-App腳手架進行一個移動端項目搭建,主要介紹項...
摘要:如果你對這系列文章有疑問或發現有錯誤的地方,歡迎在下方留言討論。 緊接上篇react+graphql起手和特性介紹(二),介紹完graphql與koa的服務搭建和graphql的一些常用特性,接下來我們介紹下在react中如何使用graphql我們使用create-react-app創建react應用: npm i -g create-react-app mkdir react-gra...
閱讀 3557·2021-08-02 13:41
閱讀 2391·2019-08-30 15:56
閱讀 1520·2019-08-30 11:17
閱讀 1174·2019-08-29 15:18
閱讀 580·2019-08-29 11:10
閱讀 2671·2019-08-26 13:52
閱讀 508·2019-08-26 13:22
閱讀 2949·2019-08-23 15:41