Część VI. React, Typescript, Axios i Material-UI

React, Typescript, Axios i Material-UI

Cztery technologie wymienione w tytule tworzą bardzo atrakcyjne środowisko do efektywnego tworzenia aplikacji webowych.

W tym rozdziale poznamy funkcjonowania ReactJS w takim właśnie zestawie,

React + Typescript - wprowadzenie

Aby zanicjować aplikację ReactJS + Typescript wystarczy stworzyć trzy pliki:

1) public/index.html

<!doctype html>
<html>
<head></head>
<body>
  <div id=root></div>
</body>
</html>

2) src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>
        Hello World!
    </div>,
    document.getElementById('root')
);

3) plik tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

Dwa pierwsze to po prostu aplikacja ReactJS. Zwraca uwagę zmiana rozszerzenia w nazwie pliku. W miejsce .js stosujemy .ts - aby wskazać, że plik zawiera skrypt w Typescript. Natomaist rozszerzenie .tsx zawiera komponenty ReactJS zapisane w Typescript.

Plik tsconfig.json opisuje konfigurację dla Typescript. Możemy przekopiować z powyższej konfiguracji. Jeśli używamy react-scripts, uzupełni on zawartość tego pliku (na starcie wystarczy wpisać {}). Plik ten możemy (wraz z obszernymi komentarzami) wygenerować po zainstalowaniu Tyescript poleceniem:

tsc --init

Typescript musi wiedzieć jak działać - ale na szczęście wystarczy mu parę informacji takich samych dla większości aplikacji. Nie będziemy więc tu szczegółowo go opisywać. Istnieje wiele miejsc, gdzie można przeczytać o zawartości tego pliku.

Na przykład:

https://solutionchaser.com/typescript-pierwsze-kroki-konfiguracja/

Uwaga na marginesie:

Dawniej zapisywało się potrzebne parametry kilku plikach - m.in. w pliku .env (ODE_PATH=src/). Za,miast tego wystarczy odpowiedni wpis w tsconfig.json

Uruchamiamy minimalną aplikację.

Uruchamiamy:

yarn add react react-dom @types/react-dom react-scripts typescript

Powstaje plik packege.json

Do budowania aplikacji używamy pakietu react-script. Do powstałego pliku packege.json dodajemy opis wywołania skryptów:

"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build"

},

Teraz możemy uruchomić: yarn start

Program zaproponuje nam uzupełnienie pliku package.json o dane przeglądarki - należy potwierdzić:

yarn run v1.15.2
warning package.json: No license field
$ react-scripts start
? We're unable to detect target browsers.
Would you like to add the defaults to your package.json? (Y/n)

Na zakończenie uruchomiona zostaje przeglądarka internetowa i wyświetlony w niej napis Hello World.

Budowanie strony

Przed zbudowaniem strony możena na początek pliku package.json wpisać ścieżkę do strony:

"homepage": "./",

Pozwoli to otwierać stronę wprost z przeglądarki - bez pośrednictwa serwera www (pliki .js oztsną odnalezione).

budujemy stronę:

yarn build

znajdzie się ona w katalogu build