Principais conceitos e terminologia do React

Olá, alunos! No tópico anterior, aprendemos sobre a importância e o uso do React no desenvolvimento web.

E nesse tópico, vamos falar sobre os principais conceitos e terminologia do React.

Componentes

Os componentes são a base do React. Eles são blocos de construção reutilizáveis que podem ser usados para criar uma parte da interface do usuário.

Cada componente é responsável por renderizar sua própria parte do DOM.

Exemplo de componente React:

const MyComponent = () => {
  return (
    <div>
      <h1>Meu componente</h1>
    </div>
  );
};

Este componente renderiza um cabeçalho com o texto “Meu componente”.

Estado

O estado é um conjunto de dados que pode ser alterado ao longo do tempo.

Os componentes podem usar o estado para manter o estado da interface do usuário.

Exemplo de componente React com estado:

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Número de itens: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Adicionar item</button>
    </div>
  );
};

Este componente renderiza um cabeçalho com o número de itens no carrinho de compras.

O botão “Adicionar item” aumenta o número de itens no carrinho de compras.

Props

As props são propriedades que podem ser passadas para componentes.

As props podem ser usadas para compartilhar dados entre componentes.

Exemplo de componente React com props:

const MyComponent = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

Este componente renderiza um cabeçalho com o texto da prop title.

JSX

JSX é uma sintaxe que permite combinar HTML e JavaScript para criar componentes React.

JSX torna a criação de componentes React mais fácil e concisa.

Exemplo de código JSX:

const MyComponent = () => {
  return (
    <div>
      <h1>Meu componente</h1>
    </div>
  );
};

Este código JSX renderiza um cabeçalho com o texto “Meu componente”.

Conclusão

Esses foram apenas alguns dos principais conceitos e terminologia do React.

Nos próximos módulos, vamos aprender mais sobre esses conceitos e como usá-los para criar aplicações React.

Até lá, continuem estudando!