Fejlessz önállóan! - React egyszerűen elmagyarázva

Kihívás! Hozd létre az alábbi single page appot!

A projekthez tartozó backend-et  letöltheted a saját gépedre, így kedvedre kísérletezhetsz.

Szerver elindítása:

1. Töltsd le az alábbi állományt és tömörítsd ki egy mappába
   Recept app Node.js szerver letöltése
2. npm install paranccsal telepítsd a harmadik féltől származó könyvtárakat
3. Ha kész a telepítés, indítsd el a szervert, a node index.js paranccsal
4. A szerver a http://localhost:9090 URL-en fogadja a kéréseket

Megszólítható endpointok:

A képek a "/static/images" publikus mappába mentődnek, így a React appodból innen tudod őket megszerezni.

Az egyéb statikus fájlok (pl a logó), a "/static/assets" mappából nyerhetőek ki!

Egyetlen recept sémája a következő:

  {
    "id": string,
    "name": string,
    "slug": string,
    "ingredients": [
      {
        "name": string,
        "quantity": string,
        "type": string
      },
      ...
    ],
    "steps": [
      {
        "content": string,
        "timer": string
      },
      ...
    ],
    "imageURL": string
  }

Ajánlott komponens felosztás:

•  App
•  Home
•  RecipeList
•  RecipeSingle
•  RecipeCreate
•  RecipeEdit
•  Modal
•  Spinner

Ajánlott harmadik féltől származó könyvtárak:

Create React App:

• npx create-react-app‎

Ikonok:

• npm i --save @fortawesome/fontawesome-svg-core‏‏‎ ‎
• npm i --save @fortawesome/free-solid-svg-icons
• npm i --save @fortawesome/react-fontawesome

Útvonalválasztó:

• npm i --save react-router-dom@5.1

Megjelenés:

• npm i --save bootstrap

Sok sikert!

Megvalósítás:

Első rész:

(Üdvözlő képernyő, recept lista, törlés modal)

***Új ChatGPT Asszisztens! Ha kérdésed van, fordulj az asszisztenshez az alábbi chat ablakban!***

Második rész:

(Létrehozó form, szerkesztő form, megtekintő oldal)

***Új ChatGPT Asszisztens! Ha kérdésed van, fordulj az asszisztenshez az alábbi chat ablakban!***

Nézd meg a slide-okat

Create és edit form egyszerűsítése