Getting Started with React: Creating a New Project and Running it in Development Mode

Explore how to create a new React project and run it in development mode.

React is a popular JavaScript library for building user interfaces, and it allows developers to use JSX, a syntax that combines HTML tags within JavaScript code.

 

Step 1: Creating a New Project To create a new React project

Open your terminal or command prompt and use the following command:

npm init react-app .

The period (.) at the end of the command signifies that the project will be generated in the current directory.

Step 2:  Running the Project in Development Mode
After the project is created, navigate to its root directory using the terminal and execute the following command:

npm run start

Press Enter, and this will start the development server. Once the server is up and running, The default web browser will automatically open, displaying your newly created React project.

In development mode, React enables hot reloading, which means that any changes you make to the code will be instantly saved and reflected in the browser without having to manually refresh the page.

[Understanding JSX]
In React, you write your UI components using JSX, which is a syntax extension that allows you to mix HTML-like tags directly within your JavaScript code. This declarative approach makes it easier to describe how your user interface should look based on the component's state and props.

Step 4: Exiting Development Mode
To exit the development mode, go back to the terminal and use the following key combination:

Ctrl + C

After pressing Ctrl + C, you will notice that the development server stops running, and your React application will no longer be accessible through the browser.