piecioshka / warsawjs-workshop-25-myskills

⛩️ WarsawJS Workshop #25 — React.js

warsawjs-workshop-25-myskills

⛩️ WarsawJS Workshop #25 — React.js

Preview 🎉

https://piecioshka.github.io/warsawjs-workshop-25-myskills/

Lista funkcji w aplikacji (zakres projektu)

• ✅ Wygenerować unikalny URL dla każdej osoby wchodzącej do aplikacji
• ✅ Zapisać unikalny identyfikator w storage przeglądarki
• ✅ (Opcjonalnie) Uwierzytelniać użytkownika za pomocą GitHuba albo Facebooka
• ✅ Wczytać z pliku listę pytań dla programisty front-end
• ✅ (Opcjonalnie) Zdefiniować pytania dla innych umiejętności i dać użytkownikowi wybór
• ✅ Zaprezentować pytania użytkownikowi w formie formularza z różnymi kontrolkami
• ✅ (Opcjonalnie) Prezentować pytanie po pytanie (patrz: https://typeform.com)
• ✅ Zapisywać odpowiedzi w storage (przeglądarki, file systemie, Firebase, na serwerze - patrz: CRUD)
• ✅ Wznawiać sesję po ponownym wejściu na serwis (pobierać ID ze storage przeglądarki)
• ✅ (Opcjonalnie) Napisać testy i połączyć z CI (Travis CI, Semaphore CI, Circle CI)

Wykorzystywane narzędzia

• React.js
• WebStorage (LocalStorage)
• HTTP Storage (json-server)
• Redux

Krok po kroku 👣

Etap 1 - Konfiguracja

• Zainstalować pluginy do Google Chrome:

  • React Developer Tools
  • Redux DevTools

• Zainstalować plugin do Visual Studio Code:

  • Reactjs code snippets
    • https://github.com/xabikos/vscode-react

• Stworzyć pliki

  • index.html
  • src/main.js
  • src/component/app.js

• W pliku index.html:

  • stworzyć kontener z id="app"
  • załączyć plik z dist/bundle.js

• Zainstalować serwer, który będzie serwował aplikację

  npm i http-server

  Uwaga! Dopisać zadanie do package.json

  "start": "http-server"

• Zainstalować zależności projektu:

  npm i @babel/core @babel/preset-react babel-loader react react-dom webpack webpack-cli

  Uwaga! W specjalnym przypadku będzie trzeba:

  • zainstalować @babel/preset-env
  • dopisać @babel/preset-env w presets w konfiguracji Babela w pliku webpack.config.js

• Skonfigurować Webpacka

  • Tryb = development
  • Plik wejściowy = entry
  • Plik wyjściowy = output
  • Uruchomić babel-loader dla plików .jsx?
  • Dodać preset @babel/preset-react

• react-router-dom

Etap 2 - Budowa komponentów

• Stworzyć komponenty:
  • Aplikacja
  • Intro
  • Formularz

Etap 3 - Serwisy

• Stworzenie serwis o możliwościach:

  • Zapisywanie danych
  • Odczytywanie danych
  • Usuwanie danych

  który wykorzystuje interfejs LocalStorage

• Stworzenie serwis budujący

Etap 4 - Serwer HTTP

• Stworzenie serwis o możliwościach:

  • Zapisywanie danych
  • Odczytywanie danych
  • Usuwanie danych

  który wykorzystuje zapytania HTTP

• Zainstalować paczkę json-server

Etap 5 - Redux (TODO)

• Zainstalować zależności:

  npm i redux