摘要:搭建項目有三種安裝的方式,想了解的登錄官網(wǎng)查看,今天介紹的一個自動安裝的不需要怎么配置環(huán)境,自動生成的方式,類似于并實現(xiàn)一個小案例,留言功能官網(wǎng)的安裝教程安裝依次安裝最終啟動自后會出現(xiàn)一個頁面大家可以去試試下邊我們配置一
React-APP搭建項目
React有三種安裝的方式,想了解的登錄React官網(wǎng)查看,今天介紹的一個自動安裝的不需要怎么配置環(huán)境,自動生成的方式,類似于vue-cli!并實現(xiàn)一個小案例,留言功能!
官網(wǎng)的安裝教程!
安裝react-app//依次安裝 npm install -g create-react-app create-react-app my-app cd my-app npm start
最終啟動自后會出現(xiàn)一個Welcome React頁面,
大家可以去試試.
下邊我們配置一下項目結構
安裝我們需要的loadernpm file-loader url url-loader --save-dev配置webpack
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" } ]復制之前的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" } //添加 ] } }導入我們之前的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" } }輸入npm install補全我們的項目結構
npm install引入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(創(chuàng)建留言模板,并劃分項目模塊,document.getElementById("app")); //輸出到頁面
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 (創(chuàng)建LiuYanForm.js文件); } } export default LiuYanapp;
留言板
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; 創(chuàng)建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 (創(chuàng)建LiuYanList.js文件); } } export default LiuYanItem; {text}
{time}刪除留言
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} 留言
這樣我們的留言功能就創(chuàng)建完了,大家輸入npm start就可以對項目進行啟動!想了解的同學們可以復制回去實驗一下!
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84485.html
摘要:通過文件可以對圖標名稱等信息進行配置。注意,注冊的只在生產(chǎn)環(huán)境中生效,并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊,以及項目的配置信息比如名稱版本許可證等元數(shù)據(jù)。 一、 快速開始: 全局安裝腳手架: $ npm install -g create-react-app 通過腳手架搭建項目: $ create-react-app 開始項目: ...
摘要:通過文件可以對圖標名稱等信息進行配置。注意,注冊的只在生產(chǎn)環(huán)境中生效,并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊,以及項目的配置信息比如名稱版本許可證等元數(shù)據(jù)。 一、 快速開始: 全局安裝腳手架: $ npm install -g create-react-app 通過腳手架搭建項目: $ create-react-app 開始項目: ...
摘要:升級到之后還沒好好的同步一個可實用的架子,接下來用來搭建一個簡單的的多界面應用,廢話不說直接擼碼創(chuàng)建工程目錄結構工程目錄結構配置安裝依賴引入打開瀏覽器配置文件合并基礎配置一些路徑配置設置開發(fā)環(huán)境 webpack 升級到4之后還沒好好的同步一個可實用的webpack架子,接下來用webpack4來搭建一個簡單的react的多界面應用,廢話不說 直接擼碼 創(chuàng)建工程 $ mkdir dem...
摘要:升級到之后還沒好好的同步一個可實用的架子,接下來用來搭建一個簡單的的多界面應用,廢話不說直接擼碼創(chuàng)建工程目錄結構工程目錄結構配置安裝依賴引入打開瀏覽器配置文件合并基礎配置一些路徑配置設置開發(fā)環(huán)境 webpack 升級到4之后還沒好好的同步一個可實用的webpack架子,接下來用webpack4來搭建一個簡單的react的多界面應用,廢話不說 直接擼碼 創(chuàng)建工程 $ mkdir dem...
閱讀 1926·2021-11-24 09:39
閱讀 3515·2021-09-28 09:36
閱讀 3282·2021-09-06 15:10
閱讀 3433·2019-08-30 15:44
閱讀 1154·2019-08-30 15:43
閱讀 1797·2019-08-30 14:20
閱讀 2712·2019-08-30 12:51
閱讀 2031·2019-08-30 11:04