Como instalar o Node.js, NPM e o React no Windows

Fique por dentro

React � a ferramenta de desenvolvimento front-end que mais cresce por ano em n�mero de usu�rios segundo o Stack Overflow. Neste artigo iremos aprender como criar a nossa primeira Aplicaç�o de P�gina �nica (SPA) em React utilizando a ferramenta create-react-app do Facebook

Configurando o Ambiente

React � uma biblioteca/framework JavaScript para criar aplicaç�es que rodam no navegador, por�m os pacotes que iremos utilizar durante o desenvolvimento ser�o gerenciados pelo Node Package Manager (NPM), inclusive o pr�prio React.

Começaremos ent�o indo at� o site oficial do Node.js e iremos instalar sua vers�o LTS, como ilustra a Figura 1.

Figura 1. Site do Node.js

O Node � um programa utilizado por linha de comando, isso significa que ele ser� executado atrav�s do terminal do seu computador. Caso n�o tenha familiaridade com o terminal, o Flow abaixo vai te ensinar duas maneiras de abrir um terminal.

Quando instalamos o Node.js o NPM tamb�m � instalado no computador como parte do mesmo pacote, para utiliz�-lo basta abrir a ferramenta de linha de comando do seu sistema operacional, por exemplo o cmd do Windows ou o terminal do Linux, e digitar npm, uma lista com os comandos ser� exibida, como ilustra a Listagem 1.


C:\Users\Editorial>npm

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    completion, config, create, ddp, dedupe, deprecate,
    dist-tag, docs, doctor, edit, explore, get, help,
    help-search, hook, i, init, install, install-test, it, link,
    list, ln, login, logout, ls, outdated, owner, pack, ping,
    prefix, profile, prune, publish, rb, rebuild, repo, restart,
    root, run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    C:\Users\Editorial\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

Listagem 1. Comandos NPM

Atrav�s do NPM iremos instalar o gerenciador de depend�ncias do Facebook Yarn, que � mais recomendado para se trabalhar usando o React. Iremos instalar o Yarn globalmente pelo NPM, como ilustra a Listagem 2.


npm install -g yarn

Listagem 2. Instalando Yarn

Com o Node, o NPM e o Yarn instalados falta apenas um editor de texto para desenvolver a nossa aplicaç�o. Neste tutorial ser� usado o editor Open Source, Microsoft Visual Studio Code que pode ser baixado neste link, por�m voc� pode usar o que preferir.

Criando o Projeto

Agora que nosso ambiente est� devidamente configurado, iremos criar o nosso primeiro projeto em React. Para isso primeiro precisamos instalar a ferramenta de linha de comando create-react-app que tamb�m foi desenvolvida pelo Facebook cria para n�s um projeto do zero sem nos preocuparmos com bundling, otimizaç�o de arquivo e outros detalhes de configuraç�o que podem ser extensos quando realizados manualmente.

Para instalar o create-react-app digite o comando ilustrado na Listagem 3 em seu terminal:


npm install -g create-react-app

Listagem 3. Instalando create-react-app

Quando a instalaç�o terminar, o comando create-react-app vai estar dispon�vel em seu terminal e a partir dele podemos criar o projeto da nossa aplicaç�o. V� ent�o at� uma pasta adequada do seu computador pelo terminal e digite o comando da Listagem 4;


create-react-app meu-app-react

Listagem 4. Criando o app React

O processo de criaç�o do projeto pode levar alguns instantes enquanto create-react-app monta todo o boilerplate m�nimo que uma aplicaç�o React para a web precisa ter.

Explorando a aplicaç�o

Agora que o projeto da nossa aplicaç�o foi criado iremos explorar um pouco dos seus arquivos e do c�digo fonte b�sico que foi gerado pelo create-react-app.

Antes de qualquer coisa ainda no terminal navegue at� a pasta que create-react-app criou. Utilize o seguinte comando:


cd meu-app-react

Listagem 5. Executando a aplicaç�o

Agora que voc� est� na pasta do projeto digite o comando contido na Listagem 6 para executar a aplicaç�o no navegador.


 yarn start

Listagem 6. Executando a aplicaç�o

Ap�s terminar de carregar, o projeto ser� servido localmente em seu computador na porta 3000 e o navegador definido como padr�o em seu sistema operacional ir� abrir a p�gina da aplicaç�o automaticamente, a Figura 2 mostra a tela inicial padr�o criada pelo create-react-app.

Figura 2. P�gina inicial do React

Dentro do projeto voc� ir� encontrar tr�s pastas, cada qual ter� uma s�rie de arquivos que � utilizado de alguma forma pela aplicaç�o React:

node_modules - Pasta respons�vel por guardar todas as depend�ncias do projeto. Essa pasta � criada pelo NPM ou pelo Yarn no momento em que uma biblioteca, como o pr�prio React, � adicionada ao projeto.
public - Pasta p�blica da aplicaç�o web. Nela ficam guardados os arquivos iniciais da aplicaç�o, como o index.html que � interpretado pelo navegador, o �cone do site e um arquivo JSON com os par�metros de configuraç�o do site.
src - C�digo fonte da aplicaç�o: Aqui ficar�o todos os arquivos JavaScript que ir�o compor a nossa aplicaç�o.

O pr�ximo passo ser� abrir a pasta do projeto com o seu editor de texto favorito em seguida abra a pasta src que cont�m todo o C�digo fonte da nossa aplicaç�o. Nesta pasta abra o arquivo App.js que ir� conter o c�digo descrito na Listagem 7.


import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src= className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
}

export default App;

Listagem 7. App.js criado automaticamente

Em um primeiro momento voc� pode estranhar o c�digo html sendo retornado pela funç�o (componente) App. Essa sintaxe � chamada JSX (JavaScript and XML) e permite interagir com a template do nosso site diretamente com o JavaScript sem precisar aprender uma nova linguagem.

Iremos ent�o escrever "Hello world" neste componente: apague o c�digo sendo retornado pela funç�o (componente) App deixando apenas a div que possui o className "App" e o header para manter o estilo. Dentro do header crie um h1 com o nosso Hello world, como mostrado na Listagem 8;

 
import React from 'react';
import './App.css';

function App() {
    return (
      <div className="App">
        <header className="App-header">
            <h1> Hello world! </h1>
        </header>
      </div>
    );
}

export default App;

Listagem 9. Hello world!

Ap�s salvar o arquivo alterado repare que a p�gina no navegador ser� atualizada automaticamente e voc� ver� uma tela parecida com a da Figura 3.

Figura 3. Hello world!

Conclus�o

Voc� acabou de dar o seu primeiro passo no desenvolvimento web com React, mas a sua jornada est� s� começando. React � uma ferramenta poderos�ssima com a qual diversos sistemas complexos, como o Facebook, Netflix e Spotify, foram criados. A partir daqui voc� est� pronto para criar o seu primeiro componente e aprender como o React trabalha para criar aplicaç�es vastas com uma rica experi�ncia de usu�rios.

Como instalar o Node.js, NPM e o React no Windows

Neste artigo conheceremos React: a biblioteca JavaScript para a criação de interfaces de usuário desenvolvida pelo Facebook.

Configurando o Ambiente

Criando o Projeto

Explorando a aplicaç�o

Conclus�o

Artigos relacionados