https://github.com/alanborgesdev/quest-react-base
https://github.com/alanborgesdev/quest-react-base
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/alanborgesdev/quest-react-base
- Owner: alanborgesdev
- Created: 2025-03-02T14:56:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-07T23:57:35.000Z (over 1 year ago)
- Last Synced: 2025-03-08T00:26:24.652Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://quest-react-base-eosin.vercel.app/
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🖥️ Projeto React - Formulário com Validação
Este projeto foi desenvolvido utilizando **React** e tem como objetivo criar um formulário com validação de entrada de dados.
## 📌 Funcionalidades
✔️ Validação de campos obrigatórios
✔️ Estilização com CSS
✔️ Componentização de elementos
✔️ Uso do ESLint para padronização do código
✔️ Componente para transformar texto em maiúsculo e colorido
✔️ Botão que exibe um alerta com a label ao ser clicado
## 🚀 Tecnologias utilizadas
- React.js
- JavaScript (ES6+)
- CSS3
- ESLint
## 🐂 Estrutura do projeto
```
QUEST-REACT-BASE/
├ 📂 node_modules/
├ 📂 public/
├ 📂 src/
│ ├ 📂 assets/
│ ├ 📂 components/
│ │ ├ 📂 AlertButton/
│ │ │ ├ 📄 index.css
│ │ │ ├ 📄 index.jsx
│ │ ├ 📂 StyledTex/
│ │ │ ├ 📄 index.css
│ │ │ ├ 📄 index.jsx
│ ├ 📄 App.jsx
│ ├ 📄 main.jsx
├ 📄 .gitignore
├ 📄 eslint.config.js
├ 📄 index.html
├ 📄 package.json
├ 📄 package-lock.json
├ 📄 README.md
├ 📄 vite.config.js
```
## ▶️ Como rodar o projeto
1. **Clone o repositório:**
```bash
git clone https://github.com/alanborgesdev/quest-react-base
```
2. **Acesse a pasta do projeto:**
```bash
cd quest-react-base
```
3. **Instale as dependências:**
```bash
npm install
```
4. **Inicie o servidor de desenvolvimento:**
```bash
npm run dev
```
5. **Abra no navegador:**
O projeto estará rodando em: `http://localhost:3000`
## 📌 Componentes criados
### 🛠️ AlertButton
- Nome do componente: `AlertButton`
- Funcionalidade:
- Renderiza um botão estilizado.
- Ao ser clicado, exibe um `alert` com a mensagem: `"A label desse botão é "`.
### 🛠️ StyledTex
- Nome do componente: `StyledTex`
- Funcionalidade:
- Aplica estilos personalizados ao texto.
## 📌 Autor
Projeto desenvolvido por **[Alan Borges](https://github.com/alanborgesdev)** no curso **DevQuest**.