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 1 — Basics of React(basic Js knowledge is required).
• 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?

React is famous for its simplicity and flexibility. You can develop complex interactive user interfaces with React quickly as most of the complexities like DOM update and manage your data are supervised by React efficiently.

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

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?

Props are arbitrary inputs to components. Props assist in transferring data between components. Props are unidirectional, so you can use them to pass data from parent to child component but not the other way around.

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

6 — What is State?

A state is a JavaScript object that stores a component’s data, and it facilitates a component to keep a trail of changes between renders. Before React 16.8, only class-based components were allowed to have a state, but in 2018 React 16.8 introduced “hooks” to write stateful logic in a functional component.

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.

If you want to follow along with the examples, make sure to configure node and npm.

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

• Ubuntu/Linux — Setup node and npm
• Mac — Setup node and npm
• Windows — Setup node and npm

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

Create a new React App

We will use create-react-app to set up a React project quickly.

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

Thank you for reading this post! I hope it encouraged you to learn more about ReactJs. The possibility of React is endless. React team is constantly adding features/functionality to ease our development effort and harness JavaScript's true power in frontend development.

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.

Manage forms with custom React hook