Create a Hello World App in React 18 (Complete Guide)

It is safe to say that React has been one of the most influential libraries of all time. React, a JavaScript library used for building user interfaces was developed at Meta(formerly Facebook) and released in 2013. It soon gained popularity and has become the most popular JavaScript library of all time. The beauty of React is that it allows you to create applications that provide excellent cross-platform support. If you want to be a web developer, at some point in your life you’ll need to learn React. In this article, we’ll see how to create a simple hello world app.

How much JavaScript is enough for React?🤔

If you’re confused and you’re wondering about a roadmap that can show you the complete path to becoming a full-stack web developer, you can check out Learning Paths at codedamn.

Learning React might feel intimidating at first but in reality, it is not that complex and once you know all the JavaScript that is required, you can learn React with ease. Most people make the mistake of learning React as soon as possible without having a basic knowledge of Javascript. Messing around with React requires mastery of certain JavaScript concepts. Make sure that you know these topics before getting into React 👇:

• Knowledge about basic variables(const, var, arrays, objects, nan, strings, new, this, etc. ).
• If conditions, loops, ternary operators, callbacks
• Knowledge about functions, recursion & scoping.
  • normal functions
  • arrow functions
  • hoisting
  • scoping

• DOM(window, document, async & defer, query selectors, event listeners, data attributes, DOM traversal, etc. ).

Installing and Setting up React🔨

Building your first React application requires two things, Node js installed in the back end and a text editor of your choice. You can do that by installing node js and any text editor you like or you can use our code Playgrounds and create your first app flawlessly.

Downloading Node.Js

First, you need to have node js installed on your PC. Node is a JavaScript runtime that allows us to execute JS code on the server. It’s highly probable that you already have node js installed but if you don’t, go to Nodejs.org and download it.

Create React App

After that, you can create a new folder, name it, and then launch vs code in that folder. Then, you can open the terminal by pressing ctrl/command + ~ and type in the following command :

npx create-react-app my-app ./
Code language: Bash (bash)

npx is a package runner tool that comes with npm(a package manager for JavaScript) and ./ at the end of the code installs the packages in the current directory. The installation process might take a couple of minutes depending on the configuration of your device.

And there you go, your first React app has been created. The npx command has generated all the files that are necessary for your first React application. You can see that several files have been created in the explore section. We’ll look at these files sooner, but first, let’s run the application.

To run the application, enter the command:

npm start
Code language: Bash (bash)

As soon as you hit the command, you’ll be taken to a web page on localhost: 3000 and you can see a spinning logo of react and some text written under it.

Now, let’s just take a minute and explore all the files and folders that have been created.

Understanding the folders

• package.json – in this file, you can see all the dependencies and packages that your app currently has installed. Any additional package that you install later can be seen here.
• src folder – the source folder is where all the logic needed for building the app is found. You’ll be spending most of your time developing your app here. To create the hello world app, you have to access these files:
  • index.js – this is the starting point of any react application and this contains the ReactDOM used for rendering web pages.
  • app.js – app.js is the most important file that is needed to run your code. The changes you make here are reflected in the application.

• public – the public folder contains one important file i.e. index.html file.
  • index.html – inside this HTML file, we have a few meta tags and some comments that you can delete. The body contains only a <div> tag that has an id = root which is linked to the index.js file.

Creating your first Hello World App Using React🤖

To create the hello world app, open the app.js file present in the src folder. You might be seeing something like this 👇:

The code that you can see in the App() function is not HTML, it is JSX(JavaScript XML) as you can see the extension of the file is in dot js format and not dot HTML. JSX is incredibly similar to HTML. The power of JSX is that you can write JavaScript code straight inside of something that looks like plain HTML.

This might be a lot to swallow but don’t worry, just delete every line of code in this file and write the following code:

Source Code:

import './App.css';

const App = () => {
  return(
   <div className="App">
      <header className="App-header">
        
        <h1>Hello World!</h1>

      </header>
    </div>
   );
}

export default App;
      
Code language: JavaScript (javascript)

Output:

And there it is, you’ve created your first hello world app in react🎉.

Conclusion🎀

This is how you install React and create your first hello world application using React. By learning React, you can create awesome user interfaces that can run on any platform.

Feel excited after creating your first React Application? Dive deeper and learn React 18 for free in this easy interactive tutorial.

Adios and have a great day!☮