Este artigo é uma continuação da série Aprendendo ReactJS.
Para acessar o artigo anterior, acesse: Aprendendo ReactJS: Introdução
Utilizando atributos com JSX
É possível fornecer valores de atributos usando strings
let elemento = <button className="btnRemover">Remover</button>
Obs.: devido ao fato que “class” é uma palavra reservado do JavaScript, quando você estiver definindo a propriedade classe de uma tag html, utilize a palavra propriedade JavaScript className.
Você também pode fornecer atributos utilizando expressões JavaScript cercadas por chaves:
let elemento = <img src={produto.urlImagem}/>
Obs.: Não coloque a expressão dentro de uma string pois isso fará ela ser tratada como uma string pura.
//Não faça isso.
let elemento = <img src="{produto.urlImagem}"/>
Nota: Atributos JSX tem sua nomenclatura definida pela convenção “camelCase”. Por isso atributos HTML como fontsize se tornam fontSize no JSX.
Utilizando um objeto style no JSX
O atributo “style” das tags html podem ser populados com um objeto style no lugar de uma string. Veja o exemplo abaixo:
let styleObject = {
backgroundColor: 'red',
color: 'blue',
fontSize: 25,
width: 100
}
let elemento = <input style={styleObject} />
No exemplo abaixo, usaremos o primeiro grupo de chaves para a expressão JavaScript e o segundo para definir o objeto anônimo que definirá o style.
let element = <input style = {{width:200,height:100}}/>
Utilizando o JSX com elemento aninhados.
Elemento React podem ser aninhados/agrupados dentro de outros elementos React desde que na raiz do elemento exista uma única tag que contem todos.
// Neste exemplo, possuímos 3 elemento e apenas a div externa está na raiz
let elemento = (
<div>
<div>Olá MundoJS</div>
<div>Olá MundoJS</div>
</div>
)
// Já neste exemplo temos 2 elementos na raiz do objeto. Isso fará com que o React de erro.
var elemento2 = (
<div>Olá MundoJS</div>
<div>Olá MundoJS</div>
)
Utilizando objetos JSX
Objetos criados com JSX podem ser manipulados como objetos JavaScript. Eles podem ser inseridos em vetores, utilizados em condicionais, utilizados em loops, passados como argumentos e retornados por funções.
// Exemplo de um objeto JSX utilizado em um IF
let produto = { nome: "banana", quantidade: 0 }
if (produto.quantidade === 0) {
let elemento = <h1>O produto {produto.nome} não possuí estoque</h1>
}
else {
let elemento = <h1>O produto {produto.nome} possuí {produto.quantidade} unidades em estoque</h1>
}
ReactDOM.render(
elemento,
document.getElementById("root")
)
Componentes React
Um componente React é um componente independente e reutilizável que exibe Elementos React baseados em suas propriedades e estados. Existem 2 tipos de componentes:
- Componentes Funcionais
- Componentes de Classe
Os componentes de classe têm um estado, métodos de ciclo de vida e propriedades. Enquanto componentes funcionais tem apenas propriedades. Primeiro veremos como funcionam os componentes funcionais e mais tarde falaremos de como os componentes de classe.
Componentes Funcionais
Este tipo de componente é apenas uma função que retorna elementos React. A convenção padrão do ReactJS pede que ao criar uma função, que o nome dela comece com letra maiúscula. Veja o exemplo abaixo:
function OlaMundoJS() {
return <h1>Olá MundoJS!</h1>
}
Para utilizar o componente React que você criou dentro do JSX, basta criar uma tag HTML com o mesmo nome que o componente React.
let elemento = <OlaMundoJS/>
Outro exemplo
ReactDOM.render(
<OlaMundoJS />,
document.getElementById("root")
)
Em ambos casos, o elemento React exibido será aquele retornado pelo componente funcional HelloWorld.
Adicionando propriedades aos componentes funcionais
O primeiro parâmetro passado para um componente funcional é um objeto que contem as propriedades do componente.
function OlaMundo(props) {
return <h1>mensagem: {props.mensagem}</h1>
}
Você pode dar valores as propriedades da mesma forma que são dados valores a atributos HTML.
ReactDOM.render(
<HelloWorld message="Olá Mundo!" />,
document.getElementById("root")
)
Propriedades podem ser strings, vetores ou qualquer outro tipo de objeto JavaScript. Você também pode utilizar elementos React como propriedades:
function OlaMundo(props) {
return <h1>Valor: {props.listanumeros[props.index]} </h1>
}
ReactDOM.render(
<OlaMundo index="3" listaNumeros={[1, 2, 3, 4, 5]} />,
document.getElementById("root")
)
Criando Componentes
Componentes funcionais podem incluir outros componentes funcionais na sua exibição. Isto nos permite deixar nossos componentes organizados e fáceis de entender. Por exemplo, veja o exemplo abaixo de uma lista de supermercado.
function TituloCompras(props) {
return (
<div>
<h1>{props.titulo}</h1>
<h2>Total de Itens: {props.numItens}</h2>
</div>
)
}
function ItemLista(props) {
return <li>{props.item}</li>
}
function ListaCompras(props) {
return (
<div>
<h3>{props.cabecalho}</h3>
<ol>
<ItemLista item={props.itens[0]} />
<ItemLista item={props.itens[1]} />
<ItemLista item={props.itens[2]} />
</ol>
</div>
)
}
function AppDeCompras(props) {
return (
<div>
<TituloCompras titulo="Minha Lista de Compras" numItens="9" />
<ListaCompras cabecalho="Comida" itens={["Maça", "Pão", "Banana"]} />
<ListaCompras cabecalho="Roupa" itens={["Camiseta", "Tenis"]} />
<ListaCompras cabecalho="Outros" itens={["Papel", "Copos", "Potes"]} />
</div>
)
}
ReactDOM.render(
<AppDeCompras />,
document.getElementById("root")
)
E compare isso com apenas definir todos os componentes de IU em um único componente funcional.
function AppDeCompras(props) {
return (
<div>
<div>
<h1>Minha lista de Compras</h1>
<h2>Total Number of Items: 9</h2>
</div>
<div>
<h3>Comida</h3>
<ol>
<li>Maça</li>
<li>Pão</li>
<li>Banana</li>
</ol>
</div>
<div>
<h3>Roupa</h3>
<ol>
<li>Camiseta</li>
<li>Tenis</li>
</ol>
</div>
<div>
<h3>Outros</h3>
<ol>
<li>Papel</li>
<li>Copos</li>
<li>Potes</li>
</ol>
</div>
</div>
)
}
ReactDOM.render(
<AppDeCompras />,
document.getElementById("root")
)
É isso ai, esse artigo apresentou diversas coisas que valem serem testadas e praticadas para você se sentir confiante em usar o JSX e criar componentes.
Fique de olho que assim que possível estarei postando a terceira parte.
Você pode fornecer quantas propriedades você quiser. Todas elas serão acessíveis pelo parâmetro “props”.