Build your first React App

Getting started with React.js and creating your first web app.

Introduction

In this article we will learn about the advantages of React, go through it’s basic folder structure and build a simple Hello World Web Application in React. So, without any further ado, let’s get started!

Advantages of React

Follows DRY Principle

Ensures faster Rendering

SEO Friendly

Multi Platform

We are now in the position to start building our first React App but before that we must talk about some prerequisites.

Prerequisites

  • CSS3 — working of CSS3, class and ID in CSS3
  • JavaScript/ES6 (ECMAScript 2015 or ECMAScript 6) — arrow functions, promises, classes and other prominent ES6 concepts
  • We are going to assume here that you have Node.js installed and setup in your system. But in case it’s not installed you can install it from here
  • We are going to work on Visual Studio Code as our code editor in this article. Make sure you have it installed and set up.

Having set up these prerequisites, you are ready to rock!

Hello React!

Once you have VS Code opened your screen must look like this

Empty Project Screen Capture of Visual Studio Code

Hit Ctrl + ` to open terminal in your current directory. Make sure you have a stable internet connection, write the following command in the terminal and hit enter.

npx create-react-app .

Now create-react-app is a tool developed by Facebook to enable the developers to avoid configuring build and setting up React app. This tool gives you a massive head start by building and setting up a React app by writing just one command. Do note that this takes some time depending on your network connection.

Build First React App Screen Capture

Once it is done downloading and extracting, you can just type the command npm start in the terminal, hit enter and your first React App is ready and running!

But before that let’s have a look at the folder structure of a typical React App. The hierarchy of the folder structure is something like this: —

Folder Structure of a Basic React Application
  • node_modules — contains the modules (or library files) required to build, test and debug React app (for this project).
  • public — contains index.html which is basically your app as HTML file and gets loaded in the browser. Another important file is manifest.json here which provides basic info about our application (such as name, icon, author). It is used to install web apps to home-screen of a device.
  • src — this is the directory in which we will write most of our JavaScript and CSS. In test driven development, test are also written in this directory but that is way beyond the scope of this article.
  • package.json/package-lock.json — contains dependency list, nested dependency tree and node scripts (start, build, test etc). These files are essentially required by Node to manage the configuration of the project.

This is all that comes with the bootstrapped React app. Now we can move ahead with starting our app and making minor changes to print Hello, World! in the browser.

Get, Set, Code!

npm start

Now you need to wait to let the app build and it will open automatically in your default browser. Your app will look like this

Basic React App Running in Firefox Browser

Now open VS Code and navigate to src/App.js.

Here if you are familiar with ES6, you should notice that there are import statements at the top, a function named App defined and then exported at last to be used in other JS files. Pretty simple, right?

Now let’s focus on the function definition — basically this function returns a div. Do note that this is not HTML syntax, it is JSX as we have mentioned above.

HTML and JSX look a lot alike but they are not really. You may notice the div property className. This is analogous to class property in HTML. In JSX we cannot use class because we are working inside JavaScript and there is already something called class in JavaScript (We will come to that in upcoming articles).

So, the points to note are, a component function in React must return a JSX (be it an h1 or a divtag). Another point is that we can also create class component in React. But for now we will work with functional component only for the sake of simplicity.

Now, in your App.js file, first of all, remove the logo import line (line 2, see code snippet above). Then inside the return parentheses remove the header tag and everything inside it.

Now navigate to src/App.css clear out everything except for the App selector and write the following CSS in this file. Your App.css should like this:

Navigate back to App.js and inside the div tag create an h1 tag with inner HTML as ‘Hello, World!’. Your App.js should like this:

Now you can save both the files and have a look at the browser window in which your app is running.

A basic Hello World React Application

So, finally you have a running React Application which says Hello, World! That’s all for this article. More on React is brewing up already and will reach out to you soon.

If you have any query related to this article, please feel free comment it down. Stay safe and stay connected for the upcoming articles in this series.

A frontend developer proficient in Android, React.js and with a 2 years of industry experience in Android.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store