Como criar componentes e usar "props" no React adicionado em um site
- Detalhes
- Angelo Luis Ferreira
- React
- Acessos: 4673
Neste tutorial vamos mostrar como definir e utilizar componentes e props no React em aplicações pontuais em um site. Para isto, vamos precisar adicionar a biblioteca React e o "transpilador" Babel via CDN (Content Delivery Network ou Rede de Distribuição de Conteúdo). Leia o artigo Como adicionar elementos do React em um site.
Observações: Se você deseja instalar o React no Windows e criar aplicações a partir dele, leia: Como instalar e utilizar o React no Windows e Como criar componentes e usar "props" no React (instalado via NPM).
O que são componentes no React?
O React criou uma nova forma de construção de interfaces, que podemos chamar de "interface baseada em componentes". Os componentes permitem que a UI (Interface do Usuário) possa ser dividida em partes independentes e reutilizáveis, de maneira isolada e livre de dependências externas.
Conceitualmente os componentes são como funções JavaScript que aceitam entradas (denominadas "props") e retornam elementos React que definem o que deve ser renderizado na tela.
É importante frisarmos que os componentes podem possuir diferentes formatos, desde um simples botão até uma página ou um sistema completo.
O que são props?
Props são propriedades/atributos de uma classe que podem ser passados aos seus componentes. As props podem ter diferentes tipos de dados Javascript, como números, strings, funções, objetos e até mesmo outros componentes React.
As props são parte fundamental da criação de um componente. Por isso é extremamente importante aprender como usá-los. São ferramentas necessárias para desenvolver componentes únicos e personalizados para cada situação diferente que você desejar.
1. Criando um componente simples
1.1. Vamos inicialmente construir um componente estático e simples. Os componentes podem ser definidos a partir de uma função ou de uma classe JavaScript. As duas formas são equivalentes do ponto de vista do React.
Definição de um componente a partir de uma função
1.2. No exemplo a seguir vamos criar um componente denominado <Welcome \> a partir de uma função JavaScript.
function Welcome() {
return <h1>Olá Mundo! Seja bem vindo!</h1>
}
Observações:
1.2.1. Um componente após ser definido precisa estar no formato de uma tag para poder ser renderizado pelo React. Portanto, o componente definido pela função Welcome() precisará se tornar <Welcome /> para poder ser renderizado e exibido na tela do navegador.
1.2.2. No JSX, os nomes de tags iniciados com letras minúsculas são considerados tags HTML. Para diferenciar marcadores HTML de componentes, estes devem começar sempre com uma letra maiúscula. Desta forma, ficou estabelecido que todos os componentes do React devem começar com uma letra maiúscula.
1.3. Abaixo, segue a estrutura do nosso exemplo para você copiar.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo aplicativo React</title>
<!-- Adicionar o React. -->
<!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>Criando componentes no React</h1>
<hr/>
<div id="root"></div>
<!-- Adicione nosso componente React. -->
<script type="text/babel">
// Criando o componente Welcome()
function Welcome() {
return <h2>Olá Mundo! Seja bem vindo!</h2>
}
const exibir = <Welcome />;
ReactDOM.render(
exibir,
document.getElementById("root")
)
</script>
</body>
</html> 
Teste o nosso exemplo no Squids Editor. Clique em Executar para testar o código.
Observações:
1.3.1. Como já mencionamos, é necessário adicionar o React e o Babel para poder rodar a biblioteca e a extensão JSX. Essa estrutura deverá estar posicionada entre as tags <head> e </head>.
1.3.2. Depois, precisamos posicionar o local na página onde queremos exibir a nossa aplicação React. Para isso, vamos utilizar o atributo id = "root" para identificar e marcar a posição onde a aplicação React será renderizada.
1.3.3. Agora podemos escrever a aplicação React propriamente dita, onde:
1.3.3.1. Criamos o componente <Welcome /> e o atribuímos a uma constante que vamos chamar de exibir.
Obs.: É importante observar que o script onde a aplicação é escrita deve relacionar o Babel através do atributo type = "text/babel".
1.3.3.2. Criamos o script para a renderização da aplicação, onde trazemos a constante exibir para ser visualizada através do elemento identificado como "root".
Uso do componente <App />
1.4. Para possibilitar a inclusão de vários componentes e/ou elementos JSX em uma aplicação React, podemos criar um componente padrão para abrigar todos esses itens. Vamos portanto, criar um componente padrão que denominaremos de <App /> para reunir todos os elementos do React que serão renderizados e exibidos no navegador.
1.4.1. Veja o exemplo abaixo, onde utilizamos o componente <App /> no lugar da constante exibir. Neste exemplo, vamos acrescentar também vários componentes, que como definimos acima, ficarão contidos no componente padrão <App />.
<!-- Adicione nosso componente React. -->
<script type="text/babel">
// Criando o componente Welcome()
function Welcome() {
return <h2>Olá Mundo! Seja bem vindo!</h2>
}
function App() {
return (<>
<h4>Mostrando vários componentes</h4>
<hr />
<Welcome />
<p>...</p>
<Welcome />
<p>...</p>
</>)
}
ReactDOM.render(
<App />,
document.getElementById("root")
)
</script> Teste o nosso exemplo no Squids Editor. Clique em Executar para testar o código.
1.4.2. Observe no código acima que a função App() define o componente padrão da nossa aplicação React.
1.4.3. Observe que o componente <App /> deverá fazer parte do método ReactDOM.render() para que possa haver a renderização no container, que no caso está identificado como "root".
1.4.4. Veja o resultado da nossa página web de exemplo com o aplicativo React.
Definição de um componente a partir de uma classe
1.5. De forma semelhante, podemos definir um componente a partir de uma classe ao invés de uma função. Veja o exemplo abaixo onde definimos o componente <Welcome \> a partir de uma classe.
1.5.1. É importante salientar que neste caso ambas as formas (função e classe) são equivalentes para o React. Portanto, o resultado deverá ser o mesmo para qualquer forma que você optar.
class Welcome extends React.Component {
render() {
return <h2>Olá Mundo! Seja bem vindo!</h2>
}
} 1.6. Segue a estrutura completa do exemplo para você copiar.
<!-- Adicione nosso componente React. -->
<script type="text/babel">
// Criando o componente Welcome()
class Welcome extends React.Component {
render() {
return <h2>Olá Mundo! Seja bem vindo!</h2>
}
}
function App() {
return (<>
<h4>Mostrando vários componentes</h4>
<hr />
<Welcome />
<p>...</p>
<Welcome />
<p>...</p>
</>)
}
ReactDOM.render(
<App />,
document.getElementById("root")
)
</script> Teste o nosso exemplo no Squids Editor. Clique em Executar para testar o código.
2. Usando props nos componentes
2.1. Como mencionamos no início do tutorial, as props fazem a comunicação entre o componente a ser renderizado e a função ou a classe JavaScript responsável pela sua definição. Portanto, as props nada mais são do que um atalho para as propriedades de uma classe.
2.2. Veja no exemplo abaixo que iremos criar um componente denominado Aluno usando props para exibir o nome, idade e a nota de cada aluno.
2.2.1. Primeiro definimos o componente a partir de uma função ou de uma classe no arquivo App.js. Como já mencionamos, as duas formas, função ou classe, são equivalentes para o React quando utilizadas para definir componentes.
a) Definindo o componente Aluno partir de uma função:
function Aluno(props) {
return (<>
<p>Nome: {props.nome}</p>
<p>Idade: {props.idade} anos</p>
<p>Nota: {props.nota}</p>
<hr />
</>)
}Observações:
a.1. É preciso indicar que o componente irá utilizar props: function Aluno(props)
a.2. Para indicar a propriedade props é necessário utilizar chaves e ponto: {props.nome}
a.3. Observe que na extensão JSX um componente deve retornar um único elemento raiz. Portanto, tudo o que se pretende retornar em uma função ou classe deve estar dentro de uma tag. Pode ser uma <div></div> ou apenas a tag vazia <></> por exemplo. No nosso código usamos a expressão: return(<> conteúdo do componente </>)
b) Definindo o componente Aluno a partir de uma classe:
// define o componente Aluno
class Aluno extends React.Component {
render() {
return (<>
<p>Nome: {this.props.nome}</p>
<p>Idade: {this.props.idade} anos</p>
<p>Nota: {this.props.nota}</p>
<hr />
</>)
}
}
Observações:
b.1. Para indicar a propriedade props é necessário utilizar chaves, "this" e ponto: {this.props.nome}
b.2. O "this" utilizado para indicar a propriedade props se refere a classe proprietária, que no caso é Aluno.
b.3. Observe que na extensão JSX, tudo o que se pretende retornar em uma função ou classe deve estar dentro de uma tag.
2.2. Agora que já definimos o nosso componente, vamos renderizar o nosso componente com nomes de alunos diferentes (usamos uma função para definir o componente Aluno).
// Aplicação React
function App() {
return (<>
<h1>Alunos</h1>
<hr />
<Aluno nome={'Angelo'} idade={35} nota={8.5} />
<Aluno nome={'Carlos'} idade={37} nota={7.5}/>
<Aluno nome={'Maura'} idade={34} nota={9.5}/>
</>)
}
// Renderizando
ReactDOM.render(
<App />,
document.getElementById("root")
) Observações:
2.2.1. É preciso usar chaves para indicar os valores de cada props: nome={'Angelo'}
2.2.2. Observe que utilizamos props com dados tipo string, int e float
2.2.3. Podemos utilizar o mesmo componente, quantas vezes desejarmos, variando ou não os valores das respectivas props.
2.3. Segue o código completo do exemplo para você copiar (usamos a função para definir o componente Aluno).
<!DOCTYPE html>
<html>
<head>
<title>Exemplo aplicativo React</title>
<!-- Adicionar o React. -->
<!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>Criando componentes no React</h1>
<hr/>
<div id="root"></div>
<!-- Adicione nosso componente React -->
<script type="text/babel">
// Criando o componente Aluno()
function Aluno(props) {
return (<>
<p>Nome: {props.nome}</p>
<p>Idade: {props.idade}</p>
<p>Nota: {props.nota}</p>
</>)
}
// Aplicação React
function App() {
return (<>
<h1>Alunos</h1>
<hr />
<Aluno nome={'Angelo'} idade={35} nota={8.5} />
<Aluno nome={'Carlos'} idade={37} nota={7.5}/>
<Aluno nome={'Maura'} idade={34} nota={9.5}/>
</>)
}
// Renderizando
ReactDOM.render(
<App />,
document.getElementById("root")
)
</script>
</body>
</html> Teste o nosso exemplo no Squids Editor. Clique em Executar para testar o código.
2.5. A seguir, veja o resultado do nosso exemplo:
3. Composição de Componentes
3.1.No React é possível criar componentes que reutilizam outros. Isto permite criar pequenos componentes simples, como botões, listas e formulários para depois, compor esses componentes quando precisarmos criar um componente mais complexo.
3.2. No exemplo abaixo vamos mostrar como utilizar um componente simples reutilizado em um componente maior:
3.2.1. Observe que o componente Button está inserido na função que define o componente Aluno.
3.2.2. Observe também que o valor nota é passada pela props para o componente Aluno e depois passada para o componente Button com o nome de noteShow.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo aplicativo React</title>
<!-- Adicionar o React. -->
<!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>Criando componentes no React</h1>
<hr/>
<div id="root"></div>
<!-- Adicione nosso componente React -->
<script type="text/babel">
// define o componente botão
function Button(props) {
return (<>
<button onClick = {()=>alert(props.noteShow)}>Nota</button>
</>)
}
// define o componente Aluno
function Aluno(props) {
return (<>
<p>Nome: {props.nome}</p>
<p>Idade: {props.idade} anos</p>
<p>Nota: <Button noteShow={props.nota}/></p>
<hr />
</>)
}
// Aplicação React
function App() {
return (<>
<h1>Alunos</h1>
<hr />
<Aluno nome={'Angelo'} idade={35} nota={8.5} />
<Aluno nome={'Carlos'} idade={37} nota={7.5}/>
<Aluno nome={'Maura'} idade={34} nota={9.5}/>
</>)
}
// Renderizando
ReactDOM.render(
<App />,
document.getElementById("root")
)
</script>
</body>
</html> Teste o nosso exemplo no Squids Editor. Clique em Executar para testar o código.
3.3. Após rodarmos o código, veremos na tela do navegador:
3.3.1. Ao clicar no botão o usuário visualizará a nota do aluno. Este exemplo é apenas para ilustrar uma composição de componentes.
4. Organizando arquivos
4.1. Observe que nos exemplos anteriores, o arquivo HTML contém também o script da aplicação React, ou seja, tudo incluído em um único arquivo. Para uma melhor organização, é recomendável separarmos o arquivo HTML do arquivo JavaScript que contém o React.
4.2. Veja na imagem abaixo, que dividimos o código em dois arquivos: index.html (código HTML) e App.js (código JavaScript).
ATENÇÃO: É importante enfatizar que para utilizarmos o JSX através do "transpilador" Babel com arquivos separados, os mesmos deverão estar hospedados em um servidor local (tipo WAMP ou XAMP) ou em um servidor web.
4.3. Seguem os códigos index.html e App.js para você copiar:
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Exemplo aplicativo React</title>
<meta charset="UTF-8">
<!-- Adicionar o React. -->
<!-- Nota: ao fazer o deploy, substitua "development.js" por "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>Criando componentes no React</h1>
<hr/>
<div id="root"></div>
<!-- Adicione nosso componente React. -->
<script type="text/babel" src="/App.js"></script>
</body>
</html>
JavaScript (exemplo.js)
// define o componente botão
function Button(props) {
return (<>
<button onClick = {()=>alert(props.noteShow)}>Nota</button>
</>)
}
// define o componente Aluno
function Aluno(props) {
return (<>
<p>Nome: {props.nome}</p>
<p>Idade: {props.idade} anos</p>
<p>Nota: <Button noteShow={props.nota}/></p>
<hr />
</>)
}
// Aplicação React
function App() {
return (<>
<h1>Alunos</h1>
<hr />
<Aluno nome={'Angelo'} idade={35} nota={8.5} />
<Aluno nome={'Carlos'} idade={37} nota={7.5}/>
<Aluno nome={'Maura'} idade={34} nota={9.5}/>
</>)
}
// Renderizando
ReactDOM.render(
<App />,
document.getElementById("root")
)
4.4. Veja no resultado abaixo que usamos um servidor local:
5. Props são somente para leitura (read-only)
5.1. O React é bastante flexível mas possui uma única regra restrita: "Todos os componentes React tem que agir como funções puras em relação à suas props."
5.2. Isto significa que qualquer forma que você declare um componente, seja através de classes ou funções, você nunca deve alterar o valor de props. Portanto, os componentes devem ser escritos como funções puras, de modo que o valor de suas props permaneça inalterado.
5.2.1. Observe abaixo um exemplo de função pura:
Observação: Na função abaixo, nós recebemos os parâmetros a e b e retornamos a sua soma. Funções como essa são consideradas funções puras, pois chamadas com os mesmos parâmetros, sempre retornarão os mesmos resultados. Portanto, se a =2 e b = 4, o resultado retornado será será sempre 6.
function sum(a, b) {
return a + b;
}5.2.3. Já o exemplo abaixo é considerado uma função impura. Observe que se y = 2, a função retornará sempre valores diferentes, 2, 4, 6, etc.:
let x = 0;
function sum(y) {
return x += y;
}5.3. Para saber mais sobre funções puras leia: O que é uma Função Pura? Código em Javascript.
Documentação Oficial
1. [Componentes e Props] » Componentes e Props - React
