React Router
React Router is a library that enables routing in React applications, allowing you to define routes and navigate between different views or pages within a single-page application (SPA). You can install React Router using npm or yarn:
npm install react-router-dom
# or
yarn add react-router-dom
Note: React Router provides components like BrowserRouter, Route, and Link for setting up routing in your application.
- Router: The
<Router>
component from React Router v6 (imported asBrowserRouter
here) wraps the entire application, providing the routing functionality. - Link: The
<Link>
component is used for navigation. It renders as an anchor tag (<a>
) and changes the URL without causing a full page reload, providing a seamless navigation experience. - Routes and Route: In React Router v6, we use
<Routes>
and<Route>
components to define routes. Each<Route>
component within<Routes>
specifies a path and the corresponding component to render when that path matches. Theelement
prop is used to specify the component to render.
import {
BrowserRouter as Router,
Routes, Route, Link
} from 'react-router-dom';
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const App = () => (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
export default App;
Output:
Getting Started with React
ReactJS, often referred to as React, is a popular JavaScript library developed by Facebook for building user interfaces. It emphasizes a component-based architecture, where UIs are built using reusable components. React uses a declarative syntax to describe how UIs should look based on their state, simplifying development and enhancing code readability.
React also utilizes a virtual DOM to optimize rendering performance by minimizing actual DOM manipulations. React’s unidirectional data flow and rich ecosystem of libraries and tools have made it a go-to choice for frontend development, especially in building single-page applications (SPAs).
Table of Content
- Why ReactJS ?
- Setting Up Your Development Environment
- Understanding React Components
- Creating Your First React Component
- JSX (JavaScript XML)
- Working with Props and State
- Handling Events:
- Conditional Rendering
- Lists and Keys
- Styling React Components
- Introduction to React Hooks
- Building a Simple React Application
- Component Lifecycle
- React Router
- Managing State with Context API