Before diving in, let’s understand what React is. React is a JavaScript library (a collection of code that helps build things) that makes it easier to design parts of a website. With React, you build small, reusable pieces of a website, like buttons, menus, or forms, that can be easily put together to make a full webpage.

Overview:

What’s a Component?

Think of a component as a building block. Just as LEGO bricks combine to create a complex structure, components join together to form a website. A Navbar, for example, is a component that houses links to various pages on the site.

  1. Inside your \\root folder there’s an \\src folder. Inside the src folder, we want to create a folder called components. This will hold the individual parts (or components) you create.
  2. <insert picture of the vs code file tree>
  3. In the components folder, create a new file called Navbar.jsx. This file will contain all of the information regarding our navbar component.

Some Useful Shortcuts:

Reformatting your code using Prettier: alt+shift+f

Moving a block of code up or down without copy and pasting: alt + ↑ / alt + ↓

This is especially useful when you want to create an outer HTML component that will contain your block of code.

  1. Highlight the section
  2. alt + direction

image.png

image.png

image.png

Challenge 1: How do we create a React component?

A react component is a singular piece of UI. It contains JavaScript functions that return an HTML element.

// Navbar.jsx
import React from "react";

function Navbar() {
  return <div>Ripple & Refresh</div>;
}

export default Navbar;

Main Takeaway