Se você já acessou ou for acessar agora a página oficial do React, a descrição dele é: Uma biblioteca JavaScript para criar interfaces de usuário!

O React foi desenvolvido pelo Facebook e lançado no ano de 2013, atualmente ele é mantido pelo próprio Facebook, Instagram, demais empresas e pela comunidade de desenvolvedores individuais. O React é amplamente utilizado para construir as soluções de grandes empresas como Netflix, Airbnb, entre outras.

O surgimento do React dentro do Facebook se deu pelo objetivo de otimizar a atualização das atividades simultâneas no feed da rede, seja o chat, status, posts, entre outros.

Como funciona o React?

O React, sendo uma biblioteca front-end, tem como objetivo facilitar a conexão das partes, ou elementos de uma página, seu funcionamento se dá pelo que é chamado de componentes.

Mas o que são esses componentes?
Imaginemos uma página web muito simples, como um formulário com cinco inputs para o o usuário digitar e no final um botão para enviar os dados preenchidos.

Note que nessa página, existem os cinco inputs para digitação e um botão, no HTML convencional o desenvolvedor criaria esses cinco inputs e o botão, totalizando 6 elementos na nossa página.

Se por algum motivo, precisar ser adicionado mais cinco inputs e um novo botão, o desenvolvedor teria de criar esses elementos adicionais na página e assim totalizando 10 inputs e mais o botão, ficando com 12 elementos.

Agora no React, essa mesma abordagem seria um pouco mais simples, como tratamos os elementos como componentes, já podemos presumir que um input pode ser um componente, assim como um botão, então podemos fazer a criação de somente um input e um botão como componentes e utilizar quantas vezes quisermos, se for preciso adicionar centenas de botões (por exemplo) só é necessário um componente botão e na nossa página fazer o uso desse componente no HTML.

Aqui uma imagem para ilustrar essa ideia de componente:

Note que temos somente 4 componentes, mas no desenho ao lado, foi possível adicionar eles quantas vezes forem necessárias. E isso dá ao desenvolvimento uma organização muito maior do layout.

Como utilizar o React?

[Passo 1 - Node.js]
Presumo que você tenha algum conhecimento de React nesse momento. Primeiro de tudo, você deve instalar o Node.js, você pode baixar a versão para o seu sistema operacional através desse link: Node.js

Após fazer o download e instalação do Node.js, você pode conferir se o mesmo foi instalado corretamente abrindo um terminal ou cmd e digitar o seguinte comando: node --version. na linha abaixo deve aparecer qual a versão do node foi instalado, caso não apareça a versão, você deve ter instalado incorretamente e sugiro que repita este passo. Se você visualizou a versão, vamos para o próximo passo.

[Passo 2 - Editor de texto]
Você pode utilizar o editor que preferir, eu particularmente utilizo o VSCode, caso não tenha e queira utilizar, você pode baixar através desse link: vscode

Após a instalação, abra o seu vscode. Você deve criar uma pasta para a aplicação que vamos desenvolver, então faça onde você preferir. Depois de criar a pasta você deve abrir ela no vscode, note que após abrir, não há nada dentro, mas vamos criar no próximo passo.

[Passo 3 - Criando um React App]
Com a pasta do projeto aberta no vscode, abra o terminal do vscode. Mas antes vou explicar a diferença entre os dois comandos que podemos utilizar para criar um projeto em React.

• npx create-react-app meu-app

Com este comando acima, dentro da pasta que você criou para o projeto, vai ser criada mais uma pasta chamada meu-app, pois este último comando é para criar uma pasta com esse nome, então se você está na pasta 'projeto-react' e usa esse comando acima, dentro da sua pasta 'projeto-react' vai ser criada a pasta 'meu-app', ficando dessa maneira: desktop/react/projeto-react/meu-app

• npx create-react-app .

Já com esse comando, note que ao invés de ter o nome da nossa pasta do projeto, tem um ponto '.', isso quer dizer que ao rodar o comando, todos os arquivos React serão inseridos dentro da pasta que você está, então ficaria a seguinte estrutura: desktop/react/projeto-react (e dentro dessa pasta ficará o seus arquivos do projeto).

Você pode escolher qualquer um deles, eu particularmente crio uma pasta para o projeto, abro essa pasta no vscode e utilizo o segundo comando, npx create-react-app .

Agora depois dessas explicações, crie o seu projeto React.

Quando terminar de baixar todos os arquivos, irá aparecer uma mensagem no terminal informando que o processo foi concluído.

[Passo 4 - Executando o seu projeto React]
Para executar o projeto, é bem fácil, no seu terminal, digite o comando npm start

Uma janela será aberta automaticamente no seu navegador com o projeto React sendo executado! Parabéns, você criou o seu primeiro projeto em React!

Nos próximos artigos, iremos continuar a criação do nosso projeto iniciado aqui!