6 lessons

Coding the Web - The Basics

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.

Lesson 6

React

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

Or "how to add image React" will give you this StackOverflow answer.

Components

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.

Components

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.

Props

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

Hooks

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

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

Looking forward to meeting you.

Email us now at
info@raidoninc.com

433 Broadway Suite 404, New York, NY 10012

© 2022 Raidon Inc. LLC. - Build The Future, All Rights Reserved.