摘要:結合的使用大家應該都不陌生吧,它是一套用于和的框架,這里,我們要使用它里面的一套樣式框架搭建環境首先我們需要去官網下載一個庫官網網址直接在瀏覽器打開就可以,打開以后會出現以下頁面,點擊第一個,下載就可以然后安裝插件在命令行里輸入
React結合Bootstrap的使用
搭建環境Bootstrap大家應該都不陌生吧,它是一套用于HTML、CSS 和JS的框架,這里,我們要使用它里面的一套樣式框架;
首先我們需要去官網下載一個Bootstrap庫
官網網址: http://v3.bootcss.com/getting-started/#download 直接在瀏覽器打開就可以,打開以后會出現以下頁面,點擊第一個,下載Bootstrap就可以;
然后安裝Bootstrap插件
在命令行里輸入 npm install file-loader url url-loader --save-dev
配置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" } //添加 ] } }
一個簡單的小例子這樣我們的環境就搭建完成了;
我做了一個用React和Bootstarp的一個例子,一個提交的表格,下面我來給大家詳細的介紹一下:
創建一個index.html,用來顯示效果
React3
創建ToDoapp.js文件,它將作為一個最大的模塊來包三個模塊
import React模塊 from "react"; //導入React模塊 import ToDoList from "./ToDoList"; //導入ToDoList模塊 import ToDoForm from "./ToDoForm"; //導入ToDoForm模塊 class ToDoapp 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); this.okItem=this.okItem.bind(this); } okItem(id){ this.state.todos.map(item=>{ if(item.id==id){ item.done=1; } return item; }); this.setState({ todos:this.state.todos }); } 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 ToDoapp; //導出ToDoapp模塊
ToDo你要做什么?
創建ToDoList.js文件
import React from "react"; import ToDoItem from "./ToDoItem"; //導入ToDoItem模塊 class ToDoList extends React.Component{ render(){ let todos=this.props.data; let todoItems=todos.map(item=>{ return}); return ( ); } } export default ToDoList; //導出ToDoList模塊
{todoItems} 內容 時間 狀態 操作
創建ToDoItem.js文件
import React from "react"; class ToDoItem extends React.Component{ delete(){ this.props.deleteItem(this.props.data.id); } complete(){ this.props.okItem(this.props.data.id); } render(){ let {text,time,done,id}=this.props.data; return (); } } export default ToDoItem; //導出ToDoItem模塊 {text} {time} {done==0?"未完成":"完成"} 刪除 完成
創建ToDoForm.js文件
import React from "react"; class ToDoForm 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 ToDoForm; //導出ToDoForm模塊
這里我們能用到了柵格化布局;
接下來就讓我們來看一下效果吧:
效果:添加的時候可以顯示當前時間,安回車鍵就可以直接添加,點擊完成可以把未完成改成完成,點擊刪除可以刪除內容;
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84400.html
摘要:結合的使用大家應該都不陌生吧,它是一套用于和的框架,這里,我們要使用它里面的一套樣式框架搭建環境首先我們需要去官網下載一個庫官網網址直接在瀏覽器打開就可以,打開以后會出現以下頁面,點擊第一個,下載就可以然后安裝插件在命令行里輸入 React結合Bootstrap的使用 Bootstrap大家應該都不陌生吧,它是一套用于HTML、CSS 和JS的框架,這里,我們要使用它里面的一套樣式框架...
摘要:結合實現表格記事官網有一個案例,實現表格的添加,我做一個比他復雜一點,結合的案例。 React結合webpack實現表格記事 React官網有一個案例,實現表格的添加,我做一個比他復雜一點,結合bootstrap的案例。分享給大家! showImg(https://segmentfault.com/img/bVRJSh?w=745&h=416); 首先下載loader插件 npm fi...
摘要:大漠窮秋于贈此筆名。是版本的實現,和版本保持風格一致。碼云最有價值的開源項目這是版的實現,和版本保持風格一致。采用版本,使用組件庫以及開發。已推薦這是的服務端代碼,基于。如果你需要與這個后端代碼進行對接,請檢出本項目的分支。 你好,我是徐曉東,筆名燕云長風。大漠窮秋于 2019-03-16 21:22 贈此筆名。 寓意:結合李白著名的邊塞詩《關山月》取【燕云長風】—— 長風幾萬里,吹...
摘要:搭建項目有三種安裝的方式,想了解的登錄官網查看,今天介紹的一個自動安裝的不需要怎么配置環境,自動生成的方式,類似于并實現一個小案例,留言功能官網的安裝教程安裝依次安裝最終啟動自后會出現一個頁面大家可以去試試下邊我們配置一 React-APP搭建項目 React有三種安裝的方式,想了解的登錄React官網查看,今天介紹的一個自動安裝的不需要怎么配置環境,自動生成的方式,類似于vue-cl...
摘要:是流行的框架之一,在年及以后將會更加流行。于年首次發布,多年來廣受歡迎。下面是另一個名為的高階函數示例,該函數接受另外兩個函數,分別是和。將所有較小的函數組合成更大的函數,最終,得到一個應用程序,這稱為組合。 React是流行的javascript框架之一,在2019年及以后將會更加流行。React于2013年首次發布,多年來廣受歡迎。它是一個聲明性的、基于組件的、用于構建用戶界面的高...
閱讀 2814·2021-11-18 10:02
閱讀 3673·2021-11-15 17:59
閱讀 2306·2021-09-06 15:00
閱讀 3344·2019-08-29 16:58
閱讀 1056·2019-08-26 10:34
閱讀 1581·2019-08-26 10:15
閱讀 1286·2019-08-26 10:11
閱讀 2713·2019-08-23 18:33