How to get started with React

React is a very popular javascript library that is mainly used to create single-page web applications. There are so many things you can do with React, and so many tutorials available online, but here I will only be talking about the steps to follow to go from zero to your first react component.

Before starting

You need a recent version of NodeJs, you can install the latest version from nodesource.

Also if you are not familiar with the JSX syntax, check this link.

Setting up a development environment

You can try React right away, by simply including a script tag in your webpage that loads a ready-to-use .js file, but I don’t think it’s the way to go, because you don’t want to just try it, you want to use it.

Using the tool create-react-app you can set up a boilerplate, that allows you to see how a basic react app looks like, and a live compiler that shows you the output of your code as soon as you save a file.

Once everything is installed, you just go to the app folder, and you type: npm start.

Understand components and props

The purpose of a component is to render something to display everytime a specific event happens. Events that triggers re-rendering must be defined, we talk about “changing the state” of a component.

props is an object with properties that are passed to the component function through variables as html attributes.

Understand Hooks

React first used classes to define components, but recently it became possible to use functions to define them, and hooks are what allows you to access the different functionalities of React inside these functions.

The state is the most basic functionality, so the first hook that you will need is useState.

Your first component

Locate the file app.js (or app.tsx if you use typescript) in the src folder, and open it: the App( ) function will be your first component. Delete what’s inside return( ), and also what’s above it, then let’s try something very simple:

Put this code inside return( )

<button…