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:

  1. Install the package globally
  2. Create the React app folder template

➡ Note: you can execute without installing it via NPX:

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.

First of all, React uses a language called JSX, which is basically a way to write HTML in JavaScript files.

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.

Class Component (First image) — Functional Component (Second image)

React works on the Virtual DOM.

In case you don’t know it, the DOM (Document Object Model) in plain JavaScript is the representation of the elements of a web page and contains all the methods you need to update the user interface.

Thanks to the Virtual DOM, React can optimise the UI renders, updating only the elements that need to be updated.

Project Structure

Open the project with Visual Studio Code (of course, you can use any other editor).

As you can see, there are three folders:

  1. 🟥 “node_modules”, where all our libraries get installed
  2. 🟩 “public”, the HTML template in which React will be rendered
  3. 🟦 “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”.
Now, type:

This will execute the script named (located inside the object of our 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 hook function included in the React package.
can have an optional argument, which represents its own default value.
It returns an array of two items:

  1. The first one is the updated value of the state
  2. 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 state.
To do that, we need to use another React hook called .
This function accepts two parameters:

  1. A function, which tells the hook what actions it should do
  2. 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.

It works! 🎉

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 acomponent.
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.

That’s it!

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! 😄

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store