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.
1 . Go to the Nodejs.org 2 . Download the LTS version of Node and Install it.
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
Navigate to the initially created folder
cd my-react-projector 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 + ` )
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.
You will be seeing something similar to below once the installation is finished. (Meanwhile, take a break drink some coffee Relax your mind.)
- You will be having a screen something like below now write the command
cd myappto change the directory then
npm startto start your react server.
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.
here are the result
Voila!!!! you just made your first React App. Up next Writing CRUD operations in React.