Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davimateus1/semanadacomputacao
Repositório destinado a semana da computação, onde ministrei o Minicurso: Introdução e Conceitos Primordiais com ReactJS abordando vários conceitos essenciais e realizando um projeto do zero ao deploy.
https://github.com/davimateus1/semanadacomputacao
axios css react-icons react-loading react-router reactjs rick-and-morty
Last synced: 29 days ago
JSON representation
Repositório destinado a semana da computação, onde ministrei o Minicurso: Introdução e Conceitos Primordiais com ReactJS abordando vários conceitos essenciais e realizando um projeto do zero ao deploy.
- Host: GitHub
- URL: https://github.com/davimateus1/semanadacomputacao
- Owner: davimateus1
- Created: 2022-05-17T00:00:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-05-18T00:26:06.000Z (over 2 years ago)
- Last Synced: 2024-10-25T10:40:43.534Z (3 months ago)
- Topics: axios, css, react-icons, react-loading, react-router, reactjs, rick-and-morty
- Language: JavaScript
- Homepage: https://semana-da-computacao.vercel.app
- Size: 1.93 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Semana da Computação UNICAP - 2022
### ✨ Dia 1
No primeiro dia do minicurso, apresentei alguns conceitos primordiais no ReactJS, também dei a explicação de diversos conceitos de uma forma bastante detalhada para que os alunos conseguissem um entendimento melhor não só da prática, mas também da teoria e tudo que acontece por "de trás" dos panos no React, as abordagens desse primeiro dia foram as seguintes:
- Oque é o Node.js e React JS?
- Gerenciador de pacotes (NPM e Yarn)
- Criação de um projeto React com node
- Estrutura de um projeto com o React
- Oque é o JSX?
- Componentização e props
- Hooks do React
- Renderização condicional
Além de todos esses conceitos explicados, ainda fomos pra prática e mostrei tudo detalhadamente dando exemplos comuns que podem ocorrer na rotina normal de um desenvolvedor Front-end.
### ✨ Dia 2
No segundo dia do minicurso, apresentei o restante dos conceitos primordiais no ReactJS, também dei a explicação desses conceitos de uma forma bastante detalhada para que os alunos conseguissem um entendimento melhor não só da prática, mas também da teoria e tudo que acontece por "de trás" dos panos no React, as abordagens desse segundo dia foram as seguintes:
- Consumo de módulos externos
- Consumo de API com Axios
- Rotas com React Router DOM
- Projeto para fixação e portfólio
Além de todos esses conceitos explicados, ainda fomos para a prática e criamos um projeto do zero ao deploy abordando todos os conceitos que foram explicados durante o minicurso e que também servirá de portfólio para os alunos.
Projeto semana da Computação: Universo do Rick e Morty
Tecnologias |
Projeto |
Deploy do Projeto |
Como executar
🖥️ Tela principal:
🖥️ Tela de personagens:
🖥️ Tela de Erro:
📱 Telas responsivas:
## ✨ Tecnologias
Esse projeto foi desenvolvido com as seguintes tecnologias:
- [ReactJS](https://reactjs.org)
- [React Icons](https://react-icons.github.io/react-icons/search)
- [React Router](https://reactrouter.com)
- [React Loading](https://www.npmjs.com/package/react-loading)
- [Axios](https://axios-http.com/docs/intro)
- [CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS)
- [Rick and Morty API](https://rickandmortyapi.com)
## 💻 Projeto
Esse projeto foi desenvolvido para repassar conhecimentos aos alunos durante o minicurso que fui ministrante (Introdução e Conceitos Primordiais com ReactJS), o projeto consiste em uma aplicação simples consumindo a Rick and Morty API que é uma apli pública e pondo em prática todos os conceitos que foram dados durante o minicurso (useState, useEffect, uso de bibliotecas externas, Axios, renderização condicional, rotas com React Router DOM, componentização e etc).
## 🚀 Deploy do Projeto
Você pode ver o funcionamento através [desse link](https://semana-da-computacao.vercel.app).
## 🚀 Como executar
- Clone o repositório
- Instale o [NPM](https://www.npmjs.com)
- Instale as dependências com `npm install` no terminal
- Inicie o projeto com `npm start` e após isso abra o `localhost:3000` no seu navegador
- Fique a vontade para explorar e testar as funcionalidades do projeto
---