LEKCJA 04 - REACT (p) - router, create-react-app

UWAGA: przed wykonaniem dzisiejszych przykładów, proszę każdą osobę o ukończenie ćwiczenia 3 i 4 z lekcji poprzedniej (checkboxy i radios)


1. create-react-app - generator gotowej aplikacji Reacta

utwórz na pulpicie folder na aplikację

w tym folderze uruchom z konsoli

npx create-react-app testapp001kopiuj

po kilku minutach w podfolderze testapp001 widać gotowy do pracy projekt

UWAGA: po utworzeniu projektu proszę o spakowanie i wykonanie jego kopii na pulpicie, na wypadek braku internetu na kolejnych zajęciach.
UWAGA2: przy tym sposobie instalacji wszelkie zmiany w plikach katalogu /src są od razu updatowane na stronie



projekt uruchamia się przy pomocy zainstalowanego lokalnego serwera deweloperskiego


istotna dla dalszej pracy struktura powstałego projektu:

{appDir}
|__ src              
|    |__ App.js      
|    |__ App.css
|    |__ index.js    // wejście do aplikacji, tu można zmieniać App na App01, App02 etc
|    |__ index.css
|__ package.jsonkopiuj

po uruchomieniu npm run build (wersja produkcyjna) gotowa, skompilowana aplikacja tworzy się w podkatalogu /build

2. dodatek do VSCode - szybkie tworzenie plików klas

zainstaluj

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippetskopiuj

teraz po utworzeniu pliku klasy np Home napisz skrót rcc i naciśnij enter, tworzy się cała klasa komponentu

3. testowa aplikacja, bez routingu

Uwaga: w uruchomionej aplikacji muszą działać style css (App.css, Button.css
tak jak na skrinach 00
oraz kliknięcie w butony

dla przetestowania działania mechanizmów create-react-app, wstaw poniższe pliki do katalogu src

plik src/App.js

import React from 'react';

import Button from './Button';
import "./App.css";

class App extends React.Component {
  render() {
    return (
      ...     
    );
  }
}
export default App;kopiuj

plik src/App.css

tu dodaj odpowiednie style do komponentu App

plik src/Button.js

import React from 'react';
import './Button.css';

class Button extends React.Component {
  render() {
    return (
      ...     
    );
  }
}

export default Button;kopiuj

plik src/Button.css

dodaj odpowiednie style do komponentu Button, oraz alert po kliknięciu


4. ćwiczenie 01: React router - simple

pracujemy w aplikacji create-react-app

jest to ćwiczenie bazowe, kolejne opiera się na jego podstawie
proszę aby było w miarę podobne do skrina

routing React-a, działa deklaratywnie, ze składnią podobną do html-a

instalujemy w swojej aplikacji router reacta

npm install react-router --save-dev
npm install react-router-dom -save-devkopiuj

wszystkie pliki klas tworzymy w katalogu /src

plik src/App01.js

import React from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";kopiuj

import potrzebnych klas Home, About, Product i odpowiednich stylów z pliku App01.css

import Home from './Home';
import "./App01.css"kopiuj

return z klasy App

<Router>
 
   <Link to="/">Home</Link>
   <Link to="/about">About</Link>

   <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
   </Switch>
               
</Router>kopiuj





klasy Home, About, Product utwórz w osobnych plikach Home.js, About.js, Product.js, jak Button poprzednio

class Home extends React.Component {
  render() {
    return (
      ...     
    );
  }
}kopiuj

w index.js uruchamiamy całość aplikacji

import React from "react";
import ReactDOM from "react-dom";
import App from './App01'; // startowy komponent App01

ReactDOM.render(
   <App />,
   document.getElementById('root')
);kopiuj




5. kolejność matching urls

przy różnych parametrach w url-u istotna jest kolejność ich dopasowania w switchu,
najpierw odczytywany jest szczegółowy adres, potem bardziej ogólne,
obsługa adresu / powinna być zawsze na końcu ponieważ jest on częścią każdego adresu

router w klasie Parent

<Router>

   <Link to="/">Home</Link>
   <Link to="/details">Details</Link>
   <Link to="/details/1">Details/1</Link>
   <Link to="/details/2">Details/2</Link>


   <Switch>
      <Route path="/details/:id" component={Details} />
      <Route path="/details" component={Details} />
      <Route path="/" component={Home} />
   </Switch>

</Router>kopiuj

dla testów zamień kolejność Route z id i bez


6. ćwiczenie 02 - przesyłanie i odczyt parametrów w/z url-u

w pliku App02.js utwórz klasę App tak samo jak w poprzednim ćwiczeniu

ćwiczenie dla adresów typu:

localhost:3000/1
localhost:3000/2
localhost:3000/3kopiuj

router w klasie Parent

<Router>

   <Link to="/1">param = 1</Link>
   <Link to="/2">param = 2</Link>
   <Link to="/3">param = 3</Link>

   <Switch>
      <Route path="/:id" component={Child} />
   </Switch>

</Router>kopiuj

w przypadku klasy odczytujemy parametr jak poniżej (return klasy Child)

return (
   <h1>
      Child Page - params: {this.props.match.params.id}
   </h1>
)kopiuj




7. ćwiczenie 03 - dynamiczne generowanie linków

w pliku App03.js utwórz klasę App tak samo jak poprzednio

przy starcie aplikacji, w komponencie Links wygeneruj 50 linków
po kliknięciu każdego, prześlij parametr z linka do komponentu Child


8. ćwiczenie 04 - dynamiczne generowanie buttonów

w pliku App04.js utwórz klasę App tak samo jak poprzednio

przy starcie aplikacji, w komponencie Buttons wygeneruj tyle buttonów ile w adresie np localhost:3000/23
po kliknięciu każdego, wyświetl alert z odpowiednią liczbą

9. ćwiczenie 05 - dynamiczne generowanie divów

w pliku App05.js utwórz klasę App tak samo jak poprzednio

przy starcie aplikacji, w komponencie App wygeneruj tyle linków ile w tablicy: [7, 3, 5, 6, 10, 20, 2, 1, 11]
każdy lik kieruje do komponentu Divs, w którym generuje się odpowiednia liczba komponentów Div
po kliknięciu każdego Diva, liczba w nim zawarta powiększa się o jeden


10. ćwiczenie 06: React router - students panel

posługując się danymi json:

http://admins.spec.pl.hostingasp.pl/Stefa%C5%84czyk_Dariusz/temp/students.rarkopiuj

wykonaj aplikację jak na skrinach 07a, 07b, 07c

- załadowanie danych json z pliku students.json:

import students from "./students.json"kopiuj

klasy projektu:

App03,
Students,
Examskopiuj

wykonanie:

do utworzonych linków trzy razy podlinkuj obiekt klasy Students, od razu przekazując mu wybrane, przefiltrowane dane (all, men, women)

przykład przekazania props do klas linkowanych w Route:

<Route component={()=><Students anyprop={[1,2,3]} />} />kopiuj

lub

<Route render={()=><Students anyprop={[1,2]} />} />kopiuj

lub

<Route>
   <Students anyprop={[1,2,3,4,5]} />
<Route />kopiuj

Uwaga: w tym ćwiczeniu nie ma żadnych elementów routingu poza all, men, women
Całość zadania wewnątrz komponentu Students jest generowana przez Buttony a nie Link-i


11. podłączenie obrazka w klasie

import person from './person.png'

<img src={person} alt="person" />kopiuj


12. Łączenie stringów i zmiennych (template literals - przykłady)


a)

let xxx = 10
let yyy = 20
console.log(`{xxx=${xxx},yyy=${yyy},iloczyn=${xxx*yyy}}`)kopiuj

b)

console.log(`#${routes[0].path}`)kopiuj