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.

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.

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).

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.

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.

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.

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.

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.