https://github.com/stringgustavo/fatec-crud-front-4sem
https://github.com/stringgustavo/fatec-crud-front-4sem
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/stringgustavo/fatec-crud-front-4sem
- Owner: stringGustavo
- Created: 2025-05-24T16:00:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-28T21:11:32.000Z (about 1 year ago)
- Last Synced: 2025-06-08T11:10:25.191Z (about 1 year ago)
- Language: JavaScript
- Size: 44.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Criação de um CRUD de usuários
Este repositório tem como objetivo ensinar, passo a passo, a criação de um CRUD básico, que contenha as 4 operações básicas de manipulação de dados:
**C —** ```Create``` (Criar): adicionar novos dados.
**R —** ```Read``` (Ler): consultar ou visualizar dados já existentes.
**U —** ```Update``` (Atualizar): modificar dados já existentes.
**D —** ```Delete``` (Excluir): apagar dados do sistema.
### Acesse aqui o [Repositório do BackEnd](https://github.com/stringGustavo/fatec-crud-api-4sem)
## Criando o Projeto e Instalando Depenências
#### Primeiramente, vamos criar o projeto React + Vite.
```bash
npm create vite@latest
```
#### Instalando React Icons e Axios.
```
npm install react-icons --save
npm install axios
```
Neste projeto foi utilizado o *framework* TailwindCSS para a estilização dos componentes.
#### Instalando o TailwindCSS.
```
npm install tailwindcss @tailwindcss/vite
```
Após a instalação, adicione o plugin do TailwindCSS no arquivo ```vite.config.js```.
```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
})
```
Pra finalizar com o TailwindCSS, adicione o código abaixo no arquivo ```index.css```
```css
@import "tailwindcss";
```
Para certificar que tudo está instalado abra o arquivo ```package.json``` e verifique se as dependências estão da seguinte forma abaixo.
```json
"dependencies": {
"@tailwindcss/vite": "^4.1.7",
"axios": "^1.9.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"tailwindcss": "^4.1.7"
},
```
Agora que tudo está instalado, podemos começar a desenvolver o nosso FrontEnd.
## Criando a página principal
Antes de editar o ```App.jsx```, crie a pasta ```componentes``` e dentro dela crie os seguintes componentes:
```Form.jsx ``` Será o componente responsável por lidar com o preenchimento do formulário de cadastro de usuário.
```Content.jsx``` Será o componente criado para visualizar as informações dos usuários cadastrados pelo formulário.
No arquivo ```App.jsx```, comece com as importações necessárias.
```js
import Form from './components/Form' // Importação do componente Form.jsx
import Content from './components/Content' // Importação do componente Content.jsx
import { useState } from 'react'; // Importação do hook useState
```
Como neste projeto teremos estados que precisam ser alterados em ambos componentes filhos (Content e Form), todos os estados precisam ficar no componete pai, já que só é possível enviar ```props``` da componente ```Pai``` para componente ```Filho```.
```js
const App = () => {
const [updateTrigger, setUpdateTrigger] = useState(false); // Responsável por ativar ou desativar a função de atualizar um usuário.
const [isChanged, setIsChanged] = useState(false); // Responsável por detectar se os dados mudaram (algo foi adicionado, deletado ou atualizado)
const [formData, setFormData] = useState({ // Objeto responsável por armazenar informações do usuário (em Content.jsx) que será atualizado (em Form.jsx).
id: '',
name: '',
email: '',
birth: '',
register: '',
});
return (
)
}
export default App;
```