2024

React Js
Router, React Bootstrap, Tailwind
CSS

© 2024 Celerates CELERATES.CO.ID

 2024

Content

React Router

React Bootstrap

React Tailwind

© 2024 Celerates CELERATES.CO.ID

 2024

React Router

© 2024 Celerates
1
CELERATES.CO.ID
 2024

React Router

The fundamental concept of routing in web applications

refers to the ability to navigate between various pages or
views within an application.

By using React Router, we can define routes that will

dictate how our components are displayed based on the
URL visited by the user.

© 2024 Celerates CELERATES.CO.ID

 2024

Install React Router

npm install react-router-dom

It will appear in the dependencies

in the package.json file.

© 2024 Celerates CELERATES.CO.ID

 2024

Basic Usage

▪ <BrowserRouter>: Provides routing functionality to a React application using the HTML5

History API.

▪ <Route>: Specifies how a component will be rendered based on the matching URL

address.

▪ <Routes>: It is used to wrap all routes in the React application.

▪ <Link>: Creates hyperlinks between pages within a React pplication, replacing the

traditional <a> tag for smoother navigation.

© 2024 Celerates CELERATES.CO.ID
 2024

Basic Usage

© 2024 Celerates CELERATES.CO.ID

 2024

Parameters and Query Strings

Handling dynamic parameters in the URL. Using the syntax
/:parameterName

© 2024 Celerates CELERATES.CO.ID

 2024

Parameters and Query Strings

Using query strings in React Router.

© 2024 Celerates CELERATES.CO.ID

 2024

Advanced Featurs

▪ Nested Routing: Handling nested

routes.

▪ Redirects: Redirecting users to other pages

using the <Navigate /> component.

▪ NotFoundPage: Displaying a page when a

route is not found.

© 2024 Celerates CELERATES.CO.ID

 2024

React Bootstrap

© 2024 Celerates
2
CELERATES.CO.ID
 2024

React Bootstrap

React-Bootstrap is a replacement for Bootstrap

specifically designed for React.

▪ Good Integration with React

▪ Reusable Components

▪ Easy and Responsive Usage

▪ No Dependency on jQuery or bootstrap.js

© 2024 Celerates CELERATES.CO.ID

 2024

Install React Bootstrap

npm install react-bootstrap bootstrap

then import it in the root file (main.jsx)

© 2024 Celerates CELERATES.CO.ID

 2024

Usage of React Bootstrap Components

React Bootstrap Components

Import { Badge, Button, Alert, Card }

from “react-bootstrap”;

© 2024 Celerates CELERATES.CO.ID

 2024

React Tailwind

© 2024 Celerates
3
CELERATES.CO.ID
 2024

Tailwind CSS

Tailwind CSS is a CSS framework that aims to

provide utility classes that can be used directly in
HTML to build consistent and fast user interfaces
(UIs).

▪ Easy Customization

▪ Focus on Performance

▪ Consistent Design

© 2024 Celerates
▪ Flexibility
CELERATES.CO.ID
 2024

Install and Config React Tailwinds

With React Vite
https://tailwindcss.com/docs/guides/vite
▪ npm install -D tailwindcss postcss

▪
autoprefixer
npx tailwindcss init -p

▪ Add in the tailwind.config.js file

▪ Add in the root CSS file:

© 2024 Celerates CELERATES.CO.ID

 2024

Basic Usage

Utility-first classes

© 2024 Celerates CELERATES.CO.ID

 2024

Any question?

© 2024 Celerates CELERATES.CO.ID

 2024

© 2024 Celerates CELERATES.CO.ID

 2024

References for self-study:

React Router

https://www.youtube.com/watch?v=oTIJunBa6MA&t=230s

React Bootstrap
https://www.youtube.com/watch?v=8pKjULHzs0s

Tailwind Css
https://www.youtube.com/watch?v=z3slaXqmkT0&list=PLFIM0718LjIUHFRMzPJ0wGjx9_
NlC5d1h

© 2024 Celerates CELERATES.CO.ID

 2024

GUIDING RESOURCE
https://reactrouter.com/

https://react-bootstrap.netlify.app/docs/getting-started/introduction

https://tailwindcss.com/docs/guides/vite

https://tailwindcss.com/docs/installation

© 2024 Celerates CELERATES.CO.ID