At this moment as I'm learning <b>React JS</b> I decided to share the knowledge I'm getting throughout my learning.

<center>![reactjs.png](https://cdn.steemitimages.com/DQmWF9knUvf2DgMxAau41pu9pMaYdVnypV9Lz4SdquYbYhN/reactjs.png)<sub><a href="https://wptavern.com/codecademy-launches-free-reactjs-courses">Source</a></sub></center>

<h1>What is React?</h1>

React is a JavaScript library / framework for building browser-based applications, but the packages we will use during development will be managed by <b>Node Package Manager (NPM)</b>, including React itself.

<h2>Step 1 - Node.js Installation</h2>

- Go to the <a href="https://nodejs.org/en/"> node.js </a> website and install the LTS version

<center>![nodejs.png](https://cdn.steemitimages.com/DQmSNu4vG5hYkkj8rwRscuJazS9CaBDVyBXGXGmDKFr9vSu/nodejs.png)
</center>

When we install Node.js NPM is also installed on the computer as part of the same package, to use it simply open to your operating system terminal, and type command <b>npm</b>, and a list of commands will appear.

<center>![terminal1.jpg](https://cdn.steemitimages.com/DQmYx3a7zMNHuYWDZphZoKfoye5KJfWWfixkmXLoCu5YGaV/terminal1.jpg)</center>

<h2>Step 2 - Installing Yarn Dependencies</h2>

Through NPM we will install Facebook Yarn's dependency manager, which is most recommended for working with React. We will install Yarn globally through NPM.

```npm install -g yarn```

<h2>Step 3 - Install Visual Studio Code Editor</h2>

<center>![VS.png](https://cdn.steemitimages.com/DQmWZdrYyXJRjKVsXWpb52J7Rye1r8neYeMijMg8VoUWvz5/VS.png)<sub><a href="https://fossbytes.com/visual-studio-code-linux-snap/">Source</a></sub></center>

With Node, NPM and Yarn installed there is just one code editor to develop our application. This tutorial will use the Microsoft Visual Studio Code Open Source editor which can be downloaded from this <a href="https://code.visualstudio.com/"> link </a>, however you can use another edit.

<h2> Step 4 - Installing Extensions in Visual Studio Code</h2>

<img src="https://github.com/burkeholland/simple-react-snippets/raw/master/images/snippets-in-action.gif" alt="snippets in action">

- <b>Simple React Snippets:</b> The essential collection of React Snippets and commands.

<center>![prettier.png](https://cdn.steemitimages.com/DQmSTysJHMMdZvGC2Bund6HSYxj1avsnfY6uAbNLVuVSKPe/prettier.png)<sub><a href="https://www.codereadability.com/automated-code-formatting-with-prettier/">Source</a></sub></center>

- <b>Prettier - Code formatter:</b>: With simple format commands you ident your code.

<b>In the next tutorial I will introduce the first steps to create the application in React.</b>

<center>
<img src="https://steemitimages.com/DQmUG78vG3pCanZJVQEeAeVAUovA2PDXqzraxkw6dQjTLED/teste.jpg" alt="teste.jpg" />
</center>

<center><sub><a href="www.steemitportugal.com">www.steemitportugal.com</a></sub>
<a href="www.steemitportugal.com">![steemitportugal.jpg](https://cdn.steemitimages.com/DQmVWcJUNBuz9Ma2XtB1zJLmSD79Vr6UNLVuYC3Bfay8YYq/steemitportugal.jpg)</a></center>

<center><sub><a href="https://dlike.io/welcome.php?ref=portugalcoin">DLike.io</a></sub>
<a href="https://dlike.io/welcome.php?ref=portugalcoin">![dlike_paid.jpg](https://cdn.steemitimages.com/DQmPwXFT7Kuu5YbmyvbdpnVU7ypAkcuhv7AXWhZAZTXQvE7/dlike_paid.jpg)</a></center>

<center><sub><a href="https://www.coinbase.com/join/rocha_4e">www.coinbase.com</a></sub>
<a href="https://www.coinbase.com/join/rocha_4e">![coinbase_banner.jpg](https://cdn.steemitimages.com/DQmXMrwDS3jZVtqNsXH5uP8FcVWmQS14DMXUNRSSpz1okeP/coinbase_banner.jpg)</a></center>

<center><sub><a href="https://www.binance.com/en/register?ref=DAA5DQJB">www.binance.com</a></sub>
<a href="https://www.binance.com/en/register?ref=DAA5DQJB">![binance.jpg](https://cdn.steemitimages.com/DQmVqsd7Lq8fiGfXUxK6YbHPYarMFPeDBACQX7NyDGaKnHV/binance.jpg)</a></center>

<center><sub>D7A6F9</sub>
![electroneum.jpg](https://cdn.steemitimages.com/DQmT4hK8K1n81F4i2ddXFt8KMxUUyYzPXtP3kVvst9KxGx5/electroneum.jpg)</center>