⚠️ Neste site, eu treino a aplicação dos conceitos fundamentais de ReactJS que aprendi durante o módulo de ReactJS do PretaLab.
- Componentes e JSX;
- Props;
- State;
- Introdução aos eventos;
- Listas e chaves;
- Introdução aos hooks (useState e use Effect);
- Como usar css no reactjs;
- Como criar rotas no reactjs - react router dom;
- Implementação de formulário com dados coletados e armazenados no Firebase;
- Deploy, no Vercel, e configuração para evitar o erro 404;
- Responsivo para celular e tablet.
O site já está no ar e você pode acessar aqui: Meu site pessoal!
O objetivo era criar um site usando ReactJS, onde eu pudesse me apresentar e enriquecer o meu portfólio.
| Ferramenta | Descrição |
|---|---|
ReactJS |
framework web |
Vite |
gerador de projeto de front-end |
npm |
gerenciador de pacotes |
Firebase |
Ferramenta realtime database para gravar as mensagens de contato |
Module CSS |
Ferramenta para ter mais produtividade ao estilizar a aplicação |
Phosphor |
Dependência com icones super legais |
React router dom |
Dependência para criar rotas no reactjs |
Axios |
Dependência para consumir api |
Vercel |
Hospedagem para a aplicação, fiz o deploy integrado com o github |
Github |
Hospedagem do código fonte integrado com gerenciador de versionamento |
Siga os passos e inclua as informações abaixo:
| Passo | Comando/informação |
|---|---|
| Faça o fork | botão de forkar |
| Faça o clone | git clone |
| Instale as dependências após acessar a pasta projeto | npm i |
| Crie as variaveis de ambiente para integrar com Firebase e inclua os valores da sua conta | conforme .env.example e lista abaixo |
| Rode o projeto | npm run dev |
Variáveis de ambiente
- VITE_API_KEY=
- VITE_AUTH_DOMAIN=
- VITE_PROJECT_ID=
- VITE_STORAGE_BUCKET=
- VITE_MESSAGING_SENDER_ID=
- VITE_APP_ID=
- VITE_DATABASE_URL=
Foi incrível compartilhar essa jornada com você! Qualquer dúvida ou sugestão, chama no contatinho!
Feito com 💜 por Luísa Paim.