- 博客(53)
- 收藏
- 关注
原创 React: Redux saga
Redux saga(Alternative to Thunk)用于redux控制异步actionnpm install --save redux-sagasaga+generatorauth.jsimport {put} from 'redux-saga/effects';import * as actionTypes from '../actions/actionTypes';export function* logoutSaga(action){ yield localStora
2020-07-20 15:40:59 303
原创 React: Animation
DIsplay——显示与隐藏利用class与props的判断,对backdrop进行显示/隐藏的转换;modal.CloseModal{ display: none;}.OpenModal{ display: block;}const modal = (props) => { const cssClasses=["Modal",props.show?"OpenModal":"CloseModal"]; return ( <div
2020-07-19 15:07:38 722
原创 React: NextJS FrameWork
NextJshttps://nextjs.org/docs该框架可以用文件目录代替route,且会自动使用lazyloading;内容为React代码;只有pages文件夹下的文件为path;其余的component照旧使用;对component进行局部styleimport React from 'react';const user= (props)=> ( <div> <h1>{props.name}</h1>
2020-07-18 01:39:39 330
原创 React : WEBPACK
npm start初始化npmnpm init设置开发环境npm install --save-dev webpack webpack-dev-server设置文件布局Build a Basic React Appindex.htmlroot的位置是index.js插入的位置;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met...
2020-07-17 18:04:42 236
原创 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 168
原创 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 177
原创 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 164
原创 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 229
原创 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 256
原创 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 480
原创 Redux 异步+Middleware
Middleware在构建store时将middleware作为第二个参数;import { createStore, combineReducers, applyMiddleware, compose } from 'redux';const logger = store =>{ return next => { return action=>{ console.log('[Middleware] Dispatching', act
2020-07-14 11:51:46 314
原创 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 228
原创 Redux: Combine UI and Redux
Local UI state 与 Redux 的数据传递在addperson中加入state,用于获取ui输入的信息,并放入localstateimport React ,{Component}from 'react';import './AddPerson.css';class AddPerson extends Component{ state={ name : '', age:'' } nameChangeHandler=(even
2020-07-13 15:34:53 145
原创 Redux: Update state
使用redux第一步npm install --save react-redux用Provider包裹住app;且建立store,将reducer中的函数放入createstore;import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import registerServiceWorker from './registerService
2020-07-13 12:59:27 597
原创 Redux:Redux Flows
安装reduxnpm install --save redux建立初始stateconst redux = require('redux');const createStore = redux.createStore;const initialState={ counter:0}Reducer(当前state,action)每次改变都需要用深拷贝;不能在传入的state中进行原地改变;//Reducerconst rootReducer = (state=initial
2020-07-13 00:24:50 160
原创 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 604
原创 React: Route Task
Add Routes to load “Users” and “Courses” on different pages (byentering a URL, without Links)使用BroswerRouter讲index.js的render内容包裹住ReactDOM.render(<BrowserRouter> <App /></BrowserRouter>, document.getElementById('root'));在app.j.
2020-07-12 00:57:05 184
原创 React Router:Loading Routes Lazily
Load component when needed在被用到时load component;asyncComponent.js传入的function为import();import React,{Component} from 'react';const asyncComponent = (importComponent)=>{ return class extends Component{ state={ component:null } com
2020-07-10 20:09:39 298
原创 React:router Redirect
Redirectimport {Route, NavLink, Switch, Redirect} from 'react-router-dom';任何以’/‘为前缀的url,都会重定位到’/posts/ <Redirect from='/' to='/posts'/>Conditional Redirect将< Redirect /> 放入return中,即会跳转页面;所以需要用let变量存放< Redirct />
2020-07-10 13:50:47 678
原创 React:Router Nested Route
Nested Route可在route中添加route;需要满足父route的path为子route的前缀,不然子route改变后父route不re-render,页面不会renderBlog.js <Switch> <Route path="/new-post" component={NewPost}/> <Route path="/posts" compon
2020-07-10 12:38:49 301
原创 React:Route ——Styling the Active Route
Styling the Active Route用NavLink替代Linkimport {Route, NavLink} from 'react-router-dom';可以设置activeClassName=string;可以设置activeStyle={{}}class默认为active,故也可以在css文件中对active进行设置;注意点需要对to的地址进行exact操作,不然会作为前缀,对以该path为前缀的地址的active都做出反应;
2020-07-09 18:57:25 150
原创 React:Router —— 添加多页效果
安装Routernpm install --save react-router react-router-domimport {Route, Link} from 'react-router-dom';为页面添加两个a link<header className="Blog"> <nav> <ul> <li>
2020-07-09 16:36:47 292
原创 OSI 七层模型
OSI七层模型第七层:应用层(Application Layer)Network Application——使用网络的应用浏览器使用的应用层协议: HTTP、HTTPs邮箱使用的应用层协议:STMP、POP3文件传输:FTP虚拟终端:Telnet应用层通过协议为网络应用提供服务第六层:表示层(Presentation Layer)翻译(ASCII——二进制)压缩:Loss、Lossless加密:第五层:会话层(Session Layer)第四层:传输层(Transport Laye
2020-07-09 00:13:20 421
原创 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 186
原创 Axios:React & Javascript
Axios——用于进行http requesthttps://github.com/axios/axios#typescript安装Axiosnpm install axios --saveAxios+Promiseimport axios from 'axios';componentDidMount(){ //get为异步——即无法使用变量保存(因为执行该语句后变量中还未保存数据) axios.get('https://jsonplaceholder.typ
2020-07-06 23:52:51 655
原创 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 143
原创 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 169
原创 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 189
原创 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 166
原创 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 156
原创 React:Context ——跨层传递props
Props的传递proprs一级一级往下传,若对中间component无用,则很麻烦+浪费时间;使用context,将一个component的props作为全局props,使用context调用即可;从App.js往person传一个state;App.jsimport AuthContext from '../context/auth-context';将需要接受传递的对象包在AuthContext.Provider中;并往AuthContext中传入可分享的props对象——(value
2020-07-05 12:17:21 561
原创 React:Ref
Ref——得到JSX中tag的对象类似document.queryselector();方法1:old version每次render都focus当前的inputElement;将input的ref传入this.inputElement;import React, { Component } from 'react';// import './Person.css';import classes from './person.module.css';import withClass from
2020-07-05 00:44:37 163
原创 React: Using PropTypes
下载prop-typesnpm install --save prop-types设置proptypeimport React, { Component } from 'react';// import './Person.css';import classes from './person.module.css';import withClass from '../../../hoc/WithClass';import Aux from '../../../hoc/Auxiliary';
2020-07-05 00:13:52 155
原创 React:Rendering Adjacent JSX Element
JSX中每次render return中内容都要被包在一个tag中 <div className={classes.Person}> <p>I Am a person!</p> <p onClick = {this.props.click}>{this.props.name}</p> <p>i'm {this.props.age}</p> <p>{this
2020-07-04 23:14:05 147
原创 React:Using shouldComponentUpdate
shouldComponentUpdate若person的上层re-render,则person也会被re-render;所以需要对子类使用条件判断,不re-render与自己无关的事件; shouldComponentUpdate(nextProps,nextState){ if(nextProps.persons !== this.props.persons){ console.log('[Persons.js] shouldComponentUpdate'); retu
2020-07-04 16:52:09 140
原创 React:Cleanup Lifecycle & useEffect()
Class componentWillUnmount(){ console.log('[Person.js] unmount'); }funtionalreturn+【】——在unmount的时候调用 useEffect(()=>{ //每次update都会被调用 console.log('[Cockpit.js] useeffect'); //Http request... setTimeout(()=>{ alert('S
2020-07-04 16:31:14 365
原创 React:usEffect——Functionale
useEffect——每次update都会调用用于在funtional 中实现lifecycle控制;const Cockpit =(props)=>{ useEffect(()=>{ //每次update都会被调用 console.log('[Cockpit.js] useeffect'); //Http request... }); const classes=[]; let btnClass=''; //一个指向特殊名字的指针 i
2020-07-04 16:15:12 258 1
原创 React: Component Lifecycle
Creation Lifecyclecontructor时需要调用 super();Creation lifecycle:Can’t cause side effectConstructor(props)getDerivedStateFromProps(props,state)render()Render Child Componentslife cycle finished: Can cause side effectcomponentDidMount()Constructo
2020-07-04 15:54:08 223
原创 React: Project Structure
src结构assets中存放图片等components中存放各个component—-Person等container中存放App.js等尽可能减少App.js中render的逻辑和return的JSX;建立Cockpit component 和 persons component;将逻辑放入其中;render(){ let person=null;//key放在最外面 if(this.state.isshow){ person= <Pers
2020-07-04 14:21:32 209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人