Check project status.

In this course:

In this course we will discuss the basics of the technologies that power the modern web. We will cover the basics of HTML and Typescript.
6 Lessons|12 Minute Read
Coding the Web - The Basics



In this lesson we will cover the basics of React, a Javascript library for building user interfaces.
First, you should read the article Thinking in React
Then you can open VSCode (a code editor), navigate to a folder where you'd like to start the project can start a NextJS (a framework built on React to make some things easier to do) project with the command:
npx create-next-app@latest --typescript
In general, the React Docs and the NextJS docs are very good and will answer a majority of your questions. If you are stuck, type your question into google followed by the technologies you are using. For example: "how to sort an array Typescript" will give you this result.
array sort
array sort
Or "how to add image React" will give you this StackOverflow answer.


A component is a reusable code block that helps an engineer break up the application UI into smaller pieces. Take a common dashboard application, there will be components for the header, page heading, and maybe a table to show some data with pagination and sidebar navigation.
When built properly, breaking a UI down into subcomponents helps reduce the amount of data an engineer needs to consume in order to construct the UI. This way, you can create a re-useable component and only think about the data that makes each component different. If we were tasked to build the screen below, we would first break down the screen into some high-level components.
Sub Components
Sub Components
Then for each re-useable sub-component, we write code that will be able to render that component taking in any data it may require. For example, if we focus on the side navigation. We can build a reusable component for each navigation item and call it NavItem. Since each navigation item varies in its label text and icon, we build the NavItem component in a way that accepts the text and icon as parameters (called props in React land).
Sub Component
Sub Component

Headless Components

There are many similarities between different applications. And while each app might look different, it functions very similarly. Using Headless Components allows us to use other developers' work to handle the functionality of a component while we specify how that component looks. Here is a good list of React Headless Components.

Sharing Data between Components

There are two main ways components can share data. The first way is through props. Props allow a parent component to share data with a child component.
The second way components can share data is with services. If you need to share data between two different components that are not children, you will want to use a service, sometimes called a store.
Imagine we want some user action that happens in the paginator of the table to update the heading. Here's a working example. You will see two components a PageHeading and a simple Paginator component. The Pagnitor component imports the paginator store so that it can update the page number with prev and next functions. The PageHeading component also imports the paginator store which allows it to display which page is current. That way both components can stay up to date.
Component communication
Component communication


Hooks are functions that let you "hook into" React state and lifecycle features. React provides several built-in hooks like useState, useEffect, and useMemo. You can create your own Hooks to reuse behavior between different components.

Use Effect Hook

The useEffect Hook is used to synchronize your React app with a server. It runs after React makes changes to the DOM. You can tell React to only run the effect if a variable in the dependency array changes.
useEffect(()=>{ document.title =`You clicked ${count} times`;},[count]);// Only re-run the effect if count changes


State is a word to represent any data changes in an application. There are many different technologies to manage the state of your application. The most common problem when managing state is synchronizing the server state and the application state. For this problem, we use React Query. A good guide to practical react query can be found here.
To handle the global client-side state of your application (state shared between components) we use Zustand.
Course Complete
Interested in learning more about design?
The Lab

Our Library

433 Broadway Suite 404 New York, NY 10012
+1 (332) 333-2855
© 2024 Raidon.