- 博客(437)
- 收藏
- 关注
RSS订阅原创 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
279
原创 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
671
原创 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
299
原创 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
220
原创 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
原创 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
原创 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
原创 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
原创 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
原创 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
原创 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
291
原创 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
原创 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
123
原创 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
535
原创 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
142
原创 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
570
原创 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
158
原创 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
271
原创 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
646
原创 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
277
原创 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
126
原创 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
270
原创 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
375
原创 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
原创 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
639
原创 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
原创 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
145
原创 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
165
原创 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
原创 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
原创 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
535
原创 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
145
原创 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
135
原创 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
134
原创 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
118
原创 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
339
原创 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
242
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
202
原创 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
192
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人