Se você está procurando dicas sobre como usar os adereços no ReactJS, você está no lugar certo.
No React, o termo adereços significa propriedades, e esses adereços desempenham um papel vital no processo de desenvolvimento do React. Os componentes são os blocos de construção do React. Esses componentes usam adereços para aprimorar sua funcionalidade e reutilizar o código.
As propriedades do React armazenam valores, matrizes ou funções primitivas. Um prop possui vários recursos para garantir seu desempenho e, neste artigo do tutorial, você aprenderá exatamente como usar props em seus aplicativos React.
Qual é o objetivo do React Props?
React é uma das muitas estruturas de JavaScript que vale a pena aprender .
Os adereços React têm uma função muito importante; eles passam dados de um componente para outro. Eles fornecem um canal através do qual os componentes se comunicam.
Há uma regra simples que você precisa aprender antes de começar a usar os adereços do React, todos os componentes devem funcionar da mesma maneira que uma função pura (com relação aos adereços). Isso significa simplesmente que um componente React nunca deve alterar o valor de qualquer um de seus adereços. Isso garante que os adereços contenham apenas dados não comprometidos.
Usando React Props
Para usar um adereço no React, primeiro você precisa passar o adereço como um atributo para o componente funcional. Então você terá acesso ao prop e seus dados dentro do componente.
Por exemplo, se você estiver criando um rastreador de tarefa, um componente que você pode querer é um cabeçalho. Este componente de cabeçalho incluirá o título do aplicativo, entre outros elementos. Portanto, o componente de cabeçalho pode usar um prop para obter o título do aplicativo.
Usando um Prop no Componente de Cabeçalho
function Header(props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
export default Header;O componente Header acima pega um atributo prop e o usa para acessar dados sobre o título do aplicativo. Para exibir esse componente Header em sua IU, você primeiro precisa inseri-lo no arquivo App.js do React (usando a tag do componente Header).
O arquivo App.js
import Header from './components/Header';
function App() {
return (
<div>
<Header title='Task Tracker' />
</div>
);
}
export default App;O código acima mostra o arquivo App.js do React , que é renderizado para a IU. O componente App exibe o componente Header na IU usando a tag <Header> . Se você olhar atentamente para o código, verá que a tag <Header> contém um prop e um valor prop . Portanto, o componente Header agora tem acesso a uma propriedade de título que pode ser usada em sua seção da IU.
Executar seu aplicativo React com o arquivo App.js e o novo componente Header acima irá gerar a seguinte saída em seu navegador:
Usando Props Padrão
O componente Cabeçalho simples no exemplo acima funciona muito bem se receber um prop de título . No entanto, se você remover o suporte que passou pela tag do componente Heade r (como no exemplo abaixo).
O arquivo App.js atualizado
import Header from './components/Header';
function App() {
return (
<div>
<Header/>
</div>
);
}
export default App;Em seguida, o aplicativo React começará a exibir a seguinte IU atualizada no navegador:
Como você pode ver, a IU agora está completamente em branco. Felizmente, existe uma maneira simples de atenuar esse problema. Ao adicionar uma prop vale padrão ao componente que usa a prop , você removerá efetivamente esse problema. Isso garantirá que, mesmo que o componente não receba um prop, ele ainda terá um valor prop para trabalhar.
Usando Exemplo de Props Padrão
function Header(props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
Header.defaultProps ={
title: 'The App Name'
}
export default Header;O código acima produz a seguinte saída no navegador:
Como o componente Header não recebe uma prop , ele usa o valor da prop padrão . No entanto, se você reinserir a prop no arquivo App.js , substituindo esta linha de código:
<Header/>Com este:
<Header title='Task Tracker' />Em seguida, sua IU agora exibirá “Rastreador de Tarefas” como o título do aplicativo. Portanto, o componente Header só usa o prop padrão se não receber um prop externo .
Protegendo a integridade de seus acessórios com PropTypes
O React preserva a integridade dos adereços, evitando que os componentes que recebem os adereços alterem seu valor. Uma maneira de também preservar a integridade dos adereços é utilizando a propriedade propType . PropType é uma propriedade de verificação de tipo, que garante que os adereços passados para um componente sejam de um tipo específico.
Por exemplo, o título de um aplicativo React é um valor de string. Então, usar a propriedade propType para declarar explicitamente o tipo de propriedade do componente Header é a melhor maneira de garantir que a propriedade fornecida tenha um valor de string.
Exemplo de uso de PropTypes
import PropTypes from 'prop-types';
function Header(props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
Header.defaultProps ={
title: 'The App Name'
}
Header.propTypes = {
title: PropTypes.string
}
export default Header;O componente Header acima agora usa a propriedade propType . Há uma diferença fundamental entre usar a propriedade propType e a propriedade defaultProps ; para usar a propriedade propType , você terá que importá-la para o componente, enquanto a propriedade defaultProps está dentro do escopo de um componente React.
Reutilizando componentes com acessórios
Um dos principais benefícios do React é que ele permite que você crie sua IU usando componentes reutilizáveis. O módulo de composição do React torna essa funcionalidade possível. Ele pega um componente genérico e o configura (com adereços), para criar um componente mais específico.
Usando o exemplo do aplicativo de tarefas, você pode criar um componente de tarefa e usar esse componente para renderizar as diferentes tarefas que um usuário cria para a IU. Primeiro, você precisará criar o componente de tarefa.
O arquivo de componente de tarefa
import PropTypes from 'prop-types';
function Task(props) {
return (
<div>
<h2> {props.name} </h2>
</div>
);
}
Task.defaultProps ={
name: 'Task Name'
}
Task.propTypes = {
name: PropTypes.string
}
export default Task;O componente Tarefa acima é um arquivo genérico que você pode usar para criar várias tarefas em seu aplicativo. A próxima etapa é colocar a tag do componente Task (junto com os respectivos adereços) no componente que irá renderizá-la para a IU.
Renderizando o Componente de Tarefa no Componente de Aplicativo
import Header from './components/Header';
import Task from './components/Task';
function App() {
return (
<div>
<Header title='Task Tracker' />
<Task name = 'Do Grocery Shopping' />
<Task name = 'Meeting at the Office' />
<Task name = 'Clean the House' />
</div>
);
}
export default App;O aplicativo React atualizado produzirá a seguinte saída no navegador:
Crie aplicativos ReactJS completos
Depois de ler este artigo, você deve ter aprendido que precisa saber sobre os adereços React – desde como criar adereços padrão até o uso de adereços com componentes reutilizáveis.
Mas este é apenas o começo. Muitos tutoriais gratuitos do React ensinam como criar aplicativos completos do React, e cada um deles o ajudará a aumentar ainda mais o seu conhecimento.