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.
We are now in the position to start building our first React App but before that we must talk about some 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
- 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!
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
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 .
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.
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: —
- 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.
- 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
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
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
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.
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
A Distributed Denial of Service (DDoS) attack is an attempt made to take down a website, server or an application by…