20

Writing a simple "Hello World" program using ReactJS

To have an in-depth knowledge about ReactJS join our training program.

A Simple "Hello World" using ReactJS

Here I will be writing down steps from scratch of how to start npm, npx, and use Visual Studio Code Editor.

  • Go to Visual Studio Code and then go to its terminal.
  • To start working on React, we have to create a folder where all the modules of React will reside
    For that, we will have to create a folder using the npx.
  • npx create-react-app hello-world.
  • Here hello-world will be the name of the folder.
  • Later we have to traverse to the folder and then write the code.
  • cd create-react-app
  • After this, the folder would be automatically created.
  • Next, we will start the npm so that we start the development server on the browser on ReactJS.
  • npm start
  • Once the npm is started the browser will automatically start with the localhost:3000,  since 3000 is it’s default port number.
  • Now let's edit this page.
  • To edit the page we have to go to explorer then find hello-world(folder created previous) →  src → app.js
  • app.js is the file that is always executed on the browser, and any changes made by us would be reflected here.
  • The blue highlighted file is where we will be editing.
  • Now we will remove the logo as well as the predefined contents and let's see how it looks.
Get in touch with us to learn more about web-development.

Want to know about internship and training programme ?
Just Subscribe here.

Will help out in learning all the DevOps and DevSecOps tool and you will get an hands-on experience as well.
Grab the opportunity and join us !

Thanks for joining our newsletter.
Oops! Something went wrong.