We will cover here —
- Part 1 — Basics of React(basic Js knowledge is required).
- Part 2 — We will build a Disease outbreak tracker application.
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.
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?
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!
We will learn more about JSX implementation at a later point.
4 — What is a Component in React?
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.
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.
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.
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.
Run the above command your terminal/cmd to access your disease-outbreak-tracker app.
The above command will start your application. It might take a minute to start depending on your system’s performance.
If you can see this screen, then congrats🎉🎉. You have your first react project up and running.
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.