https://github.com/lorussogiacomoluca/react-context-api

Exercise #54 - 19/05/2025
https://github.com/lorussogiacomoluca/react-context-api

javascript props react usecontext-hook useeffect-hook usenavigate-hook useparams-hook usestate-hook

Last synced: about 1 month ago
JSON representation

Exercise #54 - 19/05/2025

• Host: GitHub
• URL: https://github.com/lorussogiacomoluca/react-context-api
• Owner: lorussogiacomoluca
• Created: 2025-05-19T15:37:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-19T17:37:55.000Z (about 1 year ago)
• Last Synced: 2025-06-19T16:41:28.833Z (12 months ago)
• Topics: javascript, props, react, usecontext-hook, useeffect-hook, usenavigate-hook, useparams-hook, usestate-hook
• Language: JavaScript
• Homepage:
• Size: 137 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 📚 Esercizio 53: Esercizio di oggi: React Context API

**repo:** `react-context-api`

---

## 🚀 Consegna

Sfruttiamo le Context API per rendere disponibile la lista dei post in tutta la nostra app.

Create una nuova repo e seguite i seguenti passaggi:

1. Partiamo col definire la lista dei post all’interno di `App.jsx`  

   (quindi utilizzerete il primo "metodo" visto a lezione, quello più immediato, senza la personalizzazione del provider)

2. 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.

3. Creiamo un file per definire il nostro Context ed esportiamolo

4. Importiamo il Provider in `App.jsx` e wrappiamoci la nostra applicazione

5. Facciamo in modo che il componente `PostsList.jsx` recuperi i post consumando il Context e crei dunque una card per ciascuno di essi.

---

## 🏗️ La struttura dell’App deve essere App.jsx > PostsPage.jsx > PostsList.jsx > PostCard.jsx

---

## 📋 Ecco l'elenco dei posts

```js

const posts = [

  {

    id: 1,

    title: "React Basis",

    content:

      "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.",

    category: "FrontEnd",

  },

  {

    id: 2,

    title: "What is Express.js?",

    content:

      "Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.",

    category: "Backend",

  },

  {

    id: 3,

    title: "Run JavaScript Everywhere",

    content:

      "Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.",

    category: "Backend",

  },

  {

    id: 4,

    title: "Build fast, responsive sites with Bootstrap",

    content:

      "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.",

    category: "Frontend",

  },

];

```

---

## 🎯 Numero minimo di push: **10**

---

## 🌟 Bonus:

### Implementare un componente Alert gestito tramite Context