Your First React.js App in 2024
React

Your First React.js App in 2024

2024-03-20
10 min read

Your first React.js App in 2024

React.js Setup Tutorial

Photo by Caspar Camille Rubin on Unsplash

This tutorial focuses on creating a basic React.js web app.

Install Visual Studio Code(Optional)

We need the terminal or command prompt to create our react app. To make it easier, we can install Visual Studio Code, since it comes prebuilt with one. You can download it using the link below. Visual Studio Code - Code Editing. Redefined

To open the terminal with Visual Studio Code, go to the terminal menu, and click “New Terminal”.

Install Node.js

If you don’t have node already installed on your system, you will need to do so. Go to this link and download the installer for your system. Run the installer after you download it. Now you are ready to create your first React.js app. Download | Node.js

Create the React app

Next we will create the react app. Think of what you want to call your app. In this example I’m naming my app “social-media”. So let’s start by opening the terminal or command prompt for your system and typing this:

npx create-react-app social-media

Now press enter. This will start the creation of your react app. This may take awhile to build.

Run the React app

Now that has finished building we need to go to the folder the project is in, which will be named after the name you gave it. So in my example, it will be “social-media”. So in your terminal type:

cd social-media

Now we can run the app using this command:

npm start

Now the app should open automatically in your browser. If not go the this address in your browser:

[http://localhost:3000/](http://localhost:3000/)

Here is the link to the React.js documentation as well: Create a New React App - React

Congratulations! You have created your first React.js app!