Artigo original: https://www.freecodecamp.org/news/portfolio-app-using-react-618814e35843/
Depois que meus amigos cancelaram nossos planos para o final de semana, eu estava procurando algo para passar o tempo. Olhando para minha longa lista de coisas a fazer, finalmente tive a ideia de criar um portfólio.
Após muitas horas pesquisando tecnologias e modelos, acabei criando este site usando React.js e as páginas do GitHub. Você pode encontrar o código para o portfólio aqui (é tecnicamente chamado de 'web-app', mas, para este artigo, vou me referir a ele como um "site"... espero que não seja um problema).
O que você vai aprender
- Alguns conceitos básicos de React.js
- Como usar o create-react-app a partir de um site HTML
- Como implantar seu portfólio usando as 'páginas do Github '
Alguns conceitos que você precisa saber antes de começarmos...
Obs.: sinta-se à vontade para pular esta parte se você já estiver familiarizado com os conceitos básicos de React.js e React Components.
Esses pontos apresentarão uma ideia muito básica do mundo do React. Recomendo que você estude mais sobre o React a partir da documentação (em inglês) e coloque a mão na massa com a ajuda do freeCodeCamp.
O que é o React.js
Por enquanto, basta saber que React.js é uma biblioteca JavaScript usada para construir componentes de Interface do Usuário. Ele foi criado pelos engenheiros do Facebook e hoje em dia, está balançando o mundo JavaScript...
O que é um React Component
O React permite definir componentes como uma classe ou uma função. Você pode fornecer entradas opcionais para os componentes chamadas de "props".
Os componentes permitem dividir a Interface do Usuário em seções independentes, como cabeçalho, rodapé e corpo. Cada componente funcionará de modo independente para que qualquer componente individual possa ser renderizado independentemente no ReactDOM sem afetar a página inteira.
Ele também vem com 'lifecycle methods' (métodos de ciclo de vida, em tradução livre) e que permitem definir blocos de código que você deseja executar de acordo com o estado do componente, como montagem, renderização, atualização e desmontagem.
Os componentes do React têm suas próprias vantagens e desvantagens. Por exemplo, podemos reutilizar um componente exportando-o para outros componentes, mas às vezes fica confuso lidar com vários componentes conversando e acionando renderizações um para o outro.
Esta é a aparência de um React Component:
import React, { Component } from 'react'
export default class Component-name extends Component {
render() {
return (
<div>
{código que será renderizado no DOM}
</div>
)
}
}O que é o GitHub Pages
Com o GitHub Pages, você pode implantar facilmente seu site usando o GitHub gratuitamente e sem a necessidade de configurar nenhuma infraestrutura. Eles forneceram módulos para que você não precise se preocupar com muitas coisas. Se você ler este artigo até o final, verá que funciona como MÁGICA!
Antes de prosseguir, certifique-se de...
Decidir qual o conteúdo que você deseja colocar em seu site
Revise seu último currículo (caso você ainda não tenha um, que tal criar um agora e adiar este projeto até o próximo fim de semana?). Isso ajudará você a ter uma ideia clara sobre o tipo de informação que deseja colocar no seu portfólio.
Encontrar inspiração
Navegue pelas centenas de modelos de sites de portfólio gratuitos, veja como e o que você pode usar deles - pegue uma caneta e papel e esboce um diagrama para ter uma ideia de como você gostaria que fosse o seu portfólio. Vou usar este modelo para demonstrar.
Selecionar algumas fotos pessoais
É claro que você não quer parecer mal em seu próprio portfólio. Então, explore seus arquivos para encontrar as fotos perfeitas para o seu site.
Colocar a sua playlist favorita
Diz a lenda que coisas boas sempre vêm acompanhadas de boa música... e é claro que você não quer perder a parte boa, não é?
Vamos para a parte de construção
Nas seções a seguir, descreverei as etapas para a criação do portfólio, mas você não precisa seguir o mesmo código que eu uso. Concentre-se em aprender os conceitos e mostre alguma criatividade! A leitura complementar foi dividida em três seções.
- Configurando o React-app
- Separando a página HTML em componentes do React
- Implementando seu aplicativo usando as páginas do GitHub
Configurando o React-app
Usaremos o create-react-app — um módulo fornecido pelo Facebook — que nos ajuda a criar aplicativos React.js com facilidade e sem se preocupar com ferramentas de construção.
- Abra o seu console e execute o seguinte comando
npm install create-react-apppara instalar este módulo via npm (certifique-se de ter instalado onpmantes de executar o código — caso tenha dúvidas, acesse esse link para mais informações). - Execute
npm create-react-app ${nome-do-projeto}que buscará scripts de compilação e criará uma estrutura de arquivos parecida com o código abaixo:
my-portfolio-app
├── README.md (descrição do projeto para o GitHUb)
├── node_modules (armazena todos os módulos de dependências do projeto)
├── package.json (armazena todas as metainformações do projeto, como quais são as dependências, versões, revisões etc.)
├── .gitignore (arquivos declarados aqui serão ignorados ao fazer o upload para o GitHub, como a pasta node_modules
├── public (aqui, você armazenará todos os arquivos de imagens, JS e CSS)
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src (o código principal do nosso app fica aqui)
├── {crie a pasta dos componentes - components - aqui}
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.jsCriei uma pasta components sob o diretório src. É nela que armazenaremos nossos componentes no futuro.
- Copie todas as imagens, fontes, arquivos HTML e CSS do
templateHTML com o qual você decidiu trabalhar para a pastapublic.
O diretório do seu projeto deve ficar assim.
- Execute
npm install, que instalará os módulos de dependências no diretórionode_modules. - Se você seguiu todos os passos corretamente até agora, a execução do comando
npm startiniciará o aplicativo React nolocalhost. Digitehttps://localhost:3000no seu navegador e você poderá ver a página inicial do React.
Separando a página HTML em componentes do React
Lembra da pasta component que criamos no diretório src na etapa anterior? Agora vamos dividir a página do modelo HTML em componentes e combinar esses componentes para criar nosso React-app.
- Primeiro, você precisa identificar quais componentes você pode criar a partir do arquivo HTML — como cabeçalho, rodapé e página/componente de contato. Seja criativo nesta etapa!
- Procure por tags como section/div que não estão aninhadas em alguma outra section/div. Elas devem conter código sobre essa seção específica da página que é independente de outras seções. Tente dar uma olhada no meu repositório do GitHub para ter uma ideia melhor.
Dica: use a ferramenta "Inspecionar elemento" para brincar com o código e observar o efeito das alterações no navegador. - Esses trechos de código HTML serão usados no método
render()do componente. O métodorender()retornará este código sempre que um componente for renderizado no ReactDOM. Dê uma olhada nos blocos de código abaixo para referência.
<section id="colorlib-hero" class="js-fullheight" data-section="home">
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/img_bg_1.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
<div class="slider-text-inner js-fullheight">
<div class="desc">
<h1>Hi! <br>I'm Jackson</h1>
<h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
<p><a class="btn btn-primary btn-learn">Download CV <em class="icon-download4"></em></a></p>
</div>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
<div class="slider-text-inner">
<div class="desc">
<h1>I am <br>a Designer</h1>
<h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
<p><a class="btn btn-primary btn-learn">View Portfolio <em class="icon-briefcase3"></em></a></p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>import React, { Component } from 'react'
export default class Home extends Component {
render() {
return (
<div>
<section id="colorlib-hero" className="js-fullheight" data-section="home">
<div className="flexslider js-fullheight">
<ul className="slides">
<li style={{backgroundImage: 'url(images/img_bg_1.jpg)'}}>
<div className="overlay" />
<div className="container-fluid">
<div className="row">
<div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
<div className="slider-text-inner js-fullheight">
<div className="desc">
<h1>Hi! <br />I'm Jackson</h1>
<h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
<p><a className="btn btn-primary btn-learn">Download CV <em className="icon-download4" /></a></p>
</div>
</div>
</div>
</div>
</div>
</li>
<li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
<div className="overlay" />
<div className="container-fluid">
<div className="row">
<div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
<div className="slider-text-inner">
<div className="desc">
<h1>I am <br />a Designer</h1>
<h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
<p><a className="btn btn-primary btn-learn">View Portfolio <em className="icon-briefcase3" /></a></p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
)
}
}Dica: se você estiver ficando muito confuso com o React - tente focar no conceito de 'como identificar os componentes desejados a partir da base de código HTML'. Depois de ficar confortável com o React, a implementação será muito fácil.
Você notou que há algumas mudanças no código HTML? class se tornou className. Estas mudanças são necessárias porque React não suporta HTML ? - eles criaram sua própria sintaxe HTML como JS, que é chamada JSX . Portanto, precisamos alterar algumas partes do código HTML para torná-lo JSX.
Para facilitar o processo, encontrei este conversor de HTML para JSX durante este projeto, que converte o código HTML em JSX automaticamente. Eu recomendo o uso deste em vez de mudar seu código manualmente.
Depois de algum tempo, você deve encontrar alguns componentes diferentes. Agora o EndGame está próximo! Reuna todos estes diferentes componentes sob um único componente em App.js (SIM! Você pode renderizar um componente de outro componente!) e seu portfólio estará pronto!
import React, { Component } from 'react';
import './App.css';
import Sidebar from './components/sidebar'
import Introduction from './components/introduction'
import About from './components/about'
import Projects from './components/projects'
import Blog from './components/blog'
import Timeline from './components/timeline'
class App extends Component {
render() {
return (
<div id="colorlib-page">
<div id="container-wrap">
<Sidebar></Sidebar>
<div id="colorlib-main">
<Introduction></Introduction>
<About></About>
<Projects></Projects>
<Blog></Blog>
<Timeline></Timeline>
</div>
</div>
</div>
);
}
}
export default App;Observe no código acima que precisamos primeiro importar os componentes para então usá-los na seção render(). E podemos usar os componentes apenas adicionando a tag <component-name></component-name> ou apenas a tag <component-name/> no método render.
- Execute
npm startno seu terminal e você poderá ver as alterações refletidas no site. Você não precisa executar este comando novamente se tiver feito mais alterações no código, ele será executado automaticamente quando você salvar essas alterações. Você pode fazer um desenvolvimento extremamente rápido graças ao recurso dehot reload. - Brinque com o HTML e CSS para mudar o conteúdo de acordo com seu currículo e tornar seu portfólio ainda mais legal mudando o conteúdo, experimentando diferentes fontes, mudando as cores e adicionando suas fotos.
Implementando o seu aplicativo usando as páginas do GitHub
Bom, então você sobreviveu até este ponto... aproveite para apreciar seu trabalho duro. Mas você ainda precisa concluir sua implantação para poder compartilhar seu trabalho com seus amigos.
- Primeiro, você precisa instalar a biblioteca npm das páginas do GitHub. Para instalar, execute este comando
npm install gh-pagesno seu terminal.
Depois de instalada, você precisa fazer as seguintes alterações em seu arquivo manifest.json:
- Adicione o campo
homepage— estará no seguinte formato:https://{github_id}.github.io/{github_repo} - Adicione os arquivos
predeployedeployemscripts
Agora o seu manifest.json deverá estar parecido com este:
{
"name": "portfolio-app",
"version": "0.1.0",
"private": true,
"homepage": "https://Dhruv34788.github.io/me",
"dependencies": {
"gh-pages": "^2.0.1",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-scripts": "2.1.5",
"yarn": "^1.13.0"},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test",
"eject": "react-scripts eject"},
"eslintConfig": {
"extends": "react-app"},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}Agora vá para o terminal, execute npm run deploy e espere até que a mágica aconteça! Seu aplicativo será implantado depois que os scripts de implantação forem executados com êxito. Verifique se seu aplicativo foi implantado ou não visitando o link fornecido no campo homepage.
Cuidado: tenha cuidado ao implantar qualquer coisa na web. Realize verificações de segurança, como remover links internos, senhas ou qualquer coisa que você não queira que esteja nas mãos de pessoas inteligentes por aí.
Se você vai fazer mudanças com frequência...
Obs.: você vai precisar fazer essa implantação cada vez que alterar algo no seu código - e adivinhe quem vai ficar entediado em breve? ( Não se preocupe, eu te ajudo :P)
Você pode automatizar o processo de implantação usando o Travis-CI (ferramenta de automação), de modo que, se você confirmar qualquer coisa na branch master/main, as etapas de implantação serão acionadas e o novo site estará disponível automaticamente. Basta seguir o artigo abaixo.
https://www.freecodecamp.org/news/learn-how-to-automate-deployment-on-github-pages-with-travis-ci/
Lição de casa...
Muito bem! Você finalmente criou e implementou seu portfolio usando React! Caso esteja interessado em aperfeiçoar seu portfólio ainda mais, você pode incluir os recursos abaixo:
- Blog: você pode criar o seu próprio blog usando Node.js e MongoDB.
- Galeria: adicione uma seção onde você pode mostrar suas últimas postagens nas mídias sociais.
- Feed do Twitter: você pode criar uma seção onde mostra os seus recentes tuítes.
- Citações aleatórias: pode criar uma seção mostrando algumas citações motivacionais aleatórias.
Se você implementar qualquer uma desses recursos, fique à vontade para compartilhar o seu trabalho comigo. Eu ficaria mais do que feliz em ajudar, se eu puder, é claro.
Concluindo...
Gostaria de dedicar um momento para reconhecer o trabalho das pessoas que me deram a inspiração e o conhecimento para concluir este artigo..
- Quincy Larson, Sahat Yalkabov e toda a comunidade: pela a criação do freeCodeCamp — uma plataforma ondevocê pode aprender sobre qualquer assunto relacionado a tecnologia, com tutoriais práticos e totalmente gratuita.
- Colorlib: por fornecer ótimos templates que foram extramente importantes e inspiradores para a criação do meu portfólio.
- Daniel Lo Nigro e a comunidade: por criarem o HTML to JSX Compiler, que acabou sendo útil ao converter blocos HTML em código JSX.
- Meus queridos amigos: que me ajudaram corrigindo meus erros.
- VOCÊ: por ter chegado até aqui. Espero que tenha tido um tempo produtivo e que continue explorando e construindo coisas incríveis!
