Create a component

Contents

• Step 1: create the file
• Step 2: add the starter React element code
• Step 3: add the styles file
• Step 4: link the styles file

Steps to create a component

Step 1: create the file

To create a new component, the file must be added in client/components/. All components are React elements (hence the .jsx file extension).

First, think of a name for your component. Please use a singular form (aka tag not tags, header not headers).

Now, create a file with the name of the component. Make sure it has the .jsx file extension. Add it into the client/components/ folder. For example, the nav element is in client/components/nav.jsx.

Step 2: add the starter React element code

Inside the file, we want to setup the basic code for a React element. Copy the following code into your component file:

import styles from "";

export default function Component() {
  return ();
}

Next, change the name for the component function to the name of your component. For example, the nav component would have export default function Nav().

Step 3: add the styles file

To style your component, you need to add a CSS file. This goes inside the client/styles/ folder.

Create a file with the name of the component followed by .module.css. For example, the nav element is in client/styles/Nav.module.css.

Step 4: link the styles file

Go back to the component file (your_component_name.jsx). In the first line, this is where we link the styles. Add the path to the styles file. For example, this is what it would be for the nav component:

import styles from "../styles/Nav.module.css";