Exploring React Bootstrap: Building Responsive UI Components

[aa1588]

Related to User Story #1

Description: This task involves researching and understanding how to implement React Bootstrap for building responsive and styled UI components in a React application. The goal is to explore how React Bootstrap can simplify the process of creating flexible layouts and pre-styled elements such as buttons, forms, modals, and more. The outcome will include a basic implementation of a responsive layout and interactive components using React Bootstrap.

[aa1588]

@manojsaibangaru Please explore how to use React Bootstrap in a react project? And share your learning here.

[manojsaibangaru]

Hi Guys,

I worked on researching and understanding how to implement React Bootstrap for building responsive and styled UI components in a React application.

I documented How to "Set Up a Basic React App", "Installed React Bootstrap and Import Bootstrap CSS", "Built a Simple Button Layout".

Exploring React Bootstrap.pdf

Here are my findings on building multiple layouts in React:

Since our project have multiple layouts like navigation bar, wishlist, categories we will built separate layouts for each of them and put them in the App.js file.

we will use React Router's Route and Switch components to define different layouts for different routes.

I will do complete research on multiple layouts, how can we use them in our project.

[aa1588]

@manojsaibangaru

1. can you share the libraries/commands you used for working with react bootstrap
2. How did you use react-bootstrap (any import statements? where did you import ?)
3. Attach screenshots here (Do not attach pdf).

[manojsaibangaru]

Okay, Amrit. Will do.

[aa1588]

Installation Install React Bootstrap: “npm install react-bootstrap bootstrap”

Import Statements Import Bootstrap: import 'bootstrap/dist/css/bootstrap.min.css

How to use React-Bootstrap in a react component ? import {Button} from 'react-bootstrap'

[manojsaibangaru]

Create a new React app: Open terminal and run the following command:

I ran this command “npx create-react-app react-bootstrap-app” This will create a new React project.

Install React Bootstrap: Once the project is created, navigate into your project directory: Command: “cd react-bootstrap-app”

Then, install React Bootstrap and Bootstrap CSS by running: Command: “npm install react-bootstrap bootstrap”

Import Bootstrap CSS: Open src/index.js or src/App.js and

import the Bootstrap CSS to apply global Bootstrap styles: import 'bootstrap/dist/css/bootstrap.min.css';