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
