ReactProject
豌豆射手GCC
这个作者很懒,什么都没留下…
展开
-
React 部署
Depolyment StepsCheck Basepath<BrowserRouter basename="/my-app/"Build Optimize Projectnpm run build in create-react-app projectServer must ALWAYS serve index.html (also for 404 cases)To ensure that Routing works correctlyUpload Build Ar原创 2020-07-17 01:35:11 · 148 阅读 · 0 评论 -
React Project:Test App Jest& enzyme
what to testDo not test the library !Do not test complex connections !Do test isolated unitsDo test your conditional outpusTest component对navigationitems进行测试import React from 'react';import { configure , shallow} from 'enzyme';//shallow只render当前内容原创 2020-07-16 17:03:21 · 156 阅读 · 0 评论 -
React Project: Step12 Imporvement
使用lazy loadingapp.jsimport React, { Component } from 'react';import {Route, Switch,Redirect} from 'react-router-dom';import Layout from './hoc/Layout/Layout';import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';import Logout from './c原创 2020-07-16 15:25:19 · 141 阅读 · 0 评论 -
React Project: Step11 Auth
Local Storage存储用户登录信息(token+id)auth.js——action在auth的action中设置判断是否登入的函数;1.判断localstorage中是否登入;2.计算自动登出的时间(结束时间-当前时间);export const authCheckState = ()=>{ return dispatch=>{ const token = localStorage.getItem('token'); if(!token原创 2020-07-16 13:16:09 · 207 阅读 · 0 评论 -
React Project: Step11 Auth
新建Auth界面类似checkourder的表单;对input的value和state进行双向绑定;且加入有效检查‘import React,{Component} from 'react';import Input from '../../components/UI/Input/Input';import Button from '../../components/UI/Button/Button';import classes from './Auth.css';class Auth e原创 2020-07-16 00:08:11 · 232 阅读 · 0 评论 -
React Project : Step 10 Redux
在index中加入redux dev-toolsimport burgerBulderReducer from './store/reducers/burgerBuilder';const store =createStore(burgerBulderReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());将Action转为Action Creators将原创 2020-07-15 13:59:04 · 451 阅读 · 0 评论 -
React Project: Adding Redux to Synchronous Data passing
Redux 用于存放ingredients和prices(全局调用的state)index.jsProvider需要包裹所有的东西;import React, { createContext } from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import registerServiceWorker from './registerServiceWorker';原创 2020-07-13 17:33:54 · 202 阅读 · 0 评论 -
React Project: Step 8 Form Validation
使Contact中原创 2020-07-12 17:50:47 · 414 阅读 · 0 评论 -
React Project: Step 7 Add Route
在index.js中加入BroswerRouterimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import registerServiceWorker from './registerServiceWorker';import {BrowserRouter} from 'react-router-dom';ReactDOM.ren原创 2020-07-12 14:12:24 · 572 阅读 · 0 评论 -
React Project:Step 6 使用Axios将order传入firebase数据库
firebase数据库http://firebase.google.comBurgerBuilder.js中将order传入databaseAxios+Post purchaseContinueHandler=()=>{ // alert('You continue!'); const order={ ingredients:this.state.ingredients, price:this.state.totalPrice, custo原创 2020-07-08 20:41:04 · 161 阅读 · 0 评论 -
React Project:Step5 SumUp & Proptype & Life Cycle
结构assets中存放图片等widgetcomponent中存放purecomponent(无state控制)container中存放(state控制)的componenthoc中存放auxProptype设置component的props type;import PropTypes from 'prop-types';burgerIngredient.propTypes= { //设置proptype, 返回一个string type:PropTypes.string.i原创 2020-07-06 18:37:52 · 117 阅读 · 0 评论 -
React Project:Step4 Navigation & Toolbars
添加header与navigation buttonlayout.js中加入toolbarimport React from 'react';import Aux from '../../hoc/Auxiliary';import classes from './Layout.module.css';import Toolbar from '../Navigation/Toolbar/Toolbar';const layout=(props)=>( <Aux> &原创 2020-07-06 17:00:15 · 147 阅读 · 0 评论 -
React Project:Step3 Add Order Button & Order model
为buildcontrols添加order按钮显示在按钮下方;并根据BuildBurger传入的purchasable props,控制该button的有效性;import React from 'react';import classes from './BuildControls.module.css';import BuildControl from './BuildControl/BuildControl';const controls=[ {label:'Salad',typ原创 2020-07-06 10:08:25 · 166 阅读 · 0 评论 -
Recat Project: Step2 Add Button and Total Price
BuildBurger.js中添加BuildControls——按钮控制ingredient注意点:add和remove中调用state中的object需要使用深拷贝,否为为拷贝地址,为错误操作;传入diable参数,在一个type添加个数为0时,屏蔽remove操作;import React,{Component} from 'react';import Aux from '../../hoc/Auxiliary';import Burger from '../../components/Bu原创 2020-07-05 17:07:22 · 151 阅读 · 0 评论 -
Recat Project: Step1 Build A Burger
创建空react文件npm init react-app my-app建立burger——从上至下最高层——App.jslayout负责控制显示header和body;BurgerBuilder负责显示body中的burger;import React from 'react';import Layout from './components/Layout/Layout';import BurgerBuilder from './containers/BurgerBuilder/Burer原创 2020-07-05 15:59:39 · 134 阅读 · 0 评论