An Interest In:
Web News this Week
- April 3, 2024
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
Some of Our Sources
- Slashdot
- Engadget
- Mashable
- Techcrunch
- TutsPlus - Code
- Vandelay Design
- Fuel Your Creativity
- Web Designer Depot
- Codrops
- Dev To
Help Webnuz
Referal links:
SOLID in React- OCP - Open-Closed Principle
Embora tenha sido concebido para a programao orientada a objetos, os princpios do SOLID podem ser aplicados em outros contextos como em componentes React.
- Este post aborda o "O" do S[O]LID
- Criado com Next 13 + React 18
- Codepen no final do post
- A aplicao inicia com o SRP aplicado
OCP - Open-Closed Principle
O Open Closed Principle (Princpio Aberto/Fechado) preconiza que uma entidade de software (classe, mdulo, funo, etc.) deve estar aberta para extenso (ou seja, deve ser possvel adicionar novos comportamentos ou funcionalidades sem modificar o cdigo existente) e fechada para modificao (ou seja, o cdigo existente no deve ser modificado para adicionar novos comportamentos ou funcionalidades).
Suponha que temos uma lista de usurios que podem ser exibidos em um componente em nossa aplicao. Inicialmente, exibimos apenas o primeiro nome e o gnero do usurio com um cone ao lado do nome, sendo azul para usurios masculinos e vermelho para usurios femininos.
No contexto de componentes, o princpio Aberto/Fechado no est sendo aplicado ao cdigo fornecido. Isso ocorre porque o componente ListUsersBefore precisa ser alterado se houver a necessidade de adicionar um filtro de usurios, componentes ou propriedades dentro dele. Isso viola o princpio, pois o componente deve estar aberto para extenso e fechado para modificao.
/** * ocp * ListUsersBefore * hooks * useUsers * index.ts * index.tsx * styles.ts */Componente principal:
//ocp/ListUsersBefore/index.tsximport { FaFemale, FaMale } from 'react-icons/fa';import { useUsers } from './hooks/useUsers';import { S } from './styles';export const ListUsersBefore = () => { const { data, isLoading } = useUsers(); return ( <> {isLoading && <div>Loading...</div>} {data.map((user) => ( <S.Div gender={user.gender} key={user.email} > {(user.gender === 'female' && <FaFemale />) || <FaMale />} <span>{user.name.first}</span> </S.Div> ))} </> );};Estilos do componente principal:
//ocp/ListUsersBefore/styles.tstype StyledUserProps = { gender: 'male' | 'female';};export const S = { Div: styled.div<StyledUserProps>` color: ${(props) => (props.gender === 'male' ? 'blue' : 'red')}; border: 1px solid; max-width: 200px; padding: 0.2rem; margin-bottom: 0.2rem; border-radius: 4px; `};Hook que fornece os dados:
//ocp/ListUsersBefore/hooks/useUsers/index.tsximport axios from 'axios';import { useEffect, useState } from 'react';type User = { name: { first: string; }; email: string; gender: 'male' | 'female';};type useUsersReponse = { data: User[]; isLoading: true | false; error: null | string;};export const useUsers = (): useUsersReponse => { const [data, setData] = useState<User[]>([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState<null | string>(null); const handleFetch = async () => { setIsLoading(true); try { const url = `https://randomuser.me/api/?results=5`; const res = await axios.get(url); setError(null); setData(res.data.results); } catch (err) { setError('Error get Users!'); } setIsLoading(false); }; useEffect(() => { handleFetch(); }, []); return { data, isLoading, error };};Original Link: https://dev.to/renantsx/solid-in-react-ocp-open-closed-principle-473m
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To