Activity: Design Systems in React

1. Setup

1. Open your entire csci344 folder in VS Code.

2. Download and unzip the starter code:

   Design Systems Starter Code

3. Save the design-systems folder inside of `csci344/lectures.
4. From the command line, navigate into yourdesign-systems folder. You can also open the VS Code Integrated terminal.
5. Verify that you’re in the correct folder by typing pwd

6. Issue the following commands

    npm install
   

   This will install all of the dependencies needed to run your react app.

7. Next, run the npm run dev command on the command line to start your react app. When you do, you should see the following output:

    **VITE** v5.2.6  ready in **307** ms
    ➜  **Local**:   http://localhost:**5173**/
    ➜  **Network**: use **--host** to expose
    ➜  press **h + enter** to show help
   

8. Finally, navigate to http://localhost:5173/ in your web browser. You should see a web page. If you open the browser console, you should see a minimally styled page that has the text “Design Systems Test”.

2. Download and Configure the Ant Design System Dependencies

1. Navigate back to your command line and stop the server (usually you can do this by clicking in the terminal and typing Ctrl+C or Ctrl+D).

2. Install the antd design system as follows:

    npm install antd
   

   This will install the Ant Design System in your node_modules folder.

3. Next, try using your first antd component – the antd Image component – by first importing it at the top…

    // at the top:
    import {Image} from 'antd';
   

   …and then adding the following component instances inside of the <main>...</main> tag:

    <h2 className="font-Comfortaa my-4 font-bold text-xl">
        Photo Gallery
    </h2>
    <div className="flex flex-wrap content-start">
        <Image
            src="https://picsum.photos/600/600?id=1"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=2"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=3"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=4"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=5"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=6"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=7"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=8"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=9"
            width={200}
        />
        <Image
            src="https://picsum.photos/600/600?id=10"
            width={200}
        />
    </div>
   

4. Finally, restart your react app and see what happens: npm run dev

Why are design systems useful?

• Consider how much time this Image component saves, and how it enforces consistency across your site.
• You could also develop your own custom design system if you enjoy this kind of thing!

3. Experiment with some of the other widgets

Now that you have used your first design system component, take a look at the Ant Design documentation and see what else you can make! Some fun components to get started with…