Krótka historia React JS

React JS jest Javascript’ową biblioteką do budowania interfejsów webowych. Mam nadzieję, że to krótkie wprowadzenie pozwoli ci zapoznać się z podstawowymi założeniami tego frameworka i podjąć decyzję o dalszym zgłębianiu wiedzy. Historia będzie krótka, dlatego nie musisz mieć wyrzutów sumienia jeśli React nie przypadnie ci do gustu.

Zakładam, że pracowałeś już w języku javascript. Do pracy z React będziesz potrzebować środowiska node js i menedżera paczek npm.


Instalacja

Możesz zbudować projekt od podstaw samemu, ale React udostępnia instalator, który stworzy szkielet aplikacji za ciebie. Zainstaluj go globalnie (z flagą -g), a będziesz mógł tworzyć nowe projekty korzystając z tego narzędzia.

npm install -g create-react-app

Teraz przejdź do katalogu, w którym przechowujesz swoje projekty React i wywołaj:

create-react-app todos

Nazwę projektu (todos) możesz oczywiście zmienić. Aby uruchomić projekt, przejdź do jego katalogu (np. cd ~/React/todos) i za pomocą npm lub yarn wywołaj skrypt start.

yarn start

Po chwili powinien uruchomić się serwer deweloperski, a w przeglądarce pojawi się projekt z przykładową zawartością.

Pierwszy komponent

Praca w React składa się z budowania komponentów, które są bloczkami budulcowymi twojej aplikacji. Ten, który widzisz na ekranie znajduje się w src/App.js i to tam znajdziesz wyświetlany tekst i obrazek. Stwórz teraz pierwszy komponent:

touch src/Todos.js

Swój komponent możesz napisać w sposób funkcjonalny lub jako klasę. Co prawda ta pierwsza metoda ma wiele zalet, ale dla ułatwienia skupimy się póki co na tej drugiej. Najprostszy komponent może wyglądać tak:

import React from 'react';
class Todos extends React.Component {
render() {
return (
<div>Todo</div>
)
}
}
export default Todos;

Każdy komponent musi rozszerzyć React.Component i zaimplementować metodę render. Metoda ta zwraca html w formacie JSX (nie jest to zwykły html, dlatego niech nie zdziwi cię brak cudzysłowów. Na razie zapamiętaj tylko, że każdy tag musi zostać zamknięty (nawet <br />).

Tak napisany komponent możesz zaimportować w głównym komponencie App.js i wyświetlić na stronie.

# src/App.js
... 
import Todos from './Todos'
class App extends Component {
render() {
return (
<div className=”App”>
...

<Todos></Todos>

...
</div>
);
}
}
export default App;

Serwer deweloperski, który uruchomiłeś komendą yarn start powinien zauważyć zmiany i automatycznie odświeżyć stronę z nowym komponentem Todo. Nie musisz za każdym razem kompilować kodu od nowa.

Argumenty

Do komponentu można przekazać argumenty tak, jak atrybuty do tagu html, np.:

<Todos label=”My Todos”></Todos>

Wszystkie argumenty są dostępne w obrębie komponentu we właściwości props. Możemy więc użyć przekazanego argumentu przy użyciu nawiasów klamrowych:

class Todos extends React.Component {
render() {
return (
<div>{this.props.label}</div>
)
}
}

Interaktywność

React posiada swój system zdarzeń, który możemy wykorzystać do nadania interaktywności naszym komponentom. Pełną listę znajdziesz w opisie modułu SyntheticEvent, ale najczęściej będziesz używać zdarzenia onClick:

return (
<div onClick={() => alert('Alert something')}>To Do</div>
)

W nawiasach klamrowych możesz przekazać arrow function (co zaoszczędzi ci trudów z bindowaniem kontekstu this) albo nazwę metody:

class Todos extends React.Component {
doSth() {
alert('Alert something')
}
render() {
return (
<div onClick={this.doSth}>To Do</div>
)
}
}
```

Kliknij teraz w tekst “To Do”- powinien wyświetlić się popup.

Reaktywość

Głównym atutem React jest reaktywność, potrzebujemy więc sposobu na przechowywanie stanu aplikacji. W każdym komponencie dostępne jest pole state. Stan komponentu (this.state) możemy przypisać tylko w konstruktorze, ale najpierw musimy wywołać konstruktor rodzica (metodą super()).

class Todos extends React.Component {
constructor(props) {
super(props);

this.state = {
todos: [
'Zrobić pranie',
'Wyprowadzić psa na spacer'
]
}
}
render() {
let todos = this.state.todos.map((todo) => <li>{todo}</li>)
   return (
<ul>
{todos}
</ul>
)
}
}

Poza konstruktorem stan jest niemutowalny. Jeśli chcemy zmienić stan, mamy do dyspozycji metodę setState.

class Todos extends React.Component {
...
 createToDo() {
let todos = this.state.todos.slice();
todos.push('Nowe TODO');
this.setState({ todos })
}
render() {
let todos = this.state.todos.map((todo) => <li>{todo}</li>)

return (
<div>
<button onClick={() => this.createToDo()}>Utwórz To Do</button>
<ul>{todos}</ul>
</div>
)
}
}

Wartym odnotowania jest fakt, że React nie daje gwarancji na zmianę stanu wtedy, kiedy tego potrzebujesz. Dlatego, jeśli musisz użyć poprzedniego stanu do obliczenia nowego, zamiast obiektu do metody setState podaj callback:

this.setState((prevState, props) => ({
counter: prevState.counter + props.incrementBy
}));

Zagniezdżanie komponentów

Kiedy w komponencie zacznie się robić tłoczno, możesz przenieść część kodu do innego komponentu (jeśli korzystamy tylko z metody render, warto użyć komponentu funkcyjnego- atrybuty zostaną wtedy przekazane jako argument funkcji):

touch src/Todo.js


# src/Todo.js
import React from 'react';
export default function Todo(props) {
return (
<div>{props.label}</div>
)
}

# src/Todos.js
import React from 'react';
import Todo from './Todo';
class Todos extends React.Component {
render() {
return (
<div>
<Todo label=”Zrobić pranie”></Todo>
<Todo label=”Wyrzucić śmieci”></Todo>
<Todo label=”Wyprowadzić psa na spacer”></Todo>
</div>
)
}
}
export default Todos;

W tej krótkiej historii, zdążyliśmy utworzyć komponent, przekazać argumenty i zmienić jego stan. Chociaż jest jeszcze dużo więcej do nauki, to właśnie te podstawowe mechanizmy wykorzystuje się podczas pracy z React JS.

Dokumentację oraz bardziej zaawansowane poradniki znajdziesz na oficjalnej stronie.