Setting Up React App and Writing Your First Hello World.

Setting Up React App and Writing Your First Hello World.

Reactjs is one of the most famous libraries out there for the frontend, you might have already heard about it from your colleagues, friends or you may have heard about the buzz in the developer community.

Reactjs is an Open Source frontend library made by the Facebook engineering team.

There are three famous frontend frameworks that are built on React.

1 . Create React App

2 . Nextjs (this Hashnode blog is also made on this framework)

3 . Gatsby

Of course, they all are built differently and serve a purpose but we will be learning about them in the later articles. Today we will be learning about how to set up Create-react-app in our local and write our first code HELLO WORLD in React.

Let's first make a directory first open your command line terminal and write mkdir my-react-project or you can directly click on make a new folder and name it my-react-project or anything you want.

After this make sure you have npm installed on your computer if not follow the below step if yes skip directly to creating a new react app.

To check if npm is installed or not just go to the command line and type npm -v if you get a version like below then npm is installed if not just keep following the next step.

npm version

1 . Go to the Nodejs.org 2 . Download the LTS version of Node and Install it.

Node js

3 . After finishing the installation the npm will automatically be installed just check by writing npm -v in your command line. You will be getting the version now.

Creating a new React App

  1. Navigate to the initially created folder cd my-react-project or just go to this folder and fire up the terminal in this folder. (p.s My favorite way to do the above process is opening the project directory in VsCode and then opening the inbuilt terminal by using shortcut key ctrl + ` )

  2. After this in your terminal write npx create-react-app [your app name] in your app name you can write anything which has lower case e.g myapp.

React directory

You will be seeing something similar to below once the installation is finished. (Meanwhile, take a break drink some coffee Relax your mind.)

While downloading

  1. You will be having a screen something like below now write the command cd myapp to change the directory then npm start to start your react server.

image.png

4 . Got to the App.js and delete everything except the parent div and write <h1> Hello world </h1> inside the parent div save it and after that server will automatically restart then go to localhost:3000 and you will see your first react code Hello world on the screen.

image.png

here are the result

image.png

Voila!!!! you just made your first React App. Up next Writing CRUD operations in React.

Did you find this article valuable?

Support Ashish maurya by becoming a sponsor. Any amount is appreciated!