Requisitos

• Node e um IDE instalado em sua máquina.

React é uma biblioteca JavaScript front-end de código aberto que foi criada pelo Facebook em 2013. React é uma das melhores bibliotecas JavaScript que tornam os aplicativos da web mais rápidos e eficientes com o mínimo de codificação.

Neste artigo vamos entender os fundamentos do React e como criar um aplicativo react.

Por que Reagir? ❗️ ❗️

• Mais fácil de aprender - Como o react é famoso e usado por muitas indústrias, existem muitas documentações, blogs, artigos e tutoriais bons sobre o react. Assim fica mais fácil aprender sozinho.
• Ter JSX - JSX é uma combinação de HTML e JavaScript que torna a codificação muito mais fácil.
• Componentes reutilizáveis ​​- Em react, podemos quebrar nosso código em componentes de tamanho menor e reutilizá-los várias vezes. Isso ajudará a reduzir a base de código.

Você precisará ter Node >= 10.16 e npm >= 5.6 em sua máquina.

Em seguida, abra a linha de comando (CLI) e instale create-react-app em sua máquina globalmente usando:

npm install -g create-react-app

Agora, para criar um aplicativo de reação, estou criando uma pasta chamada 'First React' e abra o terminal nessa pasta. Em seguida, digite create-react-app <project name> no terminal. Você pode dar qualquer nome como nome do projeto. Mas certifique-se de que o nome do projeto não tenha uma letra maiúscula, caso contrário, reagir lançará um erro.

Este create -react-app criará um modelo de um aplicativo React.

Além disso, você pode usar create-react-app diretamente sem instalá-lo. Use pode usar o comando abaixo:

npx create-react-app <project name>

npx é um comando do executor de pacotes incluído no npm.

Agora precisamos navegar para o diretório do projeto. Modelocd <project name>

Em seguida, para executar o tipo de aplicativo reagirnpm start

Como create-react-app cria um modelo de amostra, podemos executar e visualizar o aplicativo de amostra.

Depois de executar o projeto com sucesso, você obterá algo assim. Ele iniciará automaticamente o aplicativo de reação no navegador ou você poderá digitar manualmente http://localhost:3000/ no navegador para abrir o aplicativo.

Breve explicação do diretório do projeto

Se você estiver usando o VSCode, basta digitar code . no diretório do projeto para abrir o projeto no VSCode.

package.json - Este arquivo contém as dependências e os scripts necessários para o projeto.

package-lock.json - Isso garante a instalação consistente de nossas dependências

.gitignore - Os arquivos que precisamos ignorar ao adicionar o projeto ao GitHub. Também podemos adicionar manualmente os arquivos que não queremos adicionar ao GitHub.

README.md - Detalhes sobre o aplicativo react (como executar, construir, etc.)

node_modules - Todas as nossas dependências que estão instaladas.

public - ícones e imagens usados ​​no modelo de amostra de reação, index.html - A única página HTML no projeto.

src - A pasta que mais usamos para desenvolvimento.

i ndex.js - Especifique o componente raiz (App) e o elemento DOM. Isso está conectado ao index.html que vimos antes

App.js - Responsável pelo HTML exibido no navegador. Representa a visão que vemos no navegador.

Arquivos CSS - contêm os designs CSS.

Conceitos básicos que você precisa saber

JSX

JSX é uma sintaxe semelhante a XML/HTML. que adiciona a sintaxe XML/HTML ao JavaScript.

Componente

Em um aplicativo react, os componentes são os principais blocos de construção. Um grupo de componentes faz um projeto react.

Aqui você pode ver que esta única página é criada usando 5 componentes. (Cabeçalho Mundial, País, Gráfico e Rodapé). Também podemos reutilizar cabeçalho e rodapé em outras páginas.

Existem 2 tipos de componentes.

• Componente de classe
• Componente Funcional

Props são imutáveis, o que é uma maneira de tornar os componentes dinâmicos, passando propriedades/dados de um componente para outro. Ele está simplesmente passando algumas informações do componente pai para o componente filho.

Estado

State é uma variável em cada componente de classe que tem a capacidade de armazenar informações dinamicamente e controladas pelo componente. É privado para esse componente.

Referências

• https://reactjs.org/docs/create-a-new-react-app.html