React is one of the most modern solutions to build web applications.
In this article, I’d like to summarise in a practical way the peculiarities of this framework.
Let’s create a new React project
First, make sure you have Node and its package manager (NPM) installed.
Then, open a new terminal:
- Install the
$ npm install -g create-react-app
- Create the React app folder template
$ create-react-app my-awesome-app
➡ Note: you can execute
create-react-app without installing it via NPX:
$ npx create-react-app my-awesome-app
Now we have our project folder ready.
It contains several packages, you can see what’s included here.
Let’s get started
Before getting to the code, there are some things you should know about how React works.
In React pretty much everything is a component.
A component is a single unit that renders HTML code.
A component can contain more components, for example:
=> Home Screen Component
==> Navigation Bar Component
====> Logo Component
====> Links Component
==> Content Component
==> …and so on
There are two types of components, functional components and class components. Generally speaking, functional components are easier to use and more modern.
React works on the Virtual DOM.
Thanks to the Virtual DOM, React can optimise the UI renders, updating only the elements that need to be updated.
Open the project with Visual Studio Code (of course, you can use any other editor).
As you can see, there are three folders:
- 🟥 “node_modules”, where all our libraries get installed
- 🟩 “public”, the HTML template in which React will be rendered
- 🟦 “src”, the source files of our project
The entry point of our app is inside the “index.js” file.
This file is the root of the project and contains the App component, located inside the “App.js” file.
To run the app, you can use the integrated terminal is Visual Studio Code, going to the menu bar, “Terminal”, “New Terminal”.
$ npm start
This will execute the script named
start (located inside the
scriptsobject of our
package.json file) in a Node.js environment.
➡ Note: hot-reloading is enabled in debug mode. As soon as you edit and save a file, React will reload the browser tab for you.
Creating our SpaceX launches dashboard
In this sample project we will create a simple web application that shows the list of SpaceX launches, getting the data from https://api.spacexdata.com.
Open “App.js” and remove everything, leaving just a simple component with a title.
Now, let’s create our first stateful variable.
The state is an object that holds everything that can change during the lifetime of our component.
To create a state variable, we use the
useState hook function included in the React package.
useState can have an optional argument, which represents its own default value.
It returns an array of two items:
- The first one is the updated value of the state
- The second one is the dispatcher function that updates the state
Now we need to fetch the data from the remote API and update the
To do that, we need to use another React hook called
This function accepts two parameters:
- A function, which tells the hook what actions it should do
- The dependencies, an array of state variables that trigger the function whenever they change.
When the array is empty, it means that the function will get called only once.
If you don’t pass the array, the function will get called on every render.
After getting the data, we should display it in our HTML.
JSX syntax might be a bit tricky at the beginning, but it’ll get easier once you get used to it.
We can now make it prettier using some CSS and display the images that are included in the response, for example:
We can also modularise our app creating a
Let’s create a new file called “RocketLaunch.js”.
To pass data between a component and its child components, we use
Props are represented by an object that get passed as a parameter inside a functional component. Those items are “reactive” by default, which means that if a property is a state, its update will trigger a re-render everywhere it gets used.
There are still many things to learn, but I hope this article has helped you to understand more about the basic concepts of React.
Good luck! 😄