SLIDE 1
REACT ROUTING AND STATE MANAGEMENT ROUTING LOADING A PAGE IN A - - PowerPoint PPT Presentation
REACT ROUTING AND STATE MANAGEMENT ROUTING LOADING A PAGE IN A - - PowerPoint PPT Presentation
CS498RK SPRING 2020 REACT ROUTING AND STATE MANAGEMENT ROUTING LOADING A PAGE IN A BROWSER representation s of resource s Browser HTML Other Resources cforms.js http://creativecommons.org creativecommons.css //Collapse Functions
SLIDE 2
SLIDE 3
LOADING A PAGE IN A BROWSER
Browser
http://creativecommons.org <a><span id="home-button"> </span></a> <div id="logo"> <span> Creative Commons </span> </div>
HTML
cforms.js
//Collapse Functions String.prototype.tri function() { return this.replace}
creativecommons.css
topbar #home-button{ position: relative; float: left; display: block; height: 40px; width: 150px; }
cc-logo.png
Other Resources Rendered Page Document Object Model (DOM)
#logo img body span ul
topbar span { float: left; display: block; height: 40px; width: 150px; cursor: pointer; z-index: 1; top: 0;
representations of resources
http:/ /creativecommons.org HTTP GET HTTP GET
SLIDE 4
WHAT IS ROUTING
In SPAs (Single-Page Applications), routing is used for changing the display when the URL changes Use History API to update the URL and change the active component to match the URL No real page reload Gives the users the illusion of navigating between multiple pages Users can share direct URLs to app states
http:/ /creativecommons.org/ http:/ /creativecommons.org/about
Home Component About Component
SLIDE 5
REACT ROUTER
BrowserRouter > npm install react-router-dom
https://reacttraining.com/react-router/web/guides/quick-start
Switch Route Link
1 2 Install React Router to your React project Use components from the API
SLIDE 6
BrowserRouter
https://reacttraining.com/react-router/web/api/BrowserRouter
Uses History API to keep your UI in sync with the URL
<BrowserRouter> <App /> </BrowserRouter>
Wrap your your whole app on the top level to use!
SLIDE 7
Switch and Route
https://reacttraining.com/react-router/web/api/Switch
<Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> </Switch>
Use them together to declare your routes
SLIDE 8
Link
https://reacttraining.com/react-router/web/api/Link
<Link to="/">Home</Link> <Link to="/dashboard">Dashboard</Link> <Link to="/about">About</Link>
Use it to create references to your routes
SLIDE 9
Basic Routing
Example
SLIDE 10
URL Params
Example
SLIDE 11
Nested Routing
Example
SLIDE 12
HOOKS
SLIDE 13
HOOKS
A Hook is a special function that lets you “hook into” React features. Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components.
SLIDE 14
MOTIVATION
It’s hard to reuse stateful logic between components
1 2 3
Complex components become hard to understand Classes confuse both people and machines
SLIDE 15
STATE HOOK: useState
SLIDE 16
EFFECT HOOK: useEffect
SLIDE 17
RULES
Only Call Hooks at the Top Level
Don’t call Hooks inside loops, conditions, or nested functions. This ensures that Hooks are called in the same order each time a component renders.
Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions. Instead, you can:
- Call Hooks from React function
components.
- Call Hooks from custom Hooks
This ensures that all stateful logic in a component is clearly visible
SLIDE 18
STATE MANAGEMENT
SLIDE 19
STATE MANAGEMENT
Different components might want to display and update the same state Lifting the state up might not be always feasible. Shared global state enables: Single source of truth Single point of mutation
SLIDE 20
CORE CONCEPTS
State Actions Reducers/ Derivations
The data of your app. Global values that are shared by multiple components. Think of it like a front-end data store.
Piece of code that indicates change requests the state. Can contain a "payload" Handle how state changes as a response to actions.
SLIDE 21
TOOLS
Built-in solutions with React Easy to use Define observable states and views that update with respect to states Views use derivations to update the state
Use read-only state that can only be updated through actions. Reducers handle the updates and create a new state
SLIDE 22
MANAGING STATE WITH HOOKS
Use useState for local state Use useReducer for global state Create new custom hooks for derived properties
function useReducer(reducer, initialState) { const [state, setState] = useState(initialState); function dispatch(action) { const nextState = reducer(state, action); setState(nextState); } return [state, dispatch]; }
SLIDE 23
RESOURCES
https://developer.mozilla.org/en-US/docs/Web/API/History_API https://reacttraining.com/react-router/web/guides/quick-start https://reactjs.org/docs/hooks-intro.html https://www.youtube.com/watch?v=dpw9EHDh2bM https://redux.js.org/ https://mobx.js.org/
SLIDE 24