Fundamentos do React na prática

Neste artigo iremos abordar os fundamentos do React na prática seguindo nossa primeira aula do Curso de React - Criando uma aplicação Pomodoro.

Conceito

O React é uma biblioteca para criação de interfaces. Permite que todos os códigos sejam separados e utilizados como componentes reutilizáveis. Fácil de escrever e fácil de usar criando aplicações leves e com ótimo desempenho.

Fundamentos

Componentes

No React, os componentes são a base da construção de interfaces de usuário. Eles são elementos reutilizáveis e independentes que encapsulam a lógica e a apresentação de uma parte da interface. Cada componente possui uma estrutura e um comportamento próprios, podendo receber dados externos (props) e ter seu estado interno gerenciado. Com isso, os componentes podem ser combinados e reutilizados em diferentes partes da aplicação, possibilitando a criação de interfaces mais complexas de forma modular e escalável. Além disso, os componentes também permitem a separação clara entre a lógica de negócios e a apresentação visual, o que melhora a organização do código e a manutenibilidade do projeto.

Propriedades

As propriedades (ou props) são mecanismos utilizados para passar dados de um componente pai para um componente filho. As props são passadas como atributos para os componentes e podem conter diversos tipos de dados, como números, strings, objetos e até mesmo funções. Com isso, é possível configurar o comportamento e a apresentação de um componente de forma dinâmica, de acordo com as necessidades da aplicação. As props são acessadas através de objetos JavaScript dentro do componente filho e podem ser utilizadas para renderizar elementos na tela, realizar cálculos, controlar o estado interno do componente, entre outras funcionalidades. As propriedades são uma importante ferramenta para a construção de interfaces flexíveis e reutilizáveis no React.

Estados/state

Para gerenciar o estado dos componentes, o React utiliza o conceito de estados, que são objetos JavaScript que contêm informações que podem ser atualizadas ao longo do tempo. Esses estados são gerenciados internamente pelo React e, quando alterados, fazem com que o componente seja renderizado novamente na tela, refletindo as mudanças realizadas. Dessa forma, os estados são fundamentais para a construção de interfaces dinâmicas e interativas no React.

Na prática

1. Instalar o React

Requisitos: ter o Nodejs e Npm instalados no seu computador.

Com os dois instalados no terminal ou prompt de comando você vai executar:

npx create-react-app fundamentos

Após criar a aplicação iremos abri-la no VS Code e você verá esses arquivos:

O arquivo em vermelho App.js será o que iremos editar. Exclua todos os códigos e deixe com o código abaixo (veja os comentários):

App.js

import React, { useState } from 'react'

// Importamos o componente que criamos
import { NomePet } from './components/NomePet';

function App() {
  
  // definimos abrirMenu que irá guardar o valor verdadeiro ou falso
  // setAbrirMenu será a função que usamos para definir o novo valor de abrirMenu
  // Usamos useState para definir que abrirMenu será um estado da aplicação
  const [abrirMenu, setAbrirMenu] = useState(false);

  return (
    <div className="App">
        <h1>Valor de abrirMenu</h1>
        {/* Se abrirMenu for true mostre verdadeiro, se false mostra false */}
        <h1>{abrirMenu ? 'verdadeiro' : 'falso'}</h1>
        {/* Quando o usuário clicar no botão usamos a função setMenu para alterar seu valor */}
        <button onClick={() => setAbrirMenu(!abrirMenu)}>Mudar</button>
        {/* Chamamos o componente NomPet 3 vezes passando a propriedade nome */}
        <NomePet nome="Lilica" />
        <NomePet nome="Katara" />
        <NomePet nome="Luna" />
    </div>
  );
}

export default App;

Agora iremos criar uma pasta chamada components dentro de de src e criamos o arquivo NomePet.js onde iremos colocar o código abaixo:

src/components/NomePet.js

export function Teste(props){
  return (
    <div>
      {/* Mostramos a propridade nome que foi passada para o componente */}
      <h1>Nome do Pet: {props.nome}</h1>
    </div>
  )
}

Agora no terminal, dentro da pasta que criamos a aplicação, vamos executar o comando:

npm start

Para iniciar o app. E acessamos http://localhost:3000 para ver a aplicação no browser:

Ao clicar no botão você verá o estado mudando e alterando o nome. O componente NomePet aparece três vezes como chamamos mostrando as propriedades que passamos ao chamá-los.

-

DiversificaDev - Oferecendo mentoria gratuita para iniciantes em tecnologia e programação para estimular a diversidade na área.

---

---