⛩️ WarsawJS Workshop #25 — React.js
https://piecioshka.github.io/warsawjs-workshop-25-myskills/
- ✅ 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)
- React.js
- WebStorage (LocalStorage)
- HTTP Storage (
json-server
)
-
Zainstalować pluginy do Google Chrome:
React Developer Tools
-
Zainstalować plugin do Visual Studio Code:
Reactjs code snippets
-
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
- stworzyć kontener z
-
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
wpresets
w konfiguracjiBabela
w plikuwebpack.config.js
- zainstalować
-
Skonfigurować Webpacka
- Tryb =
development
- Plik wejściowy =
entry
- Plik wyjściowy =
output
- Uruchomić
babel-loader
dla plików.jsx?
- Dodać preset
@babel/preset-react
- Tryb =
-
react-router-dom
- Stworzyć komponenty:
- Aplikacja
- Intro
- Formularz
-
Stworzenie serwis o możliwościach:
- Zapisywanie danych
- Odczytywanie danych
- Usuwanie danych
który wykorzystuje interfejs
LocalStorage
-
Stworzenie serwis budujący
-
Stworzenie serwis o możliwościach:
- Zapisywanie danych
- Odczytywanie danych
- Usuwanie danych
który wykorzystuje zapytania
HTTP
-
Zainstalować paczkę
json-server