https://github.com/bernardoadribeiro/exemplo-reactapp
Esse projeto implementa um simples app em ReactJS para atividade prática em sala de aula. Ele também serve como base para projetos simples e containerizados em ReactJS
https://github.com/bernardoadribeiro/exemplo-reactapp
docker docker-compose reactjs
Last synced: 3 months ago
JSON representation
Esse projeto implementa um simples app em ReactJS para atividade prática em sala de aula. Ele também serve como base para projetos simples e containerizados em ReactJS
- Host: GitHub
- URL: https://github.com/bernardoadribeiro/exemplo-reactapp
- Owner: bernardoadribeiro
- Created: 2023-03-15T21:54:21.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-22T22:15:59.000Z (over 3 years ago)
- Last Synced: 2025-03-16T14:16:42.572Z (over 1 year ago)
- Topics: docker, docker-compose, reactjs
- Language: JavaScript
- Homepage:
- Size: 277 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Exemplo React App
## Sobre
Esse projeto implementa um simples app em ReactJS para atividade prática em sala de aula. Ele também serve como base para projetos simples e containerizados em ReactJS.
No arquivo [Step-By-Step](Step-By-Step.md) há o passo a passo realizado para construção dessa aplicação de exemplo.
Desenvolvemos essa proposta de App como requisitado na matéria de Desenvolvimento Web do curso de Bacharelado em Sistemas de Informação (IFNMG Campus Januária), para que os demais alunos da turma possam usar este projeto como base para aprender o framework JavaScript, ReactJS.
### Especificação do projeto
- Construir uma interface simples usando o framework ReactJS.
- Realizar integração da interface com a API do **[Cataas](https://randomuser.me/)** e exibir as informações do usuário.
- Utilizar o hook [useEffect](https://beta.reactjs.org/reference/react/useState).
- Endpoint que será utilizados: `GET https://randomuser.me/api`
**Obs:** Essa é uma aplicação simples, pode ser que alguns tratamento de erros e/ou segurança não estejam disponíveis na versão atual.
## Tecnologias
O app está containerizado com Docker, e a interface foi desenvolvida usando React.
- JavaScript + framework ReactJS
- Docker + Docker-compose
## Setup do projeto
**Requisitos:**
- Docker e Docker-compose devem estar instalados em sua máquina local.
- É recomendado que use um ambiente Linux para rodar o projeto (pode ser WSL)
**Como rodar o projeto**
- Clone o repositorio: `git clone https://github.com/bernardoadribeiro/agendahair-app.git`
- Acesse a pasta do projeto: `cd exemplo-reactapp`
- (Abra o Docker Desktop antes de continue se você estiver usando o WSL)
- Comando: `docker-compose up` and wait.
- Você verá uma mensagem de sucesso no terminal e o link para acessar o projeto no *localhost*
**Como acessar o App**
- Front-end URL: http://localhost:3000
**Comandos úteis**
- `docker-compose up`: Sobe todos os containers
- `docker-compose down`: Para todos os containers
- `docker-compose up --build`: Faz o build de todos os containers
- Cria o projeto em ReactJS: `npx create-react-app my-app` -> "my-app" substitua pelo nome do App
- Instala as dependencias do React localmente: `cd frontend && npm install` (caso for rodar o projeto localmente)
- Inicia o app localmente em modo de desenvolvimento `npm start`