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!