{"id":28335910,"url":"https://github.com/lorussogiacomoluca/react-context-api","last_synced_at":"2026-05-04T14:42:40.252Z","repository":{"id":294268705,"uuid":"986427575","full_name":"lorussogiacomoluca/react-context-api","owner":"lorussogiacomoluca","description":"Exercise #54 - 19/05/2025","archived":false,"fork":false,"pushed_at":"2025-05-19T17:37:55.000Z","size":140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T16:41:28.833Z","etag":null,"topics":["javascript","props","react","usecontext-hook","useeffect-hook","usenavigate-hook","useparams-hook","usestate-hook"],"latest_commit_sha":null,"homepage":"","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/lorussogiacomoluca.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-19T15:37:13.000Z","updated_at":"2025-05-20T07:36:40.000Z","dependencies_parsed_at":"2025-05-19T17:29:06.326Z","dependency_job_id":"e1a6bf24-bdd1-4e26-9648-8ce5a0294df2","html_url":"https://github.com/lorussogiacomoluca/react-context-api","commit_stats":null,"previous_names":["lorussogiacomoluca/react-context-api"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lorussogiacomoluca/react-context-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Freact-context-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Freact-context-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Freact-context-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Freact-context-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lorussogiacomoluca","download_url":"https://codeload.github.com/lorussogiacomoluca/react-context-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Freact-context-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32612317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","props","react","usecontext-hook","useeffect-hook","usenavigate-hook","useparams-hook","usestate-hook"],"created_at":"2025-05-26T22:22:42.680Z","updated_at":"2026-05-04T14:42:40.246Z","avatar_url":"https://github.com/lorussogiacomoluca.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📚 Esercizio 53: Esercizio di oggi: React Context API\n\n**repo:** `react-context-api`\n\n---\n\n## 🚀 Consegna\n\nSfruttiamo le Context API per rendere disponibile la lista dei post in tutta la nostra app.\n\nCreate una nuova repo e seguite i seguenti passaggi:\n\n1. Partiamo col definire la lista dei post all’interno di `App.jsx`  \n   (quindi utilizzerete il primo \"metodo\" visto a lezione, quello più immediato, senza la personalizzazione del provider)\n\n2. Create un componente `PostsPage.jsx` che conterrà al suo interno un titolo e un componente `PostsList.jsx` che mostra la lista di tutti i nostri post.\n\n3. Creiamo un file per definire il nostro Context ed esportiamolo\n\n4. Importiamo il Provider in `App.jsx` e wrappiamoci la nostra applicazione\n\n5. Facciamo in modo che il componente `PostsList.jsx` recuperi i post consumando il Context e crei dunque una card per ciascuno di essi.\n\n---\n\n## 🏗️ La struttura dell’App deve essere App.jsx \u003e PostsPage.jsx \u003e PostsList.jsx \u003e PostCard.jsx\n\n---\n\n## 📋 Ecco l'elenco dei posts\n\n```js\nconst posts = [\n  {\n    id: 1,\n    title: \"React Basis\",\n    content:\n      \"React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.\",\n    category: \"FrontEnd\",\n  },\n  {\n    id: 2,\n    title: \"What is Express.js?\",\n    content:\n      \"Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.\",\n    category: \"Backend\",\n  },\n  {\n    id: 3,\n    title: \"Run JavaScript Everywhere\",\n    content:\n      \"Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.\",\n    category: \"Backend\",\n  },\n  {\n    id: 4,\n    title: \"Build fast, responsive sites with Bootstrap\",\n    content:\n      \"Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.\",\n    category: \"Frontend\",\n  },\n];\n```\n\n---\n\n## 🎯 Numero minimo di push: **10**\n\n---\n\n## 🌟 Bonus:\n\n### Implementare un componente Alert gestito tramite Context\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florussogiacomoluca%2Freact-context-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Florussogiacomoluca%2Freact-context-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florussogiacomoluca%2Freact-context-api/lists"}