Aprenda a construir um portfólio em React do zero, utilizando componentes, props, estilização CSS e React Icons. Este artigo apresenta um guia detalhado para a criação de um portfólio completo, ideal para impressionar recrutadores e clientes em potencial.
Construindo um portfólio em React
Neste projeto, vamos construir um portfólio em React do zero, aplicando todo o conteúdo aprendido até agora sobre a biblioteca React. Vamos criar vários componentes React, entender como eles podem ser reutilizados, aplicar props e também trabalhar com estilização CSS. O objetivo é ter uma aplicação completa que servirá para mostrar projetos e impressionar recrutadores ou potenciais clientes.
- Aprender a construir um portfólio em React do zero
- Entender a reutilização de componentes em React
- Aplicar props e estilização CSS
- Criar uma aplicação completa para mostrar projetos e impressionar recrutadores ou potenciais clientes
Aprenda mais gratuitamente com os nossos cursos!
E aí, bora virar expert? Disponibilizamos 3 aulas gratuitas na plataforma da DNC do curso Introdução ao React!
Crie uma conta e comece agora a transformar sua carreira!
Preparando o ambiente
Para começar, vamos iniciar um novo projeto React com o comando: npx create-react-app portfolio. Isso vai configurar um ambiente com React já preparado para usarmos. Depois, dentro da pasta src, criaremos uma pasta components e dentro dela uma pasta sections para organizarmos nossos componentes.
- Iniciar um novo projeto React com npx create-react-app
- Organizar os componentes em pastas para uma melhor estruturação
Criando os componentes de seção
Nosso portfólio terá 5 seções principais: Navbar, Presentation, Skills, Projects e Footer. Para cada seção, vamos criar um componente React específico e importá-lo dentro do App.js. Dessa forma, já segmentamos nosso app em diferentes partes.
- Criar um componente React específico para cada seção do portfólio
- Segmentar o app em diferentes partes para uma melhor organização
Estilização Global
Antes de trabalharmos em cada componente, vamos adicionar algumas configurações globais de estilo que servirão para todos. No index.css, adicionamos definições de fontes, cores e remoção de alguns padrões dos elementos.
- Adicionar configurações globais de estilo para todos os componentes
- Definir fontes, cores e remover padrões dos elementos no index.css
Construindo o Navbar
No componente Navbar.js, vamos criar um menu de navegação com links para as diferentes seções do portfólio. Além disso, vamos estilizar o navbar com CSS para uma melhor apresentação visual.
- Criar um menu de navegação com links para as diferentes seções do portfólio
- Estilizar o navbar com CSS para uma melhor apresentação visual
Barra de Navegação Responsiva
A barra de navegação é um elemento crucial em qualquer site, pois fornece a estrutura para a navegação do usuário. Neste contexto, foi desenvolvida uma barra de navegação bonita e responsiva, utilizando HTML, CSS e flexbox para garantir uma experiência agradável ao usuário, independentemente do dispositivo utilizado.
- A importância da barra de navegação em um site
- Utilização de HTML e CSS para criar uma barra de navegação responsiva
- Flexbox como técnica para garantir a responsividade
Seção de Apresentação
A seção de apresentação é uma parte fundamental em um site pessoal ou profissional, pois permite ao visitante conhecer mais sobre o indivíduo ou a empresa por trás do site. Neste caso, a seção de apresentação foi cuidadosamente elaborada, incluindo informações relevantes sobre o desenvolvedor, seu foco em tecnologias específicas e um convite para interação.
- Importância da seção de apresentação em um site
- Estruturação e conteúdo relevante para a seção de apresentação
- Convite para interação como estratégia de engajamento
Seção de Habilidades
A seção de habilidades é uma oportunidade para o desenvolvedor exibir suas competências e áreas de especialização. No contexto do artigo, a seção de habilidades apresenta ícones representativos das tecnologias em que o desenvolvedor possui expertise, proporcionando uma visualização rápida e impactante das suas principais habilidades.
- Importância da seção de habilidades em um site de desenvolvedor
- Utilização de ícones para representar as habilidades
- Visualização rápida e impactante das competências do desenvolvedor
Seção de Projetos
A seção de projetos é uma oportunidade para o desenvolvedor exibir trabalhos anteriores e projetos relevantes, demonstrando suas capacidades e experiências passadas. No artigo, a estrutura básica da seção de projetos é introduzida, destacando a importância de apresentar informações relevantes e atraentes sobre cada projeto listado.
- Importância da seção de projetos em um site de desenvolvedor
- Destaque para projetos anteriores e relevantes
- Apresentação de informações atrativas sobre cada projeto
Estilizando Projetos Dinâmicos em React
A estrutura do código foi organizada de forma a permitir a passagem dinâmica de projetos para o componente Projects, utilizando a prop projects. Isso possibilita a exibição de projetos de forma flexível e escalável.
- A estrutura flexível do código permite a adição e exibição de projetos dinamicamente
- A utilização de props facilita a reutilização do componente Projects em diferentes partes da aplicação
- A flexibilidade proporcionada pela passagem dinâmica de projetos contribui para a escalabilidade da aplicação
Componentização e Reutilização de Código
A criação de componentes como Footer e FooterLinks permite a organização e reutilização de código, tornando a aplicação mais modular e de fácil manutenção.
- A componentização do código facilita a manutenção e a reutilização de elementos em diferentes partes da aplicação
- A reutilização de componentes contribui para a organização e a escalabilidade do código
- A modularização do código torna a aplicação mais flexível e adaptável a futuras mudanças
Estilizando o Rodapé da Aplicação
O rodapé foi estilizado de forma a proporcionar uma experiência visual agradável para o usuário, com ênfase na utilização de cores e ícones para destacar os links de contato.
- A estilização do rodapé contribui para a experiência visual do usuário
- A utilização de cores e ícones auxilia na identificação e destaque dos links de contato
- O design do rodapé foi pensado para proporcionar uma navegação intuitiva e agradável
Conclusão
Ao seguir este passo a passo, você será capaz de criar um portfólio completo em React, aplicando boas práticas de desenvolvimento. Este projeto não apenas demonstrará suas habilidades, mas também poderá ser expandido no futuro, mostrando seu compromisso com a evolução contínua.
