Composição de componentes em ReactJS

Escrito por

A dica de hoje é sobre o ReactJS, mais especificamente sobre como podemos criar composição de componentes em ReactJS de uma forma um pouco diferente, como podemos utilizar algumas áreas de um componente para ejetar outros componentes por exemplo. Na prática ficará mais simples de entender.

Eu criei um aplicativo básico utilizando o create react app e agora vou criar dois componentes para mostrar como podemos utilizar essa composição. No app.js, logo após o importe do React e do './app.css';  criarei um Panel, ele será um functional stateless component porque não temos o estado interno dele.

1const Panel = (props) => {
2 return(
3 <div>
4 <h1>header</h1>
5 </div>
6 <p>Footer</p>
7 )
8}

Ele me retorna duas coisas, uma div e tem header que pode ser um H1. Abaixo temos um P com um footer, isso para termos uma ideia de como podemos fazer. A primeira forma de composição é exatamente essa, eu posso trocar esse header e esse footer,  por exemplo, ao invés de um texto chamar outra coisa:

1const Panel = props => {
2 return (
3 <div>
4 <h1>{props.header}</h1>
5 <p>{props.footer}</p>
6 </div>
7 )
8}

Se eu pegar esse código e chamar mais abaixo, dentro do nosso app component:

1<p className="App-intro">
2 To get started, edit <code>src/App.js</code>
3</p>
4
5<Panel header='Olá mundo!' footer='rodape' />

Então onde eu mandar esse valor, ele vai escrever o texto, mas o interessante é que eu posso fazer algo diferente: ao invés de mandar dessa forma, posso mandar um JSX:

1<Panel
2 header={
3 <span>
4 'Olá <u>mundo!</u>
5 </span>
6 }
7/>

Com isso fizemos uma composição porque eu posso passar outro componente para ele, como é um JSX eu posso passar o html ou passar efetivamente um outro componente. Por exemplo, podemos passar um componente que depende de dois outros componentes, um que fica só no header e um no footer e qualquer coisa que você quiser colocar você pode, como um mapa por exemplo.

Isso facilita bastante criar essa composição. Podemos criar componentes mais genéricos, principalmente os estilo containers e injetamos duas informações dentro. Outra coisa que podemos fazer o é o seguinte:

1const Panel = props => {
2 return (
3 <div>
4 <h1>{props.header}</h1>
5
6 <p>{props.footer}</p>
7 </div>
8 )
9}
10
11const Header = props => {
12 return <div>.....</div>
13}

O que passarem para ele eu vou colocar dentro do div. Como assim? Imagine que isso é meu header:

1<Panel
2 header={
3 <span>
4 'Olá <u>mundo!</u>
5 </span>
6 }
7/>

E eu vou dizer para ele que é um header com as coisas dentro:

1<Header>
2 <span>
3 'Olá <u>mudo!</u>
4 </span>
5</Header>

Para utilizar o que está dentro do header e o /header utilizamos uma outra  propriedade chamada props.children:

1const Header = props => {
2 return <div>{props.children}</div>
3}

Essas duas formas são bastante interessantes de se criar uma composição, ou com uma props normal ou se eu passar no corpo desse componente podemos gerar o props.children, com isso consigo pensar em componentes cada vez mais genéricos, porque eu posso fazer um header, por exemplo, para todas as minhas páginas e se eu quiser aplicar um class diferente, aplico no div.

Isso libera um potencial para o React muito grande, porque a gente consegue reutilizar muito código a partir dessa componentização.

Confira o vídeo:

Curta o DevPleno no Facebookinscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium