Lab-2-3

(2.5% of the course mark)

React CSS Lab

• A hands-on lab exploring how to set up a React project with Vite and integrate popular CSS frameworks such as Bootstrap, Bulma, and Tailwind CSS and use Vite's built-in tools to build their project for production.

Lab objectives

• Install and configure Bootstrap, Bulma, and Tailwind CSS in a Vite project.

• Apply CSS framework classes to style React components.

• Build the project for production using npm run build.

Create basic React app

1. On VSCode, open the terminal and enter the following command:

npm create vite@latest react-css-app -- --template react

2. Clean up the project by doing the following:

• In the src folder, update main.jsx and remove the following code:

import "./index.css";

• In the src folder, update App.jsx and overwrite the contents by copying the following code:

// Developer:
// Purpose:

function App() {
  return <h1>First React App</h1>;
}

export default App;

• Delete the following:

  • Folder:

    • src/assets

  • File:

    • src/App.css

    • src/index.css

3. Open your browser and navigate to: http://localhost:5173, changes should be displayed immediately.

App Browser Output

• Ensure that you are able to see the latest changes in the browser after the project clean up.

• Do not not proceed to the next step until you have verified that the project is still working.

Add Bootstrap

1. In the terminal, install Bootstrap by running the following command:

npm install bootstrap

2. In the terminal, install Popper by running the following command:

npm install @popperjs/core

3. In the src folder, update main.jsx with the following css import statements:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

danger

Ensure this file has no other CSS imports besides the one above, as doing so may cause inconsistencies in the output.

4. In the src folder, update App.jsx with the following code.

function App() {
  return (
    <div className="container">
      <h1>Bootstrap Demo {`${new Date()}`}</h1>
      <div className="alert alert-primary" role="alert">
        alert alert-primary
      </div>
      <div className="alert alert-secondary" role="alert">
        alert alert-secondary
      </div>
      <div className="alert alert-success" role="alert">
        alert alert-success
      </div>
      <div className="alert alert-danger" role="alert">
        alert alert-danger
      </div>
      <div className="alert alert-warning" role="alert">
        alert alert-warning
      </div>
      <div className="alert alert-info" role="alert">
        alert alert-info
      </div>
      <div className="alert alert-light" role="alert">
        alert alert-light
      </div>
      <div className="alert alert-dark" role="alert">
        alert alert-dark
      </div>
    </div>
  );
}

export default App;

class vs className

In JSX, the attribute used to apply CSS classes is className instead of the standard HTML class attribute. This is because class is a reserved keyword in JavaScript (Used for defining classes in ES6) and since JSX is a syntax extension of JavaScript, using class directly would cause syntax errors.

5. In the terminal, run the following command:

npm run dev

6. Take a screenshot of the browser output and save it as react-bootstrap.png.

7. Press ctrl-c to stop the app.

8. In the terminal, start the build process by running the following command:

npm run build

9. Pay attention to the terminal output, it should display the app's bundle size. Take a screenshot and save it as react-build-bootstrap.png.

Add Bulma

1. In the terminal, install Bulma by running the following command:

npm install bulma

2. In the src folder, update main.jsx with the following css import statements:

import "bulma/css/bulma.min.css";

danger

Ensure this file has no other CSS imports besides the one above, as doing so may cause inconsistencies in the output.

3. In the src folder, update App.jsx and the following code:

function App() {
  return (
    <section className="section">
      <h1 className="is-size-1">Bulma Demo {`${new Date()}`}</h1>
      <div className="container">
        <div className="notification is-primary">notification is-primary</div>
        <div className="notification is-info">notification is-info</div>
        <div className="notification is-success">notification is-success</div>
        <div className="notification is-warning">notification is-warning</div>
        <div className="notification is-danger">notification is-danger</div>
        <div className="notification is-white">notification is-white</div>
        <div className="notification is-black">notification is-black</div>
      </div>
    </section>
  );
}

export default App;

4. In the terminal, run the following command:

npm run dev

5. Take a screenshot of the browser output and save it as react-bulma.png.

6. Press ctrl-c to stop the app.

7. In the terminal, start the build process by running the following command:

npm run build

8. Pay attention to the terminal output, it should display the app's bundle size. Take a screenshot and save it as react-build-bulma.png.

Add Tailwind

1. In the terminal, install Tailwind and Vite plugin by running the following command:

npm install -D tailwindcss @tailwindcss/vite

2. In the root of the app, update vite.config.js and add the following code:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. In the src folder, create a file named: style.css and add the following code:

@import "tailwindcss";

4. In the src folder, update main.jsx with the following css import statements:

import "./style.css";

danger

Ensure this file has no other CSS imports besides the one above, as doing so may cause inconsistencies in the output.

5. In the src folder, update App.jsx with the following code:

function App() {
  return (
    <div className="m-4">
      <h1 className="mb-2 text-3xl font-bold">
        Tailwind Demo {`${new Date()}`}
      </h1>

      <div className="mb-2 px-4 py-3 rounded bg-blue-100 border border-blue-300 text-blue-900 text-sm">
        mb-2 px-4 py-3 rounded bg-blue-100 border border-blue-300 text-blue-900
        text-sm
      </div>

      <div className="mb-2 px-4 py-3 rounded bg-green-100 border border-green-300 text-green-900 text-sm">
        mb-2 px-4 py-3 rounded bg-green-100 border border-green-300
        text-green-900 text-sm
      </div>

      <div className="mb-2 px-4 py-3 rounded bg-yellow-100 border border-yellow-300 text-yellow-900 text-sm">
        mb-2 px-4 py-3 rounded bg-yellow-100 border border-yellow-300
        text-yellow-900 text-sm
      </div>

      <div className="mb-2 px-4 py-3 rounded bg-red-100 border border-red-300 text-red-900 text-sm">
        mb-2 px-4 py-3 rounded bg-red-100 border border-red-300 text-red-900
        text-sm
      </div>

      <div className="mb-2 px-4 py-3 rounded bg-gray-100 border border-gray-300 text-gray-900 text-sm">
        mb-2 px-4 py-3 rounded bg-gray-100 border border-gray-300 text-gray-900
        text-sm
      </div>

      <div className="mb-2 px-4 py-3 rounded bg-indigo-100 border border-indigo-300 text-indigo-900 text-sm">
        mb-2 px-4 py-3 rounded bg-indigo-100 border border-indigo-300
        text-indigo-900 text-sm
      </div>
    </div>
  );
}

export default App;

class vs className

In JSX, the attribute used to apply CSS classes is className instead of the standard HTML class attribute. This is because class is a reserved keyword in JavaScript (Used for defining classes in ES6) and since JSX is a syntax extension of JavaScript, using class directly would cause syntax errors.

6. In the terminal, run the following command:

npm run dev

7. Take a screenshot of the browser output and save it as react-tailwind.png.

8. Press ctrl-c to stop the app.

9. In the terminal, run the following command:

npm run build

10. Pay attention to the terminal output, it should display the app's bundle size. Take a screenshot and save it as react-build-tailwind.png.

Submission

1. Create a folder named submit.

Delete node_modules

Delete the node_modules folder on any app that you are submitting.

2. Copy the react-css-app and all the screenshots (react-bootstrap.png, react-build-bootstrap.png, react-bulma.png, react-build-bulma.png, react-tailwind.png, and react-build-tailwind.png.) to the submit folder.

3. Create a zip file of the submit folder.

4. Navigate back to where the lab was originally downloaded, there should be a Submissions section (see below) where the zip file can be uploaded.