Skip to main content

Lab 3: Styles Using CSS

Objectives​

  • Install CSS
  • Apply CSS

Steps​

Install CSS​

  1. Open a new command prompt (Windows) or terminal (Mac) window.

    ! Be sure to open a new window. Leave npm start running.

  2. Run one of the following commands:

    npm​

    npm install mini.css@3.0.1

    Yarn​

    yarn add mini.css@3.0.1

    Warnings can be ignored but Errors indicate there was a problem.

  3. Verify mini.css was added as a dependency of the project in package.json.

    \package.json​

    {
    "name": "keeptrack",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      ...
    +   "mini.css": "~3.0.1",
      "react": "^16.9.0",
      "react-dom": "^16.9.0",
      "react-scripts": "3.1.1"
      ...
    },
    ...
    }

Apply CSS​

  1. Open and delete the contents of app.css

  2. Open the file app.tsx.

  3. Delete the JSX returned and replace with the HTML as shown below.

    src\App.tsx​

    import React from 'react';
    - import logo from './logo.svg';
    import './App.css';

    function App() {
      return (
    -     <div className="App">
    -      <header className="App-header">
    -        <img src={logo} className="App-logo" alt="logo" />
    -        <p>
    -          Edit <code>src/App.tsx</code> and save to reload.
    -        </p>
    -        <a
    -          className="App-link"
    -          href="https://reactjs.org"
    -          target="_blank"
    -          rel="noopener noreferrer"
    -        >
    -          Learn React!!
    -        </a>
    -      </header>
    -    </div>

    +    <blockquote cite="Benjamin Franklin">
    +      Tell me and I forget, teach me and I may remember, involve me and I learn.
    +    </blockquote>
      );
    }

    export default App;

  4. Open the file src\index.css

  5. Delete the current contents of the file.

  6. Import the stylesheet you installed.

    src\index.css​

    @import '../node_modules/mini.css/dist/mini-default.min.css';

    Alternatively, you could choose a dark theme: mini-dark.min.css or a nordic theme: mini-nord.min.css

  7. Verify you see the following output in the browser

    image

Mini.css is a minimal, responsive, style-agnostic CSS framework. Mini.css is similar to Bootstrap but lighter and requires fewer CSS classes so you can focus on learning React but still get a professional look.

✔ You have completed Lab 3​