Crie um portfólio usando o React e o GitHub Student Developer Pack

Anupam Dagar Seguir Jul 11 · 8 min ler

Neste blog, criaremos um site de portfólio usando o React e as ferramentas fornecidas pelo GitHub Student Developer Pack.

O que é o GitHub Student Developer Pack? Nunca ouvi falar disso.

Ferramentas do mundo real, como serviços de hospedagem em nuvem, nomes de domínio, softwares específicos, podem ser caras para os alunos. É por isso que o GitHub criou o Student Developer Pack em parceria com outras empresas de tecnologia para oferecer aos alunos acesso gratuito às melhores ferramentas de desenvolvedor em um só lugar.

Isso é ótimo. O que tudo está incluído no Student Developer Pack?

Atualmente, existem 23 serviços e ferramentas incluídos no pacote que podem ser usados por um aluno. Alguns dos serviços são: 50 $ de créditos no Oceano Digital, um Heroku Hobby Dev Dyno grátis por dois anos, um nome de domínio .me grátis, envio por e-mail via SendGrid com limites mais altos, integração contínua privada através do Travis CI e muito mais.

Impressionante. Como posso candidatar-me?

Para se inscrever no GitHub Student Developer Pack, você precisa ser um aluno atual. Se você não é um estudante, então você não está qualificado para o pacote. Inscreva-se no pacote de desenvolvedores do aluno em https://education.github.com/pack . Clique em obter o pacote e siga as solicitações na tela. Se você não tiver um endereço de e-mail emitido pela escola que termine em .edu, também precisará de um ID de escola válido ou outro comprovante de inscrição, como uma foto da sua programação, que será analisada pela equipe do GitHub. Leva de 24 a 48 horas para que a solicitação seja revisada.

Um resumo sobre o que vem a seguir

Neste blog, criaremos um site de portfólio usando o React e as ferramentas fornecidas pelo GitHub Student Developer Pack. Para isso, usaremos o Heroku dyno gratuito do Pack e o domínio Namecheap gratuito. Também usaremos o GitHub para enviar nosso código e implantar nas páginas do GitHub.

Começando

Antes de nos aprofundarmos na parte de codificação, primeiro instalaremos as ferramentas necessárias. Eu vou estar usando o gerenciador de pacotes de yarn . Você pode encontrar instruções para instalar o fio em https://yarnpkg.com/lang/en/docs/install/
1. Reagir
Instalar e criar um aplicativo chamado portfolio chamado usando o seguinte comando
yarn create react-app portfolio

2. CLI de Heroku
Execute o seguinte comando para instalar o Heroku CLI no Ubuntu 16+ OS.
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
Instrução para todos os outros sistemas operacionais pode ser encontrada em https://devcenter.heroku.com/articles/heroku-cli
Certifique-se de fazer o login no Heroku CLI usando o comando de heroku login .

3. Instale páginas gh e pacote fontawesome usando

 fio adicionar páginas gh 
fio adicionar @ fortawesome / fontawesome-svg-core
adicionar fio @ fortawesome / free-solid-svg-icons
fio adicionar @ fortawesome / react-fontawesome
fio adicionar @ fortawesome / free-brands-svg-ícones

Codificando a Carteira

Nós estaremos usando o modelo de currículo do Bootstrap 4 para construir nosso portfólio. O modelo pode ser encontrado aqui. https://github.com/BlackrockDigital/startbootstrap-resume

Copiando jquery e bootstrap
Crie diretórios css e js dentro da pasta pública e copie os seguintes arquivos para ele a partir do modelo baixado.
1. bootstrap.min.css
2. resume.min.css
3. bootstrap.bundle.min.js
4. jquery.easing.min.js
5. jquery.min.js
6. resume.min.js

Vinculando as dependências adicionadas
Abra o index.html dentro do diretório público e vincule o css e js copiados da seguinte maneira:
Para CSS
<link href="%PUBLIC_URL%/css/cssfilename.css" rel="stylesheet">
Para o Javascript
<script src="%PUBLIC_URL%/js/jsfilename.js"></script>

Adicionando modelo à estrutura baseada no componente React
O modelo de currículo do Bootstrap precisa ser dividido em componentes. Crie um diretório Components no diretório src onde todos os componentes residirão. Vamos dividi-lo nos seguintes 7 componentes:
1. Sidebar.js
2. Landing.js
3. Experience.js
4. Education.js
5. Skills.js
6. Interests.js
7. Awards.js

Usando o json como um armazenamento de dados do usuário
Crie um arquivo json dentro do diretório src com o nome profileData.json . Este arquivo irá conter os dados do portfólio para o usuário. A estrutura do arquivo json é a seguinte:

Cada key do json é nomeada para o componente dos dados que serão usados.

Modificando App.js
App.js é o arquivo principal que importa todos os outros componentes e define a estrutura do site.

Primeiro, importamos todos os componentes criados e os dados do usuário do json criado. No construtor, definimos o state de cada componente com seus respectivos dados do json. Esses dados do estado serão passados para os componentes como props . Todos os componentes são organizados de acordo com o modelo do Bootstrap.

Criando Sidebar.js
O componente da barra lateral consiste no código da barra lateral do site. Esta é a tag de nav completa do modelo. Antes de copiar o código do modelo, certifique-se de torná-lo compatível com jsx . class deve ser renomeada para className ou você pode usar este https://magic.reactjs.net/htmltojsx.htm para converter seu HTML em JSX.

No construtor de cada componente, os dados dos adereços serão atribuídos a uma variável através da qual ele será adicionado à sua posição relevante no jsx .

Para o componente da Barra Lateral, isso é feito como this.sidebarData = props.sidebarData . Isso é feito de maneira semelhante para todos os outros componentes.

Substitua todos os nomes e campos codificados pelos dados do JSON. Para fazer isso, faça referência aos seus dados JSON por meio da variável à qual os objetos transmitidos ao componente são atribuídos. A sintaxe para referenciar uma variável no JSX é referenciar a variável dentro de chaves. Portanto, o primeiro nome do usuário na barra lateral pode ser acessado como {this.sidebarData.firstName} . Todos os outros campos de dados podem ser acessados e substituídos pelos dados do JSON de maneira semelhante.
Encontre Sidebar.js no GitHub no seguinte link.

Anuário-Dagar / GitHub-Education-Portfolio / src / Componentes / Sidebar.js

Código-fonte do Sidebar.js para o GitHub Education Portfolio.

github.com