ReactJS Tutorial

ReactJS: downloading, Installation and Creating First ‘HelloWorld’ App

Introduction:

Are you ready to embark on an exciting journey into the world of web development with ReactJS? Whether you’re a beginner taking your first steps into the realm of front-end frameworks or an experienced developer seeking to expand your skill set, you’ve come to the right place.

In this tutorial, we’ll guide you through the process of installing ReactJS and creating your very first “HelloWorld” application using npx(Node Package Execute). ReactJS has rapidly become one of the most popular JavaScript libraries for building dynamic and interactive user interfaces. Its component-based architecture, reusability, and virtual DOM make it a powerful tool for crafting modern web applications.

But don’t worry, you don’t need to be a coding wizard to follow along. We’ll break down the installation process into easy-to-follow steps, and by the end of this tutorial, you’ll have a solid foundation to start building your own React applications.

Before you can start creating applications with ReactJS, you’ll need to set up your development environment. React applications are typically built using Node.js and a package manager like npm (Node Package Manager). Here’s how you can get started with installing ReactJS:




Installation:

First, search “node.js install” on Google

ReactJS downloading Installation

and click on the official Node.js website link.ReactJS downloading Installation

Depending on your operating system, download Node.js. For Windows, I’ve used the Windows installer to download Node.js.

ReactJS downloading Installation

Start the download and wait for the process to complete.

ReactJS downloading Installation



After Node.js is downloaded, click on the “Open” button.

ReactJS downloading Installation

Once opened, the Node.js setup wizard will appear. Click the “Next” button.

ReactJS downloading Installation

Check the license agreement box and click the “Next” button.

ReactJS downloading Installation

Choose the installation directory and click the “Next” button.

ReactJS downloading Installation

Select the Node.js runtime options and click the “Next” button.

ReactJS downloading Installation



In the final step, if you want to install necessary tools automatically, check the “Automatically install necessary” checkbox. Otherwise, leave it unchecked and click the “Next” button.

ReactJS downloading Installation

Click the “Install” button to start the Node.js installation process. Wait for the installation to complete.

ReactJS downloading Installation

ReactJS downloading Installation

Once the installation process is finished, you may want to verify whether Node.js has been successfully installed. To do this, open the command prompt.

In the command prompt, you can check the version of Node.js by entering the command “node –version.” Similarly, to check the version of npm (Node Package Manager), input the command “npm –version.” As you can see in the below image

ReactJS downloading Installation



Creating First ReactJS app:

To create a ReactJS application, begin by setting up a project directory and naming a new folder within it as “helloWorld.”

ReactJS downloading Installation

Open this folder using the Visual Studio Code (VS Code) editor.

ReactJS downloading Installation

Inside VS Code, open the integrated terminal. Next, initiate the React application setup by typing the command

and pressing Enter.

ReactJS downloading Installation




This command will trigger the creation of a React app named “hello-world-app” using the “create-react-app” package. During this process, required packages will be downloaded from the internet, so be patient.

ReactJS downloading Installation

After the downloads are complete, navigate to the “src” folder within the newly created “hello-world-app” directory. Open the “App.js” file found here and remove its default code.

ReactJS downloading Installation

Replace the default code with the below code and save the project

ReactJS downloading Installation



Once this code is in place, return to the terminal and navigate to the root directory of your project with the command.

 

ReactJS downloading Installation

Once you’re in your root folder, type ‘npm start’ in the terminal to start the server.

ReactJS downloading Installation

Wait a moment for the server to start.

ReactJS downloading Installation

Our server has started at localhost:3000, and you can see the output

ReactJS downloading Installation



I made a small change in the code by replacing ‘Hello world’ with ‘Hello Programming Digest’ and saved the code.

ReactJS downloading Installation

The browser will automatically update to show your changes.

ReactJS downloading Installation

Congratulations! You’ve successfully installed ReactJS, created a basic “Hello World” application, and previewed it in your browser. This is just the beginning of what you can achieve with React. You can now start building more complex and interactive applications using React’s powerful features and components.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button