Install Node.js and npm from nodejs.org

node -v
npm -v

Option A: Vite (Recommended)

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Option B: Create React App

npx create-react-app my-react-app
cd my-react-app
npm start

          my-react-app/
│
├── public/
│   └── index.html          ← Main HTML template
│
├── src/
│   ├── assets/             ← Images, icons, etc.
│   ├── components/         ← Reusable components
│   ├── pages/              ← Page-level components
│   ├── App.jsx             ← Main app component
│   ├── main.jsx            ← App entry point
│   └── styles/             ← Global styles (optional)
│
├── package.json
├── .gitignore
└── README.md

        

Install and import Bootstrap:

npm install react-bootstrap bootstrap

Then import in main.jsx:

import 'bootstrap/dist/css/bootstrap.min.css';

src/components/CardComponent.jsx

          import React from 'react';
          import { Card } from 'react-bootstrap';
          
          const CardComponent = ({ title, description }) => {
            return (
              <Card className="mb-3 shadow-sm">
                <Card.Body>
                  <Card.Title>{title}</Card.Title>
                  <Card.Text>{description}</Card.Text>
                </Card.Body>
              </Card>
            );
          };
          
          export default CardComponent;
          

ssrc/pages/Home.jsx

          import React from 'react';
          import CardComponent from '../components/CardComponent';
          
          const Home = () => {
            return (
              <div className="container mt-4">
                <h2>Welcome to React Learning</h2>
                <CardComponent 
                  title="Learn React" 
                  description="Covers JSX, components, props, state, hooks, and interview prep." 
                />
                <CardComponent 
                  title="Learn Bootstrap" 
                  description="Covers grid system, components, utilities, and responsive design." 
                />
              </div>
            );
          };
          
          export default Home;
          

src/App.jsx

          import React from 'react';
          import Home from './pages/Home';
          
          const App = () => {
            return <Home />;
          };
          
          export default App;
          

For Vite:

npm run dev

For CRA:

npm start

Then open: http://localhost:5173 or http://localhost:3000