“Hello World!” in React

Aniket Kumar Sinha
Microsoft Student Club Pilani
3 min readSep 25, 2020

React is a JavaScript library for building user interfaces. React is not a framework. React is an open-source project created by Facebook. React is used to build user interfaces (UI) on the front end. React is the view layer of an MVC application (Model View Controller). React can be used as a base in the development of single-page or mobile applications.

Let’s get started with the “Hello World!” in React.

  1. Open Git Bash.
  2. Move to your desired directory.
  3. Type the command “npx create-react-app hello-world”. It will create a basic react application for you. This might take some time.

4. Move into the directory “hello-world”. Open your editor. I prefer VS Code for making react apps.

5. Write “npm start” in your Bash. It will open up the basic React web app.

6. You will get the folders as shown. Open the “src” folder then “App.js”.

7. The following code is written there.

8. Make the edits mentioned below.

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p> Hello World! </p>
</header>
</div>
);
}

9. Again run “npm start” in Bash. You will get the following result.

“Hello World!” in React

Remove the <img></img> part to remove the React icon.

function App() {
return (
<div className="App">
<header className="App-header">
<p> Hello World! </p>
</header>
</div>
);
}

Hurray! 🎉🎉

You made your first React application!!

Happy Learning!

--

--

Aniket Kumar Sinha
Microsoft Student Club Pilani

Web Developer | GDSC Lead’21 | Gold-Microsoft LSA | Public Speaker | Content Creator