How to get started with React?

This is the first of the resources with which we are going to learn how to work with react, from the initial configuration. So without further ado, we are going to start this resource with a brief introduction.

What is React JS?

React is a JavaScript library that allows us to create complex user interfaces for web or mobile applications. React is maintained by Facebook and Instagram and by the independent developer community, being an open source technology.

Creating our first project

The best solution to start a project in React JS is to use “create-react-app”, an application that runs by terminal (Mac) that allows us to easily create a project in React without any configuration, ready to work immediately, freeing ourselves from configurations, complex and best of all officially supported.

In order to use this implementation, it is necessary to have NodeJS installed and use the “npm” package manager to install the necessary package from our console with the following command:

· npm install -g create-react-app.

· Once installed we will create our first project.

· create-react-app my-app.

Now we must enter the directory of our project to start our first application in React.

cd my-app npm start

Once the “npm start” command has been executed, which starts the project in development mode in which we can view the application that is included by default in our browser in the path: localhost: 3000.

To understand the structure of our first application, it is necessary to open the project with the code editor of your preference, in my case I use Visual Studio.

What does our project contain?

· node_modules: All packages, libraries and dependencies that our application uses.

· public /: Here are the application template (index.html, favicon.ico and manifest.json).

· src /: This directory is where you will find all the resources that will give life to our application and as we progress with this series of resources on react we will learn to organize in a better way.

· .gitignore: file that contains all the directories and files that should be ignored when using git in this project.

· package.json: Package where the configuration of our project is located, the scripts as well as the dependencies that it needs to be executed correctly.

· This document includes all the documentation for create-react-app.

Technologies: React — Webpack (file packer) — Babel (Transpiler to write the next generation of JavaScript) — PostCSS (for CSS processing) — Jest (for testing) — ESLint (allows us to improve the quality of our code) between other technologies.

Also one of the advantages that create-react-app has is that we can make changes and see them in real time in our browser.

Inside “src /” we will find App.js which includes our application that we previously viewed in the browser.

I invite you to pay a little attention to the file since this file includes the documentation explained in detail on how to perfectly use create-react-app.