Build your first React app — Part 1 of 2

ReactJs is a JavaScript library for building user interfaces. It is one of the preeminent technology in modern frontend development. Learning React can be a little difficult initially; however, once you master it, it is incredible.

We will cover here —

  • Part 2 — We will build a Disease outbreak tracker application.

Now that we know React is a Javascript library, so basic knowledge of Javascript is required. However, I will try to explain everything in details.

1 — Let’s start at — Why React is so popular?

2 — Write a hello world using React.

It displays a div saying, “Hello, world!”.

Now you might have the same question I had, what is ReactDom? In React, a copy of the real DOM is kept in memory as virtual DOM and synced with the actual DOM by a library as ReactDOM.

3 — What is JSX?

It displays a header saying, “Disease outbreak tracker”.

Following this approach can complicate writing code for an extensive application, where there are 100s or maybe 1000s of code lines to be written.

Here comes JSX to rescue us!

It displays the same header built using JSX, saying, “Disease outbreak tracker”.

In line 1, an HTML like h1 tag displays a header saying Disease outbreak tracker. This tag syntax is neither a string nor HTML. It’s JSX, and it is a syntax extension to JavaScript. React advises using it to build complex UIs. JSX comes with the full power of the JavaScript language.

We will learn more about JSX implementation at a later point.

4 — What is a Component in React?

A tree structure of components in a React application
A tree structure of components in a React application
A tree structure of components in a React application

In React, components are of two types functional components & class-based components, and these are the building block of an application. A component is encapsulated parts of your application logic written in Javascript. Components manage their state, then compose them to make complex user interfaces. It also helps to keep your application state out of DOM.

5 — What are the props?

A component tree to explain the unidirectional data flow of props in React
A component tree to explain the unidirectional data flow of props in React
A component tree to explain the unidirectional data flow of props in React

6 — What is State?

In the above snippet, line no 2 - 15 is code of a class-based React component, and the rest lines are code of a functional component. I have declared a state called title to store the value of our app title in line no. 8, and the same thing I have done in line no 20 using hooks. Line no. 13 and 23 displays the title in an h1 tag.

We can update a state in a class-based component using the setState method, and we can declare our state update method using hooks in a functional component. We will explore both approaches in our Disease outbreak tracker app.

Enough theories!! Let's start the development.

Follow these guides to configure node and npm development environment if you don’t have it already.

Now, I will assume you have node and npm installed in your systems.

Create a new React App

npx create-react-app disease-outbreak-tracker

Run the above command in your terminal/cmd to set up a new project named disease-outbreak-tracker.

cd disease-outbreak-tracker/

Run the above command your terminal/cmd to access your disease-outbreak-tracker app.

npm start

The above command will start your application. It might take a minute to start depending on your system’s performance.

The default/start screen of our application.

If you can see this screen, then congrats🎉🎉. You have your first react project up and running.

The initial file structure of your application

We will be doing most of our development inside our src directory and package.json to track all npm packages we will be using to build your application.

That’s it for part 1. We will continue to learn topics like lifecycle methods and use them to call APIs to get the list of disease outbreak data in part 2. Build your first React app tutorial and complete the development of your application.

Conclusion

Please feel free to comment or hit me up on Twitter or LinkedIn if you have any thoughts or questions to share with me!

If you already know React, you may find Manage forms with custom React hook interesting. In this blog, I have explained how we can use custom hooks to manage your forms better.

Trying everything with JavaScript — Full Stack Engineer — @Geogo