Se voc j acessou ou for acessar agora a pgina oficial do React, a descrio dele : Uma biblioteca JavaScript para criar interfaces de usurio!

O React foi desenvolvido pelo Facebook e lanado no ano de 2013, atualmente ele mantido pelo prprio Facebook, Instagram, demais empresas e pela comunidade de desenvolvedores individuais. O React amplamente utilizado para construir as solues de grandes empresas como Netflix, Airbnb, entre outras.

O surgimento do React dentro do Facebook se deu pelo objetivo de otimizar a atualizao das atividades simultneas 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 conexo das partes, ou elementos de uma pgina, seu funcionamento se d pelo que chamado de componentes.

Mas o que so esses componentes?
Imaginemos uma pgina web muito simples, como um formulrio com cinco inputs para o o usurio digitar e no final um boto para enviar os dados preenchidos.

Note que nessa pgina, existem os cinco inputs para digitao e um boto, no HTML convencional o desenvolvedor criaria esses cinco inputs e o boto, totalizando 6 elementos na nossa pgina.

Se por algum motivo, precisar ser adicionado mais cinco inputs e um novo boto, o desenvolvedor teria de criar esses elementos adicionais na pgina e assim totalizando 10 inputs e mais o boto, 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 boto, ento podemos fazer a criao de somente um input e um boto como componentes e utilizar quantas vezes quisermos, se for preciso adicionar centenas de botes (por exemplo) s necessrio um componente boto e na nossa pgina 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 possvel adicionar eles quantas vezes forem necessrias. E isso d ao desenvolvimento uma organizao 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 verso para o seu sistema operacional atravs desse link: Node.js

Aps fazer o download e instalao 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 verso do node foi instalado, caso no aparea a verso, voc deve ter instalado incorretamente e sugiro que repita este passo. Se voc visualizou a verso, vamos para o prximo passo.

[Passo 2 - Editor de texto]
Voc pode utilizar o editor que preferir, eu particularmente utilizo o VSCode, caso no tenha e queira utilizar, voc pode baixar atravs desse link: vscode

Aps a instalao, abra o seu vscode. Voc deve criar uma pasta para a aplicao que vamos desenvolver, ento faa onde voc preferir. Depois de criar a pasta voc deve abrir ela no vscode, note que aps abrir, no h nada dentro, mas vamos criar no prximo 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 diferena 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, ento 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 invs de ter o nome da nossa pasta do projeto, tem um ponto '.', isso quer dizer que ao rodar o comando, todos os arquivos React sero inseridos dentro da pasta que voc est, ento 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 explicaes, crie o seu projeto React.

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

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

Uma janela ser aberta automaticamente no seu navegador com o projeto React sendo executado! Parabns, voc criou o seu primeiro projeto em React!

Nos prximos artigos, iremos continuar a criao do nosso projeto iniciado aqui!