Creating a React-Based Project

In this chapter, we will learn to set up a React project.

Facebook (Meta) has developed a toolchain called create-react-app that easily creates a single-page React application.

It is perfect for developing single-page applications and for learning React so we will be using it in this course.

If you haven't already installed Node.js, you'll need to download and install Node.js from the official website.

Once downloaded, we will cd into an appropriate directory where we want to create the project and run the following command:

Where <app name> should be replaced with the application name. We will create a new app called webapp:

If create-react-app is not installed on your PC, it will automatically prompt you to install it:

You can press y and Enter to proceed, and it will automatically install it for you. It will continue setting up the project, and when it's done, it should look something like this in the console:

This means that the project is now all setup and ready to use. There should be a folder called webapp in the current directory. It should have the following contents:

Inside the console, we will use the cd command to move into the webapp directory, and then start the app, we will use the command npm start. This will start a node server hosting our React project at port 3000 and address 127.0.0.1 or localhost. In most cases, it will automatically open a browser window or tab with the website open, and if not, then we can type this address in the browser to view the app: localhost:3000.

To stop the application, we can go back to the console, press CTRL + C, and enter Y. In the next chapter, we will explore the structure of this React application in detail.

Everything was clear?

Section 3. Chapter 3

Course Content

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params