Inscreva-se agora

React: O que são Componentes e Props?

React é um framework de Javascript para Frontend, criado pelos engenheiros do Facebook e muito utilizado também pela Twitter. React ficou famoso por conseguir criar aplicações extremamente dinâmicas baseadas nos conceitos de componentes e props.

React: O que são Componentes e Props?
Compartilhar artigo

React: Introduzindo o Framework de Javascript


React é um dos mais populares frameworks de JavaScript para front-end. Surgiu em 2011 dentro da equipe de desenvolvimento do Facebook e foi criado apenas para ser utilizado na interface da timeline. Com sua expansão, o framework passou a ser integrado ao desenvolvimento de outros projetos dentro do Facebook, como o Instagram. A biblioteca virou open-source em 2013 e teve uma adaptação muito rápida pela comunidade, superando frameworks já estabelecidos como Angular e Vue.js. Hoje vamos discutir sobre Componentes e Props dentro do React.

Os componentes criados com o React permitem que você divida a sua interface em quantas partes quiser, sendo elas independentes e reutilizáveis. Sendo assim, você pode pensar em cada uma das partes de forma isolada. Alguns exemplos de componentes que podemos criar são o Header e Footer, que podem ser utilizados em quase todas as páginas da aplicação. Isso facilita o uso do conceito de DRY (Don’t Repeat Yourself), que consiste em não escrever o mesmo código várias vezes. A documentação oficial do React possui uma referência detalhada da API de componentes aqui.


React: Componentes de Função e Classe


Idealmente, componentes são funções JavaScript que podem ou não receber entradas, que chamamos de “props”, e retornam elementos que serão inseridos na DOM. Um dos primeiros componentes que você irá ver no React está no arquivo App.js
React: Componentes e Props
Na versão atual do React, v16.13.1, a forma mais fácil de criar um componente é definindo uma função JavaScript, como vimos no exemplo anterior. Mas também podemos criá-los por meio de classes.
React: Componentes e Props

React & Props: o que são e como funcionam?


Para entender como as props funcionam, vou usar dois exemplos de funções: uma função que recebe dois números e retorna a soma destes. E uma função que recebe duas entradas numéricas, onde ele altera o valor da primeira entrada subtraindo pelo valor da segunda. O primeiro exemplo se trata de uma função “pura”, por não alterar o valor das entradas. Já no segundo exemplo, observamos uma função impura, pois um dos valores de entrada é alterado dentro da própria função.

As props são entradas que não podem ser alteradas dentro de um componente. Componentes devem, obrigatoriamente, apenas ler as props. Sendo assim, todos os componentes de React devem ser “puros” e não podem alterar nenhum valor das props. Para isso, dentro do React usamos o conceito de “state” que pode ser abordado nesta seção da documentação oficial.

O que eu costumo utilizar como props de um componente são informações do usuário que precisam ser exibidas em tela, como: nome, e-mail e outros dados que muitas vezes precisamos trazer do servidor back-end.

O React é uma ferramenta muito poderosa e com uma documentação incrível. Para aprender sempre mais, aconselho fortemente que visite a documentação oficial sempre que houver dúvidas, ou até mesmo visite comunidades como o Stackoverflow.



Deseja saber mais sobre o nosso curso de 9 semanas?
Continue lendo
News

Mapeamento das Startups de Educação no Brasil

Startups que oferecem novos modelos de educação e aprendizado

Learn to code

Aprendendo A Programar Em Casa Com Le Wagon

Nossos alunos contam um pouco de suas experiências participando do bootcamp Le Wagon de forma remota!

News

Mercado de Tecnologia & Desigualdade de Gênero: Woman's Code

Ainda existe muita desigualdade de gênero no mercado de tecnologia. 72% dos alunos graduados nos cursos STEM nos EUA são homens. Woman's Code é uma iniciativa de duas estudantes que querem mudar isso.

Você tem interesse em estudar no bootcamp de programação número #1 do mundo?

Estamos em 39 ao redor do mundo