Narzędzia developerskie

W zasadzie wszystkie niezbędne narzędzia są udostępniane jako open source.

Należą do nich:

  • NodeJS wraz z komponentami: babel, webpack, gulp, yarn

  • Edytor Atom i/lub Visual Studio Code (VSC)

  • Kontroler składni Flow (dodatek do edytora Atom)

  • Dodatki do przeglądarek Chrome i Firefox

Musimy to dodać pewne wyjaśnienie związane z kontroąi składni. Środowisko to dynamicznie się rozwija. W chwili gdy rozpoczęto pracę nad tym podręcznikiem - wydawało się, że stworzony przez Microsoft TypeScript jest związany z projektem Angular i mamy dwa konkurujące ze sobą środowiska: Angular + TypeScript + VSC, albo ReactJS + Atom + Flow. Atrakcyjność języka TypeScript sprawia, że jest on bardzo chętnie wykorzystywany do tworzenia aplikacji React. Dlatego optymalne wydaje się zestawienie: ReactJS+VSC+TypeScript.

Atom + Flow

Przygotowanie środowiska Atom.

1) Pełne środowisko to uruchomiony z terminala program (np. komendą yarn start), przeglądarka (typowo na adresie http://localhost:3000/) i edytor (Atom).

Zmiany wprowadzone w edytorze są zazwyczaj wychwytywane przez program i powodują odświeżenie widoku w przeglądarce.

2) W środowisku Atom możemy zainstalować paczki umożliwiające obsługę Flow. W edytorze naciskamy Ctrl + Shift + P i wpisujemy Installed Packages. Odszukujemyodpowiedną paczkę i instalujemy ją. Pakiety możemy też instalować z konsoli poleceniem apm (alternatywa dla Ctrl+Shift+P:Settings → Install).

Instalacja dodatków do Atom:

apm install atom-ide-ui 
apm install ide-flowtype
apm install linter-flow

Paczka atom-ide-ui pozwala wyświetlić okienko Diagnostics (Alt+Shift+D). Obsługę flow zawiera linter-flow (alternatywą może być na przykład flow-ide. Z kolei ide-flowtype zawiera wyekstrachowane z Nuclide funkcje związane z Flow. Nie zaleca się równoczesnego instalowania równocześnie różnych pkietów IDE (https://flow.org/en/docs/editors/atom/ ).

Można natomiast zainstalować prettier-atom, który pomaga w formatowaniu tekstu.

apm install prettier-atom

Klawisze skrótu dla Atom: https://github.com/nwinkler/atom-keyboard-shortcuts

3). W katalogu aplikacji musi istnieć plik .flowconfig. Tworzymy go poleceniem flow init – po uprzednim zainstalowaniu flow-bin (na przykład yarn add flow-bin).

Instalowanie i uruchomienie Flow:

yarn add --dev flow-bin
yarn  flow init

albo:

npm i -D flow-bin && flow init

Możemy uruchomić kontrolę flow z konsoli:

yarn run flow

4) W pliku, który chcemy poddać analizie flow dodajemy na początku komentarz:

//@flow

Zapisanie pliku z takim komentarzem powoduje jego analizę. W razie błędów po lewej stronie u dołu edytora pojawia się czerwony wykrzyknik. Kliknięcie otwiera okienko „Diagnostics” w którym widzimy spis błędów.

W razie potrzeby restartujemy edytor: Ctrl+Shift+F5 .

Więcej informacji:

React Native:

https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809

Inne dodatki:

Visual Studio Code

Konfiguracja jest o wiele prostsza. Po zainstalowaniu edytora (można nawet użyć wersji Portable) jest on w zasadzie gotowy do tworzenia aplikacji ReactJS. Istnieje wiele poradników opisujących jak wystartować (choć nie ma w tym nic trudnego). Na przykład: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial (w języku angielskim) kub https://cezarywalenciuk.pl/blog/programing/post/visual-studio-code-i-reactjs--jak-zaczac-z-gotowym-szablonem (po polsku).

Użycie ReactJS

Do tworzenia nowej aplikacji React można wykorzystać skrypt create-react-app jak pokazano poniżej - w rozdziale "Praktyczny przykład". Poniższe uwagi można w takim wypadku pominąć. Przydadzą się, gdy chcemy dostosować środowisko do swoich potrzeb, albo po prostu lepiej zrozumieć jak to działa.

Aby zainstalować React do testów w środowisku NodeJS powinniśmy po kolei:

  • Utworzyć katalog na nasze skrypty (na przykład r0)

  • Zainstalować paczki:

  • yarn init
yarn add --save-dev babel babel-cli babel-preset-react react
  • Utworzyć plik .babelrc (dla translatora Babel) z zawartością: { "presets": ["react"] }

Testujemy:

  • Tworzymy skrypt jsx – na przykład r01c.jsx

  • Dokonujemy translacji: babel r01c.jsx > r01c.js

  • Testujemy: node r01c.js

UWAGA! Babel tworzy skrypty, które mogą być uruchamiane w środowisku NodeJS. Jeśli zechcemy umieścić uzyskany skrypt na stronie internetowej, okaże się - że przeglądarka nie interpretuje użytej instrukcji require(). By temu zapobiec - musimy przetworzyć plik programem browserify (http://browserify.org/

babel r03.jsx > r03x.js
browserify r03x.js -o r03.js

Ponieważ browserify dołącza pliki React - nie musimy ich odrębnie umieszczać na stronie.

Wszystkie te czynności mogą być automatycznie wykonane przez programy typu webpack czy gulp (będzie jeszcze o tym mowa).

Po dołączeniu do strony translatora babel, możemy na niej umieszczać także skrypty JSX:

<!DOCTYPE html>
<html>
  <head>
    <script crossorigin 
      src="https://unpkg.com/react@16/umd/react.production.min.js">
    </script>
    <script crossorigin 
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
    </script>
    <script 
    src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js">
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
class Hello extends React.Component {
  render() {
    return <span>Witaj {this.props.text}!!</span>
  }
}

const App = () => (
  <div>
    <Hello text="ŚWIAT" />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

Trzeba jednak wziąć pod uwagę to, że tak zbudowana strona będzie stosunkowo "ciężka".