O que é React? Como instalar e usar o React?


Neste tutorial será apresentado o que é React? Como instalar e usar o React? Primeiro será apresentado o que é React? Em seguida como instalar o React no Windows. Para finalizar será apresentado como começar a usar o React.

Download do código fonte desenvolvido na aula: DOWNLOAD


Vamos para explicação textual o que é implementado nesse tutorial.

O que é React?

React é uma biblioteca JavaScript. Foi apresentado pelo Facebook. Também é uma biblioteca de código aberto.

Por que usar React?

O React tem sido usado por grandes empresas ao redor do mundo. Algumas delas: Netflix, eBay entre outras grandes empresas.

Como usar o React?

Para usar o React necessário ter instalado o Node.js. Com o Node.js instalada podemos iniciar a instalação do React.

Para instalar necessário abrir o prompt de comando no Windows, em seguida acessar o diretório que pretende criar o projeto com React.

Após acessar o diretório utilizar o comando.

npx create-react-app my-app

O comando o "npm" é o Gerenciador de Pacotes do Node, o comando "create-react-app" indica qual pacote deve ser instalado, e o "my-app" indica o nome do projeto que pretende criar.

Após instalar necessário acessar o diretório, sendo o nome do projeto, no exemplo acima "my-app". Para acessar colocar o comando "cd", em seguida o nome do projeto "my-app".

cd my-app

Após acessar o diretório no qual foi instalado o React, para rodar o React utiliza o comando.

npm start

Após rodar o comando acima será aberto o projeto no navegador padrão definido no seu sistema operacional.

Será aberto o endereço: http://localhost:3000/

Para editar o projeto pode ser utilizado o seu editor preferido, ou o "Visual Studio Code". Para instalar o "Visual Studio Code" pode usar o link: Visual Studio Code . 

Para abrir o projeto no editor "Visual Studio Code", no prompt de comando digita o comando, code e o ponto.

code .

Executando o comando acima será aberto o projeto no "Visual Studio Code".

O projeto é constituído pelos seguintes diretórios.

Diretório "node_modules" que fica todos os módulos instalados para rodar o "React".

Diretório "public", que possui os arquivos públicos, o importante destacar o arquivo "index.html", sendo o arquivo raiz do projeto, e todo o conteúdo do projeto é carregado utilizando a DIV.

<div id="root"></div>

Também tem o diretório "src", que possui todo o código privado do projeto. Incluindo o arquivo "index.js", que é a raiz para carregar todos os componentes do site. 

ReactDOM.render(<App />, document.getElementById('root'));

No exemplo está sendo carregado o componente "App", que está no arquivo "App.js".

Também quando é criado o projeto é criado o arquivo "package.json", que possui as informações do projeto, inclusive quais são as dependências que o projeto necessita. 

Por isso, quando é baixado o código fonte do projeto desenvolvido no tutorial, não há o diretório "node_modules" que fica todos os módulos instalados para rodar o "React". Não há necessidade de disponibilizar o diretório com os módulos, em função do arquivo "package.json", ter a indicação de quais os módulos que o projeto necessita. Possuindo o arquivo "package.json", executando no terminal o comando "npm install" será criado automaticamente o diretório "node_modules" e instalado todas as dependências que o projeto necessita.

Portanto, nesse tutorial foi abordado o que é React e como começar a usar o React. Para ver todas as aulas de React acesse a PlayList.