H.O.C Metódo avançado de reutilização de componentes em React JS

Nos tempos mordernos, O React JS, assim como outros frameworks devirados do JavaScript, recebem alterações e de tempos em tempos grandes atualizações, sempre propondo novidades e trazendo formas novas de fazer aquilo que já é bem antigo da biblioteca.

Nesse víes, ao citar react uma das primeiras palavras que nos vem a mente é a "componentização", que é uma das palavaras pela qual o react é conhecido e lembrado, nesse artigo falaremos sobre o termo 'HOC (Hght-rder Component) que é uma das formas de trabalhar com a reutilização dos componentes de forma mais complexa, através desse método somos capazes de implementar lógicas e funcionalidades adicionais porém reutilizando componentes já existentes.

Motivos para utilizar esse meótodo:

1. Fácil de utilizar
2. Previne o programador de repetir a mesma lógica em componentes diferentes
3. Torna o código mais legível (oque é uma mão na roda ao desenvolver em conjunto)

Exemplo de uso do HOC:

const childrenComponent = higherOrderComponent(InitialComponent)

Creating React Application:

Abaixo, um exemplo completo de como criar uma aplicação usando React JS - 2024

No terminal da sua IDE favorita ( no exemplo VS CODE ) digite o seguinte comando.

npx create-react-app project-name

cd project-name

Estruturar em pastas principais com nomes objetivos garante uma organiozação do projeto eficaz, e facilita futuras mudanças e implementações.
Exemplo de pastas:
[src]

App.css
App.js
index.css
index.js
logo.svg
Name.js
reportWebVital.js
setupTests.js
.gitignore
package-lock.json
package.json
README.md

Exemplo de aplicação prática do pattern Higher-Order Components (HOCs)

Sugestão de estudos:
[https](www.geeksforgeeks.org/courses/react-js-beginner-to-advance?utm_campaign=662_reactjs_higherorder_components&utm_medium=gfgcontent_icp&utm_source=geeksforgeeks)://

Seguindo o exemplo da estrutura de código mostrada anteriormente, podemos aplicar o HOC no arquivo Name.js:

`import React from 'react'
const componenteEncapsulado = (ComponenteOriginal) => {
class novoComponente extends React.Component {
// Sua lógica aqui
render() {
// Chame a props no componente original
return
}
}
// Retornar o novo componente
return novoComponente
}

export default componenteEncapsulado;

``import React from "react";
import "./App.css"
import componenteEncapsulado from './Name'

class App extends React.Component {
render() {
// Chama a props do componente original
return

{this.props.name}

}
}
// Passando o componente original
export default componenteEncapsulado(App);``

Obrigado por ler até aqui!

Os exemplos de código foram feitos com class-based-components mas voce pode replicar de todas as formas possíveis, bons estudos.