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 <a><span id="home- button"> http:/ /creativecommons.org String.prototype.tri </span></a> topbar #home-button{ function() { position: relative; HTTP GET HTTP GET <div id="logo"> return float: left; cc-logo.png <span> display: block; this.replace} Creative Commons height: 40px; </span> width: 150px; </div> } Document Object Model (DOM) #logo span topbar span { float: left; display: block; body img height: 40px; Rendered Page width: 150px; cursor: ul pointer; z-index: 1; top: 0;

WHAT IS ROUTING In SPAs (Single-Page Applications), routing is http:/ /creativecommons.org/ used for changing the display when the URL changes Home Component 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 http:/ /creativecommons.org /about between multiple pages About Component Users can share direct URLs to app states

REACT ROUTER 1 Install React Router to your React project > npm install react-router-dom 2 Use components from the API BrowserRouter Switch Route Link https://reacttraining.com/react-router/web/guides/quick-start

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! https://reacttraining.com/react-router/web/api/BrowserRouter

Switch and Route <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> </Switch> Use them together to declare your routes https://reacttraining.com/react-router/web/api/Switch

Link <Link to="/">Home</Link> <Link to="/dashboard">Dashboard</Link> <Link to="/about">About</Link> Use it to create references to your routes https://reacttraining.com/react-router/web/api/Link

Basi c Routin g Example

URL Param s Example

Neste d Routin g Example

HOOKS

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.

MOTIVATION 1 2 3 It’s hard to reuse Complex Classes confuse stateful logic components both people and between become hard to machines components understand

STATE HOOK: useState

EFFECT HOOK: useEffect

RULES Only Call Hooks at Only Call Hooks from the Top Level React Functions Don’t call Hooks inside loops, Don’t call Hooks from regular conditions, or nested functions. JavaScript functions. Instead, you can: - Call Hooks from React function This ensures that Hooks are called components. in the same order each time a - Call Hooks from custom Hooks component renders. This ensures that all stateful logic in a component is clearly visible

STATE MANAGEMENT

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

CORE CONCEPTS Reducers/ State Actions Derivations The data of your app. Piece of code that Handle how state indicates change changes as a Global values that requests the state. response to are shared by actions. multiple components. Can contain a "payload" Think of it like a front-end data store.

TOOLS Use read-only state Define observable Built-in solutions with that can only be states and views that React updated through update with respect actions. to states Easy to use Reducers handle the Views use derivations updates and create a to update the state new state

MANAGING STATE WITH HOOKS function useReducer(reducer, initialState) { const [state, setState] = useState(initialState); function dispatch(action) { const nextState = reducer(state, action); setState(nextState); } return [state, dispatch]; } Use useState for local state Use useReducer for global state Create new custom hooks for derived properties

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/

NEXT CLASS: DATABASES https://uiuc-web-programming.gitlab.io/sp20/