How to create React App?

Table of contents

No heading

No headings in the article.

You can create react app using tool NodeJS and VSCode editor. Some basic knowledge of html,css and javascript is needed for React App development.

create_react_app.png

Step 1 Install NodeJS (Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.)

To install NodeJS you can visit nodejs.org/en/download

Once the node downloaded complete the installation steps. when it is installed, you can open vscode editor and click on terminal icon and launch one new terminal and type node -v. If it installed successfully you get the current version you installed like below.

node_version.png

if you don’t have VSCode follow step 2 or skip.

Step 2: Download and Install VSCode (Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free)

you can download VSCode by going to the below link code.visualstudio.com/Download

Installation is easy and straight forword. Complete the installation and open open vscode editor and click on terminal icon and launch one new terminal and type node -v .

Step 3: Create React App

Now finally you are going to create react app, So navigate to the folder you want to create your react app. Here I have created one indus_react_project folder on my desktop. Now in VSCode in your terminal using cd command navigate to the folder you want to create your react project .

nav_to_app.png

Now here we are going to create react app by using below command.

npx create-react-app your-app-name

npx.png

“hello_react” mention above in terminal is my app name. This installation takes few minutes to complete once done the below screen you can see on your terminal.

app_created.png

now navigate to your app by cd your_app_name and run npm start.

nav_to_app.png

compiled_success.png

now open your browser and type localhost:3000

here your app is running.

app_running.png

Hope you are following my directions so Now Lets, Open the folder structure of your app and find App.js file

folder_str.png

open App.js file and edit the code by removing header element and everything inside

<header></header>.

and add this line

<h1>Hello React </h1>

Finally save it and open the browser refresh your page.Now you successfully created your first Hello React app.

hello_react.png

Hope this blog helps you in creating your first react app. My upcoming blogs on “What are Components?” and“what is JSX?”. Thanks to all readers and developers. Keep Reading and developing react app with Indu.