Creating a React app with Bootstrap installed by default is straightforward! Here’s a step-by-step guide to do it in the Ubuntu terminal:

---

Step 1: Install Node.js and npm

React requires Node.js and npm (Node Package Manager). If you don’t already have them installed, run:

sudo apt update
sudo apt install nodejs npm

Verify the installation:

node -v
npm -v

---

Step 2: Create a React App

Use create-react-app to set up a new React project. Run:

npx create-react-app my-react-app

Replace my-react-app with your desired project name.

---

Step 3: Navigate to the Project Directory

Move into the project folder:

cd my-react-app

---

Step 4: Install Bootstrap

Install Bootstrap using npm:

npm install bootstrap

---

Step 5: Import Bootstrap in Your React App

Open the src/index.js or src/App.js file and add the following line at the top to import Bootstrap:

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

This imports the Bootstrap CSS file into your project.

---

Step 6: Run the React App

Start the development server to see your app in action:

npm start

Your app will open in the browser at http://localhost:3000.

---

Step 7: Verify Bootstrap is Working

To test if Bootstrap is working, replace the content of src/App.js with this simple Bootstrap-styled component:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="container mt-5">
      <h1 className="text-primary">Hello, Bootstrap in React!</h1>
      <button className="btn btn-success">Click Me</button>
    </div>
  );
}

export default App;

Save the file, and you should see a Bootstrap-styled heading and button in your browser.

---

Optional: Install React-Bootstrap (Advanced)

If you want to use React-Bootstrap (a library that provides Bootstrap components as React components), you can install it:

npm install react-bootstrap

Then, import components like this:

import Button from 'react-bootstrap/Button';

---

Summary

1. Install Node.js and npm.
2. Create a React app using create-react-app.
3. Install Bootstrap with npm install bootstrap.
4. Import Bootstrap’s CSS in index.js or App.js.
5. Run the app with npm start.

That’s it! You now have a React app with Bootstrap installed and ready to use. Let me know if you need further assistance! 🚀