{"id":28495335,"url":"https://github.com/stringgustavo/fatec-crud-front-4sem","last_synced_at":"2025-07-02T08:31:20.094Z","repository":{"id":295340953,"uuid":"989684493","full_name":"stringGustavo/fatec-crud-front-4sem","owner":"stringGustavo","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-28T21:11:32.000Z","size":46,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-08T11:10:25.191Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stringGustavo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-24T16:00:10.000Z","updated_at":"2025-05-28T21:11:35.000Z","dependencies_parsed_at":"2025-05-25T01:43:18.684Z","dependency_job_id":"43b9d96f-c16b-46de-8483-f471572bf00a","html_url":"https://github.com/stringGustavo/fatec-crud-front-4sem","commit_stats":null,"previous_names":["stringgustavo/fatec-crud-front-4sem"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stringGustavo/fatec-crud-front-4sem","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stringGustavo%2Ffatec-crud-front-4sem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stringGustavo%2Ffatec-crud-front-4sem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stringGustavo%2Ffatec-crud-front-4sem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stringGustavo%2Ffatec-crud-front-4sem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stringGustavo","download_url":"https://codeload.github.com/stringGustavo/fatec-crud-front-4sem/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stringGustavo%2Ffatec-crud-front-4sem/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263102537,"owners_count":23414122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-08T11:10:00.193Z","updated_at":"2025-07-02T08:31:20.084Z","avatar_url":"https://github.com/stringGustavo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Criação de um CRUD de usuários\n\nEste 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:\n\n**C —** ```Create``` (Criar): adicionar novos dados.\n\n**R —** ```Read``` (Ler): consultar ou visualizar dados já existentes.\n\n**U —** ```Update``` (Atualizar): modificar dados já existentes.\n\n**D —** ```Delete``` (Excluir): apagar dados do sistema.\n\n### Acesse aqui o [Repositório do BackEnd](https://github.com/stringGustavo/fatec-crud-api-4sem)\n\u003cbr\u003e\n\n## Criando o Projeto e Instalando Depenências\n\n#### Primeiramente, vamos criar o projeto React + Vite.\n```bash\nnpm create vite@latest\n```\n\n#### Instalando React Icons e Axios.\n```\nnpm install react-icons --save\nnpm install axios\n```\n\nNeste projeto foi utilizado o *framework* TailwindCSS para a estilização dos componentes.\n\n#### Instalando o TailwindCSS.\n```\nnpm install tailwindcss @tailwindcss/vite\n```\nApós a instalação, adicione o plugin do TailwindCSS no arquivo ```vite.config.js```.\n```js\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://vite.dev/config/\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n})\n\n```\n\nPra finalizar com o TailwindCSS, adicione o código abaixo no arquivo ```index.css```\n```css\n@import \"tailwindcss\";\n```\nPara certificar que tudo está instalado abra o arquivo ```package.json``` e verifique se as dependências estão da seguinte forma abaixo.\n```json\n  \"dependencies\": {\n    \"@tailwindcss/vite\": \"^4.1.7\",\n    \"axios\": \"^1.9.0\",\n    \"react\": \"^19.1.0\",\n    \"react-dom\": \"^19.1.0\",\n    \"react-icons\": \"^5.5.0\",\n    \"tailwindcss\": \"^4.1.7\"\n  },\n```\n\n\u003c/br\u003e\n\nAgora que tudo está instalado, podemos começar a desenvolver o nosso FrontEnd.\n\n## Criando a página principal\n\nAntes de editar o ```App.jsx```, crie a pasta ```componentes``` e dentro dela crie os seguintes componentes:\n\n```Form.jsx ``` Será o componente responsável por lidar com o preenchimento do formulário de cadastro de usuário.\n\n```Content.jsx``` Será o componente criado para visualizar as informações dos usuários cadastrados pelo formulário.\n\nNo arquivo ```App.jsx```, comece com as importações necessárias.\n```js\nimport Form from './components/Form' // Importação do componente Form.jsx\nimport Content from './components/Content' // Importação do componente Content.jsx\nimport { useState } from 'react'; // Importação do hook useState\n```\n\nComo 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```.\n\n```js\nconst App = () =\u003e {\n  const [updateTrigger, setUpdateTrigger] = useState(false); // Responsável por ativar ou desativar a função de atualizar um usuário.\n  const [isChanged, setIsChanged] = useState(false); // Responsável por detectar se os dados mudaram (algo foi adicionado, deletado ou atualizado)\n  const [formData, setFormData] = useState({ // Objeto responsável por armazenar informações do usuário (em Content.jsx) que será atualizado (em Form.jsx).\n    id: '',\n    name: '',\n    email: '',\n    birth: '',\n    register: '',\n  });\n\n  return (\n    \u003cdiv className='flex flex-col items-center h-full bg-gray-900'\u003e\n      \u003cForm // Passando os props que serão alteravéis no componente Form.jsx.\n        setIsChanged={setIsChanged}\n        updateTrigger={updateTrigger}\n        setUpdateTrigger={setUpdateTrigger}\n        formData={formData}\n        setFormData={setFormData}\n      /\u003e\n      \u003cContent // Passando os props que serão alteravéis no componente Content.jsx.\n        isChanged={isChanged}\n        setFormData={setFormData}\n        setUpdateTrigger={setUpdateTrigger}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App;\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstringgustavo%2Ffatec-crud-front-4sem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstringgustavo%2Ffatec-crud-front-4sem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstringgustavo%2Ffatec-crud-front-4sem/lists"}