Fejlessz önállóan!


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

A szerver programot letöltheted a saját gépedre, így kedvedre kísérletezhetsz.

 

React App

 

Útmutató

 

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:

 

Method Útvonal Funkcionalitás
GET "/api/recipes" Összes recept kilistázása
GET "/api/recipes/:recipeSlug" Egyetlen recept lekérése slug alapján
POST "/api/recipes" Új recept létrehozása
PUT "/api/recipes/:id" Recept felülírása id alapján
DELETE "/api/recipes/:id" Recept törlése id alapján

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

 

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)


 

Második rész:

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

 

Nézd meg a slide-okat

Vedd meg a teljes kurzust itt!


A weboldalunkon cookie-kat használunk, hogy a legjobb felhasználói élményt nyújthassuk. Részletes leírás »