1
resposta

[Projeto] Refatoração

Pessoal eu refatórei a pagina posts pois achei que ela estava com muita responsabilidade e pensei em criar um componente para cuidar disso e ela chamar o componente, então criei um componente chamado blog e dentro dele carreguei toda a estrutura necessária para página posts funcionar, exceto algumas coisas então o meu JSX do blog No JSX do blog que está logo a baixo eu recebi como prop o a constante Post e no JSX do Post eu passei ele como prop, se não fosse assim ele não iria conseguir renderizar os posts, em baixo tem os dois códigos se alguém quiser olhar

import PaginaPadrao from 'Components/PaginaPadrao'
import PostModelo from 'Components/PostModelo'
import React from 'react'
import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
import { Route, Routes } from 'react-router-dom'

export default function Blog({post}) {
   return (
      <Routes>
         <Route path='*' element={<PaginaPadrao />}>
            <Route index element={
               <PostModelo
                  fotoCapa={`/assets/posts/${post.id}/capa.png`}
                  titulo={post.titulo}
               >
                  <div className="post-markdown-container">
                     <ReactMarkdown>
                        {post.texto}
                     </ReactMarkdown>
                  </div>

               </PostModelo>
            }
            />
         </Route>

      </Routes>
   )
}
import React from 'react'
import {  useParams } from 'react-router-dom'
import posts from 'json/posts.json';
import './Post.css'
import NotFound from 'paginas/NotFound';
import Blog from 'Components/Blog';

export default function Post() {
   const params = useParams();
   const post = posts.find((post) => {
      return post.id === Number(params.id);
   });
   if (!post) {
      return <NotFound />
   }
   return (
      <Blog post={post}/>

   )
}

foi uma refatoração legal e me deixou bem contente por ter conseguido fazer isso pois me fez ver que eu estou aprendendo um pouco mais e ver que meu projeto ainda funciona do jeito que foi planejado é muito bom, ainda falta algumas coisas que eu quero alterar nele, coisa de estilização e também esses posts do inicio, quero trocar eles por outra coisa, quero trocar eles pelos projetos que eu já fiz, agora só falta criar um logo, reestilizar e publicar o site

1 resposta

Oi Israel, tudo bem?

Que legal essa sua atitude de refatorar e melhorar o código! Parabéns por essa atitude, ficou super massa.

É um ótimo jeito de praticar mesmo. Sentimos uma satisfação muito boa quando percebemos que estamos aprendendo de verdade. :D

Sinta-se sempre livre para postar suas sugestões e dicas aqui.

Um abraço e bons estudos.