Criando projetos em React

Estou há um tempo sumido por aqui mas por bons motivos, estive estudando mais um pouco programação e avancei alguns passos no entendimento de conceitos básicos. Desta vez, estarei apenas iniciando um projeto em React. O intuito é fixar o processo de criação e armazenar dados para consultas posteriormente. Então vamos lá.

Antes de tudo vamos criar nosso diretório onde nosso projeto será inicializado. Nele executaremos através do terminal o comando

npx create-react-app projetobase

Assim, estamos informando que queremos iniciar um projeto React chamado "projetobase". Após executar, ele processa alguns 35089 arquivos, então paciência.

Um novo diretório com o nome do projeto citado é criado, ele é o nosso mais novo projeto React.

para executar certifique-se de estar dentro do diretório criado e digite
npm start.
Seu mais novo projeto React será executado na porta 3000. Os trabalhos podem ser iniciados.

Aqui está a estrutura dos diretórios que é criado por padrão pelo React. Iremos apagar todos os arquivos dentro do diretório src. Criaremos nossa própria estrutura do 0.

Dentro do diretório src criaremos um novo arquivos javascript chamado index.js ele que será responsável por renderizar todos os elementos do nosso projeto React. É nosso arquivo principal.

Ao criamos este novo arquivo, utilizaremos um padrão utilizado em todos os arquivos React. A importação do react para sua devida utilização.

Esta importação é realizada no início de cada arquivo, e utilizamos o comando:
import React from 'react';

Como supracitado, o index.js ele será responsável por renderizar os elementos criados na tela. Para isso necessitamos de uma dependência de renderização e seleção de elementos. O React já tem por natureza uma dependência deste tipo, o ReactDOM https://pt-br.reactjs.org/docs/react-dom.html.

Importaremos o ReactDOM para nosso index, e assim, poderemos começar a execução do nosso pequeno projeto.

O ReactDOM possui um método chamado render, ele recebe elementos que queremos renderizar na tela. Um exemplo bem prático é a renderização de um H1 conforme a seguir.

o método render necessita de alguns elementos para funcionar corretamente. O primeiro elemento trata-se do que ele irá renderizar, o segundo trata-se de onde. Neste caso, ele se refere a uma div com o id "root" que está no nosso index.html

Ao salvar, nosso projeto será executado na porta 3000 e estará exibindo uma h1 no seu body, conforme especificamos.

Para efeito de melhor visualização, iremos alterar apenas algumas configurações do arquivo, adicionar alguns estilos e fontes.
Para isso, criaremos um novo arquivo .css dentro do diretório src. Importaremos este arquivo dentro do nosso index.js através do comando

import "./index.css"

Assim, conseguiremos importar os estilos especificados no arquivo css para o nosso projeto.

Fiz algumas alterações de background color, color font, font family e weight. A imagem abaixo mostra as alterações realizadas e o resultado final.

Como ficou:

Segue o jogo agora.

Utilizamos o reactDOM apenas no nosso arquivo principal do projeto. Utilizaremos o import react nos arquivos que utilizamos a sintaxe jsx.

então em todos os arquivos iremos importar o react para que nossa aplicação funcione.

A estrutura do React é baseada em componentes, ou seja, nossos projetos serão criados e estruturados seguindo esta metodologia organizacional.

Inicialmente criaremos um diretório chamado components. Nele iremos guardar todos os nossos componentes React. Lembrando que os componentes são .jsx, note que quando criados, meu VSCODE já exibe os exibe com o símbolo do React.

Criei meu diretório de componentes e criei um novo chamado First.jsx. Nele faremos alguns exercícios.

Começaremos criando uma função chamada First que retornará um exemplo de componente React.

Começamos importando o react pois iremos utilizar a sintaxe html dentro de funções. Feito isso, criamos uma nova função chamada First, nela retornaremos dois elementos html, um H1 e um H2. É importante que estes elementos estejam todos guardados dentro de uma div para que possamos renderizar dentro do nosso projeto.

Após a criação, temos que exportar esta função para que ela possa ser utilizada em qualquer arquivo do nosso projeto. Para isso, executamos o comando export default "nomedafunção" Assim, disponibilizamos nossa função para posterior uso.

Abaixo chamamos nossa função dentro do index. Ela é importada e chamada no render utilizando a sintaxe ``.

O resultado final é este:

Aprendemos a renderizar componentes dentro do React. Agora iremos aprender a passar parâmetros para componentes React.

Criaremos um novo componente chamado Parameters, ele será nossa ferramenta de estudo agora.

Usando Parâmetros

Como já vimos, vamos importar o react e criar um novo componente dentro do arquivo através de uma função chamada Parameters. Nela iremos retornar um título e um subtítulo. Lembre-se sempre de exportar a função para que ela possa ser utiliziada.

Dentro do nosso index, iremos solicitar o que a função Parameters retorna, sendo assim, nosso título e subtítulo.

É importante frisar que os elementos solicitados dentro do render devem estar agrupados dentro de uma div para que não haja erros.

Após retornado o componente, podemos começar a atribuir parâmetros aos elementos, esses parâmetros são chamados de props. Atribuir props aos elementos é bem simples, basta adicionar o nome que se deseja dentro da tag do componente, dessa forma:

Agora, dentro do meu componente, podemos retornar estas props com chaves de chamada javascript. Lembrando que na função, atribuiremos o valor de props de entrada para que possamos retornar os valores de título e subtítulo especificados.

Note que passamos a string informada no index através de uma chamada javascript, como se estivéssemos retornando o valor de um objeto. Sendo assim props.titulo

Depois de retornado este valores, este é o resultado final.

Passando elementos filhos para um componente

Agora iremos aprender como passar elementos filhos para um componente.

Primeiro criaremos um novo arquivo, chamado ChildElement.jsx.

Nele iremos criar uma nova função como já vimos antes e especificar o comando para retornar os valores dos filhos que passaremos no index.

A estrutura segue desta forma:

Dentro do elemento onde ficarão os filhos, especificamos o comando .children. Desta forma o react entenderá que queremos retornar todos os filhos que são especificados no nosso index.

Já dentro do index, temos a seguinte estrutura dos dados.

Comentei os valores anteriores para ficar mais fácil a visualização do que estamos retornando.

Agora, passamos uma lista não ordenada para nosso componente, neste caso, são os filhos. O resultado é o seguinte:

Algumas opções de retorno de componentes e criação de projeto foram explanadas com sucesso. O próximo post será de um pequeno projeto em React para que vejamos na prática a utilização do poder do React.

A intenção do post era apenas explicar como criar um novo projeto de React e algumas de suas funcionalidades. Aqui vimos a estrutura básica de chamada de funções e retorno de componentes. Obviamente tudo que podemos estudar é bem mais complexo e envolve uma gama de ferramentas que podemos utilizar. Mas para efeito prático, esta pequena introdução já basta. Trarei em breve um projeto mais rebuscado que pretendo colocar em meu portfólio.

Você pode conferir mais informações na própria documentação do React. É uma atitude que devemos fazer com mais frequência. Te vejo na próxima.

Minhas redes:
Github - https://github.com/lazaro-contato/
LinkdIn - https://www.linkedin.com/in/lazaro-contato/