Rishit Week 6

react router
React Router is a library for handling navigation in React applications. It enables you to create a
single-page web application with navigation without the need for a full page refresh. React Router
provides a set of components that allow you to define how your application's UI should change in
response to a change in the URL.
Here are some key concepts and components in React Router:
1.BrowserRouter: This component uses the HTML5 history API to keep UI in sync with the URL.
2.Route: It is used to render content based on the URL. You define a route with a path and a
component that should be rendered when the path matches.
jsx code
import { Route } from 'react-router-dom';
// Example
<Route path="/home" component={Home} />
Link: This component is used to create links to different routes in your application. It prevents a full
page reload when the link is clicked and updates the URL using client-side routing.
jsx code
import { Link } from 'react-router-dom';
// Example
<Link to="/home">Go to Home</Link>
Switch: It renders the first Route or Redirect that matches the current location. This is useful when
you want to render only the first matching route.
jsx code
import { Switch, Route } from 'react-router-dom';
// Example
<Switch> <Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
Redirect: It renders a redirect to another route. This is useful for programmatically navigating to
another route.
Jsx code
import { Redirect } from 'react-router-dom';
// Example
<Redirect from="/old-path" to="/new-path" />
React Router provides a flexible and declarative way to handle navigation in your React applications,
making it easier to create complex single-page applications with dynamic UI updates based on the
URL. It's widely used in the React ecosystem for building modern web applications.
React Hooks are functions that allow functional components in React to manage state and side
effects. Before the introduction of hooks, state and lifecycle methods were primarily handled in class
components. However, hooks provide a more concise and functional way to achieve the same, and
they were introduced in React version 16.8.
Here's an introduction to some of the commonly used React Hooks:
1.useState:
Purpose: Manages local state in functional components.
Example:
import React, { useState } from 'react';
function ExampleComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}> Click me </button>
</div> );
2.useEffect:
Purpose: Performs side effects in functional components. It replaces lifecycle methods like
componentDidMount, componentDidUpdate, and componentWillUnmount.
Example:
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
const [data, setData] = useState([]);
useEffect(() => {
// Fetch data or perform other side effects
fetchData().then((result) => setData(result));
}, []);
// Empty dependency array means this effect runs once after the initial render return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
useContext:
Purpose: Allows you to subscribe to React context without introducing nesting. It lets you consume
the value of a context within a function component.
Example:
import React, { useContext } from 'react';
import MyContext from './MyContext'; function ExampleComponent() { const contextValue =

useContext(MyContext); return <p>{contextValue}</p>; }
useReducer:
Purpose: A more advanced alternative to useState. It is typically used when the next state depends
on the previous one and when state logic is complex.
Example:
jsxCopy code
import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state,
action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement':
return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state,
dispatch] = useReducer(reducer, initialState); return ( <div> Count: {state.count} <button onClick={()
=> dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type:
'decrement' })}>-</button> </div> ); }
These hooks enable developers to write more modular and readable code, making it easier to
manage state and side effects in functional components. They have become a standard and powerful
way to build React applications.

Rishit Week 6

Uploaded by

Copyright:

Available Formats

Rishit Week 6

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rishit Week 6

Uploaded by

Copyright:

Available Formats

react router

Here are some key concepts and components in React Router:

import { Route } from 'react-router-dom';

<Route path="/home" component={Home} />

import { Link } from 'react-router-dom';

<Link to="/home">Go to Home</Link>

import { Switch, Route } from 'react-router-dom';

<Switch> <Route path="/home" component={Home} />

<Route path="/about" component={About} />

<Redirect from="/old-path" to="/new-path" />

Here's an introduction to some of the commonly used React Hooks:

import React, { useState } from 'react';

const [count, setCount] = useState(0);

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}> Click me </button>

import React, { useState, useEffect } from 'react';

const [data, setData] = useState([]);

// Fetch data or perform other side effects

fetchData().then((result) => setData(result));

import React, { useContext } from 'react';

import MyContext from './MyContext'; function ExampleComponent() { const contextValue =

You might also like