In this article, we will create a very first react application. Let's begin by setting up our development environment for creating the hello world react application. 


This blog talks about how to create a hello-world project using create-react-app. It covers the following topics:

Contents

  • What are the prerequisites?
  • How to create react application?
  • Summary

Alright, let's get started.

1. What are the prerequisites?

We need two things installed, node and a text editor of your choice.

For node,  go to nodejs.org,  download and install the latest stable release.  If you already have it installed, make sure to update it.  


For text editor I recommend Visual studio code, you can download and install it from code visual studio



2. How to create react application?

To get started, I have created a folder called react and opened vs code inside that folder.  This folder is going to be a workspace for the rest of the series. Now,  to create a new react application, we will be making use of creating react app.

Create react app is a command-line interface tool, that allows you to quickly, create and run react applications, with no configuration. What that means is you simply run a command and an entire react project is created for you.



 So back in vs code, open the integrated terminal and run the command below,

npx create-react-app hello-world

Once the command completes, you should have a new folder called hello world. 


To run this application first navigate inside the project folder cd hello-world. 

cd hello-world

Now, run the command npm start. The command will open the browser on localhost port 3000 with your hello world application up and running.



So let's go back to visual studio code, expand the hello-world project, expand the source folder, and edit app.js.  I will change the text to hello world and let me save the file.  When the changes are saved the browser will automatically refresh and you should see hello world displayed in the browser. 

hello-world



So there you go your first react application up and running.  Before we move on to the next article though I want to discuss another approach for creating react applications using the create react app package.

The first method, which we already created how to create a hello-world application using NPX. We run the command NPX create-react-app followed by the project name. But what exactly is NPX.  NPX is an NPM package runner which gets installed when you install a node.  And that is how we are directly able to run create react app without having to install it. NPX takes care of that for us.  

Now, there is a slightly different approach which just depends on NPM. In this approach we installed the create react app package globally and then use the package to generate the projects.  So the first step here is to install the package globally using the command npm install create react app - G 

npm install create-react-app -g

once it is installed, you can run the command create-react-app followed by the project name.

create-react-app hello-world

I prefer the first approach because I don't have to install the package globally and I don't have to worry about constantly updating the create react app package.

I will be using NPX,  but I wanted to show you the NPM approach as well because you will find other articles and videos which take that approach.

The last thing I want is for a beginner to be confused with the very first step of creating a react application. Now that we understand how to generate a simple react app.

Summary

We should install two software, a node and a text editor of your choice to create a create app.
Using the npx create-react-app appname method is the most optimal solution.

Thank you for reading this article.  I'll see you guys in the next one.