Build your first React App

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

Introduction

React is an open source library developed by Facebook Inc. and is used to design user interfaces. It is one of the most popular front-end libraries currently available. According to 2020 StackOverflow Developer Survey, React is the most wanted and second most loved web framework. It has been adopted by many developers and organizations as their front-end stack including Facebook, Netflix, Dropbox, Reddit and your favorite, Medium too.

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

React gives us the power to create modules in an application called Components. These components further enable us to reuse our code whenever we want to repeat a functionality. Thus implementing DRY Principle (Don’t Repeat Yourself).

Ensures faster Rendering

React uses a Virtual DOM internally which intelligently manages the changes and reloads in the real DOM tree using some algorithms like diff algorithm. This method ensures improved app performance and a better UX. The performance improvement may not be significant in smaller apps but for large applications Virtual DOM just shots up the performance.

SEO Friendly

Search Engine Optimization is the practice of increasing the traffic to a website. SEOs (Search Engine Optimizers) believe that search engines usually fail to read JavaScript heavy apps. So as a solution, React can run on the server to render and return the virtual DOM to the browser as regular webpage.

Multi Platform

React is multi-platform library because you can just Learn once — Write anywhere. What we mean by that is — there is a React mobile application development library called React Native. Using React Native, one can write native mobile apps in JavaScript that run on both iOS and Android. Cool!

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

Prerequisites

• HTML5 (although it won’t be used in React apps. Rather you will find us using similar looking syntax extension called JSX)
• 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!

Create a directory anywhere in your workspace directory named first-react-app. Open this directory in Visual Studio Code.

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!

Open terminal using Ctrl + ` and type the following command and hit enter

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.

Don’t forget to check out these cool articles too!

Everything you need to know about DDoS

Create a List in Android using RecyclerView — Part 2