Web
React Essentials
Slides by Bertil Chapuis, Stefan Teofanovic, Olivier Lemer
## <i class="fas fa-tasks"></i> Overview of Today's Class - React - Material UI - React Router
React
## <i class="fa-brands fa-react"></i> React JavaScript library for building user interfaces: - **Declarative**: makes it easy to reason about and modify an application. - **Rich ecosystem** of tools and libraries, hence often chosen over other frameworks This makes it the most popular JS framework for building user interfaces.
## <i class="fa-brands fa-react"></i> Component-Based Architecture Components are reusable pieces of code that represent a part of the user interface. Organized in a tree-like structure, similarly to HTML elements. The root component is named `App`. Facilitates complex user interfaces by composing smaller, reusable components.
## <i class="fa fa-hand-paper"></i> Developer Tools - Install the React Developer Tools extension for your browser. - Go to the [React website](https://reactjs.org/) and open the developer tools. - Inspect the React component tree.
## <i class="fa fa-hand-paper"></i> Starter Project - Create a new project using the [Create React App](https://create-react-app.dev/) tool. - Run the project and open the developer tools.
## <i class="fa-brands fa-react"></i> JSX JSX (JavaScript XML) is a syntax extension to JavaScript that allows you to write HTML-like code in JavaScript files. ```jsx const element = <h1>Hello, world!</h1>; ``` JSX is not a requirement for using React, but it makes code more readable, and writing it feels like writing HTML. [Babel](https://babeljs.io/) compiles JSX down to React.createElement() calls.
## <i class="fa-brands fa-react"></i> React Component React components are reusable, self-contained pieces of UI that only need to be updated when its props or internal state change. Functional components are the simplest way to define a component. They are just JavaScript functions that return a React element. ```jsx function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ``` Class components are more complex and provide more features, but they are also more difficult to understand. ```jsx class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ``` Here, `props` is an object that contains **read-only properties** passed to the component.
## <i class="fa-brands fa-react"></i> Props Just like HTML attributes, React props are used to parameterize React components. In our previous example ```jsx function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ``` The `props` argument contains one property per attribute passed to the component, here just one, `name` ```js const component = <Welcome name="Sara" />; ```
## <i class="fa-brands fa-react"></i> Composing with components Just like HTML elements, React components can be composed into a tree-like structure. ```jsx function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); } ``` Here, the `App` component is composed of three `Welcome` components. It passes a different `name` attribute to each `Welcome` component. **Components must return a single root element**. This is why we wrap the `Welcome` components in a `div` element. The `div` element is not rendered in the final output and can be replaced with a React fragment (`<></>`).
## <i class="fa-brands fa-react"></i> Children props React components can have content. This content is passed to the component as a special prop named `children`. ```jsx const Dialog = (props) => <div> {props.children} </div>; const WelcomeDialog = () => { return <Dialog> <h1>Welcome</h1> <p>Thank you for visiting our website!</p> </Dialog>; } export default WelcomeDialog; ``` Here, the `props.children` property contains the `h1` and `p` elements.
## <i class="fa-brands fa-react"></i> Named children props Children components can also be passed as named props. ```jsx const Dialog = ({title, body}) => { return <div> <header>{title}</header> <body>{body}</body> </div>; } const WelcomeDialog = () => { return <Dialog title={<h1>Welcome</h1>} body={<p>Thank you for visiting our website!</p>} />; } export default WelcomeDialog; ```
## <i class="fa-brands fa-react"></i> Rendering lists Including a list of JSX nodes in a component will render them all in that order. ```jsx // props has a texts property, which is an array of strings const MyListComponent = (props) => { const components = props.texts.map((text) => <li>{text}</li>); return <ul>{ components }</ul>; } export default MyListComponent; ``` Here, the `MyListComponent` component renders a list of `li` elements.
## <i class="fa-brands fa-react"></i> React Tricks You will often find react components written in a concise way. ```jsx // texts is an array of strings, such as ["Hello", "World"] const MyListComponent = ({texts}) => { return <ul> { texts && texts.map((text) => <li>{text}</li>) } </ul>; } export default MyListComponent; ``` In this example: - Object destructuring is used to extract the `texts` property from the props object. - A ternary operator is used to check if the `texts` property is defined. - The `texts` property is mapped to a list of `li` elements.
## <i class="fa-brands fa-react"></i> List item keys React uses the `key` attribute to identify each element in a list, allowing efficient updates of the DOM. If not specified, React will use the index of the element, and display a warning in the console. Here, we explicitly set the `key` to the index of the element. ```jsx // texts is an array of strings, such as ["Hello", "World"] const MyListComponent = ({texts}) => { return <ul> { texts && texts.map((text, index) => <li key={index}>{text}</li>) } </ul>; } export default MyListComponent; ``` **This is poor practice** : React uses the `key` attribute to know which elements to update, so it should **uniquely identify the element** over time. The index might change when the list is updated, breaking this mechanism.
## <i class="fa-brands fa-react"></i> State and lifecycle Props are read-only, but components can maintain their own internal state. The `state` of a component is an object that contains data relevant to the component. ```jsx class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ``` Here, the `state` object is initialized in the constructor. Whenever the state changes, the component is re-rendered through the `render` method.
## <i class="fa-brands fa-react"></i> Class component state and lifecycle The `state` **should only be updated using the `setState` method** inherited from the `Component` class. ```jsx class Clock extends React.Component { // ... constructor, render, ... componentDidMount() { this.timerID = setInterval(() => this.tick(), 1000); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({date: new Date()}); } } ``` Here, `componentDidMount` and `componentWillUnmount` describe the **lifecycle** of the component. - The `componentDidMount` method is called after the component is rendered for the first time. - The `componentWillUnmount` method is called before the component is removed from the DOM.
## <i class="fa-brands fa-react"></i> Functional component state and lifecycle The **lifecycle** of a functional component is simpler than the lifecycle of a class component. ```jsx function Clock(props) { const [date, setDate] = useState(new Date()); useEffect(() => { const timer = setInterval(() => tick(), 1000); return () => clearInterval(timer); }); function tick() { setDate(new Date()); } return ( <div> <h1>Hello, world!</h1> <h2>It is {date.toLocaleTimeString()}.</h2> </div> ); } ``` Here, the lifecycle methods are replaced by the `useState` and `useEffect` hooks. - The `useState` hook is used to initialize the state and to update the state. - The `useEffect` hook is called after the component is rendered for the first time (`componentDidMount`). - The `useEffect` hook returns a function that is called before the component is removed from the DOM (`componentWillUnmount`).
## <i class="fa-brands fa-react"></i> The `useState` hook The `useState` hook is used to initialize the state and to update the state. It takes a single argument, which is the initial value of the state object and returns an array of two elements: the current state and a function to update the state. ```jsx import React, { useState } from 'react'; // must be imported const Counter = () => { const [count, setCount] = useState(0); return <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Increment </button> </div>; } ``` - Always use the setter (`setCount`) function to update the state. - Never modify the state directly (`count += 1`). - State will not change immediately after the setter call.
## <i class="fa-brands fa-react"></i> Multiple state variables The `useState` hook can be called multiple times to initialize multiple state variables. ```jsx import React, { useState } from 'react'; // must be imported const InputText = ({label, value}) => { const [value, setValue] = useState(value); const [error, setError] = useState(false); const onChange = (e) => setValue(e.target.value); const onBlur = () => setError(value.length === 0); return <> <label>{label}</label> <input type="text" value={value} onChange={onChange} onBlur={onBlur} /> {error && <p>This field is required</p>} </>; } ```
## <i class="fa-brands fa-react"></i> Batching and reconciliation In the following example, the onChange callback makes two calls to the `setState` method. Will the component be re-rendered twice? ```jsx import React, { useState } from 'react'; // must be imported const InputText = ({label, value}) => { const [value, setValue] = useState(value); const [error, setError] = useState(false); const onChange = (e) => { setValue(e.target.value); setError(e.target.value.length === 0); } return <> <label>{label}</label> <input type="text" value={value} onChange={onChange} /> {error && <p>This field is required</p>} </>; } ``` No, thanks to the **batching** of the state updates and a mechanism called reconciliation, React should only re-render the component once.
## <i class="fa-brands fa-react"></i> The `useReducer` hook The `useReducer` hook is an alternative to the `useState` hook. It accepts a reducer function of type `(state, action) => newState` and an initial state, and returns the current state paired with a dispatch method. It is usually preferred instead of `useState` when you have complex state logic. ```js import React, { createContext, useReducer, useContext } from 'react'; export const MusicContext = createContext(); function reducer(state, action) { switch (action.type) { // ... } } export const MusicProvider = ({ children }) => { const [music, dispatch] = useReducer(reducer, { status: 'paused', current: undefined, queue: [] }); return <MusicContext.Provider value={{ music, dispatch }}> { children } </MusicContext.Provider>; }; ``` https://react.dev/reference/react/useReducer
## <i class="fa-brands fa-react"></i> `useReducer`'s `dispatch` The `dispatch` method can then be called to update the state. It takes an action object as argument, and returns the new state. It internally calls the reducer function with the current state and the action object. ```js dispatch({ type: 'play-track', track: track }); ``` Conventionally, the action object has a `type` property that describes the action, and other properties that describe the payload of the action.
## <i class="fa-brands fa-react"></i> The `useEffect` hook The `useEffect` hook is called after the component is rendered for the first time (`componentDidMount`). It takes two arguments: a function that runs when the component is first rendered and an array of dependencies. It returns a function that is called before the component is removed from the DOM (`componentWillUnmount`). ```jsx import { useState, useEffect } from "react"; import ReactDOM from "react-dom/client"; function Counter() { const [count, setCount] = useState(0); const [calculation, setCalculation] = useState(0); useEffect(() => { setCalculation(() => count * 2); }, [count]); // <- add the count variable here return ( <> <p>Count: {count}</p> <button onClick={() => setCount((c) => c + 1)}>+</button> <p>Calculation: {calculation}</p> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Counter />); ``` `useEffect` allows you to run side effects within your component. Common side effects are: Fetching data from an API, subscribing to a stream of data, or manipulating the DOM, etc.
## <i class="fa-brands fa-react"></i> More on the `useEffect` hook The behavior of the `useEffect` can be controlled by passing a second argument to it. This argument is an array of dependencies. ```js useEffect(() => { // runs on every render }); useEffect(() => { // runs on first render }, []); useEffect(() => { // runs on first render and when any of dependencies changes }, [dependency1, dependency2]); ``` The callback will be called - on first render - each time a dependency changes, if a dependency array is provided - on every render if no dependency array is provided
## <i class="fa-brands fa-react"></i> Lifting states up It is a good practice to **keep the state as close to the components that need it**. However, it is common to have multiple components that need to share the same state. The **Lifting states up pattern** is a way to share state between components. The idea is to : - **Move the state up** to the closest common ancestor of the components that need it. - **Pass the state down as props** to the components that need it.
## <i class="fa fa-hand-paper"></i> Lifting states up ```jsx import React, { useState } from 'react'; const TodoApp = () => { const [todos, setTodos] = useState([]); const addTodo = (todo) => setTodos([...todos, todo]); return <><TodoForm addTodo={addTodo} /><TodoList todos={todos} /></>; } const TodoList = ({todos}) => <ul>{todos.map((todo, index) => <li>{todo}</li>)}</ul>; const TodoForm = ({addTodo}) => { const [value, setValue] = useState(''); // may have his internal state const onChange = (e) => setValue(e.target.value); const onSubmit = (e) => { e.preventDefault(); if (!value) return; addTodo(value); setValue(''); } return <form onSubmit={onSubmit}> <input type="text" value={value} onChange={onChange} /> <button type="submit">Add Todo</button> </form>; } ``` In this exemple, TodoApp is the common ancestor of TodoList and TodoForm. `todos` is the state that is **moved up** to TodoApp and **passed down as props** to TodoList and TodoForm.
## <i class="fa fa-hand-paper"></i> Lifting states up ```jsx import React, { useState } from 'react'; const TodoApp = () => { const [todos, setTodos] = useState([]); const addTodo = (todo) => setTodos([...todos, todo]); return <><TodoForm addTodo={addTodo} /><TodoList todos={todos} /></>; } const TodoList = ({todos}) => <ul>{todos.map((todo, index) => <li>{todo}</li>)}</ul>; const TodoForm = ({addTodo}) => { const [value, setValue] = useState(''); // may have his internal state const onChange = (e) => setValue(e.target.value); const onSubmit = (e) => { e.preventDefault(); if (!value) return; addTodo(value); setValue(''); } return <form onSubmit={onSubmit}> <input type="text" value={value} onChange={onChange} /> <button type="submit">Add Todo</button> </form>; } ``` `TodoForm` does not need to know about the state of TodoList, it only needs to know how to add a todo. Therefore, it only needs to know about the `addTodo` function. Avoid passing down the `setTodos` function to the `TodoForm` component, it would allow the `TodoForm` to replace all the todos instead of adding a new one. Create a new `addTodo` function that only adds a todo to the list of todos.
## <i class="fa-brands fa-react"></i> The `useMemo` hook The `useMemo` hook is used to **memoize** values between renders. It takes a computing function and dependencies as arguments, and returns the value of the function. ```js // Memoize a value const complexValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); // Memoize a function const [count, setCount] = useState(0); const increment = () => setCount(count + 1); const memoizedIncrement = useMemo(() => increment, [count]); ``` The second argument is an array of dependencies. The value is only recomputed when one of the dependencies changes.
## <i class="fa-brands fa-react"></i> The `useCallback` hook The `useCallback` hook is used to memoize **functions**. The difference with `useMemo` is that the function *itself* is memoized, not its result. ```js const Counter = () => { const [count, setCount] = useState(0); const increment = useCallback(() => setCount(count + 1), [count]); return <div> <Button onClick={increment} label={Increment} /> <div>{count}</div> </div>; } const Button = ({onCLick, label}) => <button onClick={onCLick}>{label}</button>; ``` Here, the `increment` function is memoized and passed down as props to the `Button` component. Because of its dependency, it will not change unless the `count` state changes.
## <i class="fa-brands fa-react"></i> Context A Context is a way to share data between components without having to pass props down the component tree. It is useful when you have a lot of components that need the same data. The `React.createContext` function creates a context object: - It takes an default value as argument. - It returns an context object with a `Provider` and a `Consumer` component. Notes: The default value is only used when a component does not have a matching `Provider` component in its parent tree.
## <i class="fa-brands fa-react"></i> `Provider`, `Consumer`, and `useContext` The `Provider` component provides the context's state to its child components. We say those children are *in the scope* of the context. `Provider` components can scope the whole application or any subset of it. The `Consumer` component is used to subscribe to a context and receive its data. A more modern solution is to call the `useContext` hook inside any component living within the scope of that context.
## <i class="fa-brands fa-react"></i> Declaring a context Usually, contexts are declared in a separate file. Below is an example of a context defined in a `./context/UserContext.js` file. ```js import React, { useState, useContext } from 'react'; export const UserContext = createContext(); export const UserProvider = ({ children }) => { const [user, setUser] = useState({ name: 'John' }); const setName = name => setUser({ ...user, name }); return ( <UserContext.Provider value={[user, setName]}> {children} </UserContext.Provider> ); } ``` In this example: - We create and export a context with an initial value using `createContext`. - We create and export a component that wraps the `Provider` component to provide the state to its children. The `UserContext.Provider` component takes a `value` prop containing the value of that context for all its children.
## <i class="fa-brands fa-react"></i> Define the scope of the provider As the `UserContext` contains relevant information for the entire application, we wrap the `App` component with the `UserProvider` component. ```js import { UserProvider } from './context/UserContext'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <UserProvider> <App /> </UserProvider> ); ```
## <i class="fa-brands fa-react"></i> Consume the context It is now possible to consume the context in any component with the `useContext` hook. ```js import { UserContext } from './context/UserContext'; const User = () => { const [user, setName] = useContext(UserContext); return ( <div> <div>{user.name}</div> <input value={user.name} onChange={e => setName(e.target.value)} /> </div> ); } ```
Material UI (MUI)
## <i class="fa-solid fa-boxes-stacked"></i> Material UI (MUI) Material-UI (MUI) is an open-source UI component library for React. It is a set of pre-made reusable components that help you build modern UI without extensive knowledge of CSS. It implements the `Material Design` design language developed by Google. ```node npm install @mui/material @emotion/react @emotion/styled ```
## <i class="fa-solid fa-boxes-stacked"></i> A rich collection of components https://mui.com/material-ui/ Let's take a look at some of them.
## <i class="fa-solid fa-boxes-stacked"></i> Navigation - Drawer - Menu - etc.
## <i class="fa-solid fa-boxes-stacked"></i> Drawer (Navigation) <img style="float: left; margin:0; padding:0;margin-right:2rem;" src="./images/mui/drawer.PNG"> Sidebars (Navigation Drawers) that are anchored to a side of the screen. They can be permanently or temporarily displayed and have fixed size. Useful for displaying navigation menu, important notifications or other things that should be accessible throughout the application. `Drawer` uses `Paper` container for visual appearance. https://mui.com/material-ui/react-drawer/
## <i class="fa-solid fa-boxes-stacked"></i> Menu (Navigation) <img style="float: left; margin:0; padding:0;margin-right:2rem;" src="./images/mui/menu.PNG"> Menu contains a list of actions displayed on a temporary surface. You can open the menu using a button or any other clickable component. https://mui.com/material-ui/react-menu/
## <i class="fa-solid fa-boxes-stacked"></i> Layout - Box - Grid - Stack - etc.
## <i class="fa-solid fa-boxes-stacked"></i> Box (Layout) A style-less wrapper component on which you can add specific style attributes. You can specify its CSS properties using the [sx](https://mui.com/system/getting-started/the-sx-prop/) prop. https://mui.com/material-ui/react-box/
## <i class="fa-solid fa-boxes-stacked"></i> Grid (Layout) A responsive layout component (`container`) that arranges its children (`items`) in a specific way. You can specify a direction, spacing (row & column), and alignment of the items. <img style="margin:0; padding:0;margin-right:2rem;" src="./images/mui/grid.PNG"> It is possible to specify the portion of the container that each item takes. These portions can be different for each viewport size (called **breakpoints**) [xs, sm, md, lg, xl]. In this example, the first item (xs=8) takes 8/12 of the container width when the viewport width is between 0px and 600px. If no other breakpoints are specified, the xs will continue to apply on viewports that are larger than 600px. https://mui.com/material-ui/react-grid/ https://mui.com/material-ui/customization/breakpoints/#default-breakpoints
## <i class="fa-solid fa-boxes-stacked"></i> Stack (Layout) <img style=" margin:0; padding:0;margin-right:2rem;" src="./images/mui/stack2.PNG"> A simple layout component that manages immediate children. Stack is one-dimensional, while Grid is two-dimensional. You can specify the direction (`row` in this example), spacing and dividers between its children. https://mui.com/material-ui/react-stack/
## <i class="fa-solid fa-boxes-stacked"></i> Surfaces - Paper - Card - etc.
## <i class="fa-solid fa-boxes-stacked"></i> Paper (Surfaces) <img style="margin:0; padding:0;margin-right:2rem;" src="./images/mui/paper.PNG"> A basic container component with visible features. Used to group together UI elements that share common purpose. Come in different variants such as outlined, contained, and raised. You can also specify the elevation (shadow), and enable/disable rounded corners. https://mui.com/material-ui/react-paper/
## <i class="fa-solid fa-boxes-stacked"></i> Card (Surfaces) <img style="margin:0; padding:0;margin-right:2rem;" src="./images/mui/card.PNG"> Card is a container component that adds some extra structuring capabilities for its content (CardHeader, CardContent, CardActions, CardMedia). It uses Paper as a base component, all the props related to Paper are available. A Card can also be `raised`. https://mui.com/material-ui/react-card/
## <i class="fa-solid fa-boxes-stacked"></i> Data Display - Typography - List - Icons - etc.
## <i class="fa-solid fa-boxes-stacked"></i> Typography (Data Display) <img style="float: left; margin:0; padding:0;margin-right:2rem;" src="./images/mui/typography.PNG"> Typography is a text container component. It comes with a number of variants : 'body1' , 'body2' , 'button' , 'caption' , 'h1' , 'h2' , 'h3' , 'h4' , 'h5' , 'h6' , 'inherit' , 'overline' , 'subtitle1' , 'subtitle2' , string. `variantMapping` links a variant with a particular semantic element (html tag). `variantMappings` and styling can be changed globally using the theme. https://mui.com/material-ui/react-typography/
## <i class="fa-solid fa-boxes-stacked"></i> List (Data Display) <img style="margin:0; padding:0;margin-right:2rem;" src="./images/mui/list.PNG"> `List` is a container component that arranges its `items` vertically. `ListItem` is a component that can be used to render a single item in the list. You can place a component on the right-side of the `ListItem` by using `secondaryAction` prop or `ListItemSecondaryAction` container component as last child. https://mui.com/material-ui/react-list/ https://mui.com/material-ui/api/list-item/
## <i class="fa-solid fa-boxes-stacked"></i> Icons (Data Display) MUI comes with a library with over 2000 SVG icons by Google. Each SVG icon can be imported as a React component from `@mui/icons-material` package. To install the icons package : ``` npm install @mui/icons-material ``` https://mui.com/material-ui/icons/ https://mui.com/material-ui/material-icons/
## <i class="fa-solid fa-boxes-stacked"></i> Inputs - Button - Slider - etc.
## <i class="fa-solid fa-boxes-stacked"></i> Button (Data Display) <img style="margin:0; padding:0;margin-right:2rem;" src="./images/mui/button.PNG"> `Button` is a basic button component. You can specify its variants, colors and sizes. <br /><br /> `IconButton` is a button component that take an `Icon` as a child. It does not render any text and can be useful for toolbars. For buttons that have both icon and text, you can use `Button` and specify the `startIcon` prop. https://mui.com/material-ui/react-button/ https://mui.com/material-ui/api/icon-button/
## <i class="fa-solid fa-boxes-stacked"></i> Slider (Data Display) <img style="margin:0; padding:0;margin-right:2rem;" src="./images/mui/slider.PNG"> `Slider` is a component that allows you to select a single value from a range. You can specify the range using `min` and `max` props. Selection is continuous by default but can be discrete if you specify the `step` prop. <br /><br /><br /><br /><br /> Events : - onChange : fired when the value changes. - onChangeCommitted : fired when the value changes and the thumb is released. - etc.
## <i class="fa-solid fa-boxes-stacked"></i> `sx` property All MUI components are accepting the `sx` property. It is a shortcut to define inline styles. Most of the CSS properties, converted to **camelCase**, are available. `sx` have access to the theme variables. https://mui.com/system/getting-started/the-sx-prop/
React Router
## <i class="fa-solid fa-boxes-stacked"></i> React Router `react-router` is a library that provides routing functionality for React applications. It allows you to define routes and navigate between them, providing a clean and declarative way to manage the application's URL. `react-router` is platform-agnostic, which means it can be used in any environment that React supports, including the web, React Native, and server-side rendering (SSR) with Node.js. `react-router` is often used in conjunction with the `react-router-dom` package, which provides specific components for use in web applications built with React.
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom The react-router-dom package, which is a part of the React Router library, is designed to manage routing and navigation in single-page applications (SPAs). This means that it is responsible for handling the application's URL and rendering the appropriate components for the current location, without causing the page to reload. In order to do this, the react-router-dom package uses the HTML5 history API to keep track of the current URL and to manipulate the browser's history stack. This allows the application to maintain a seamless, app-like experience, even though it is only loading a single page from the server.
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom - Main components - Router - Route - Link
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom - Router This is the main component that is used to wrap your React application. It keeps track of the current location and renders the appropriate components for that location. ```javascript import React from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; function App() { return ( <Router> ... </Router> ); } ```
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom - Route This component is used to define a route in your application. It takes a path prop that specifies the URL path that the route should match, and a component prop that specifies which component to render when the route is active. ```javascript import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import HomePage from './components/HomePage'; import UserProfile from './components/UserProfile'; function App() { return ( <Router> <Route path="/" exact component={HomePage} /> <Route path="/users/:username" component={UserProfile} /> </Router> ); } ```
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom - Link 1/2 This component is used to provide navigation between routes in your application. It takes a "to" prop that specifies the target route, and renders a clickable element that the user can click on to navigate to the target route.
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom - Link 2/2 ```javascript function App() { return ( <Router> <Link to="/">Home</Link> <Link to="/users/johndoe">John Doe's Profile</Link> <Route path="/" exact component={HomePage} /> <Route path="/users/:username" component={UserProfile} /> </Router> ); } ```
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom - Access params You can access route parameters (such as URL path parameters) using the useParams hook. ```javascript import React from 'react'; import { useParams } from 'react-router-dom'; function UserProfile() { const { username } = useParams(); return ( <div> <h1>{username}'s Profile</h1> ... </div> ); } ```
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom - programmatically navigate You can use the useHistory hook to access the history object, which allows you to programmatically navigate to different routes. ```javascript import React from 'react'; import { useHistory } from 'react-router-dom'; function Button() { const history = useHistory(); function handleClick() { history.push('/users/johndoe'); } return ( <button onClick={handleClick}> Click me to navigate! </button> ); } ```
## <i class="fa-solid fa-boxes-stacked"></i> React-Router-Dom - sources - https://www.npmjs.com/package/react-router - https://reactrouter.com/en/main