MerixGames

28 grudnia 2015

/ code & tools

Nie bój się Reacta - poradnik opisujący podstawy biblioteki

React to biblioteka od developerów takich portali jak Facebook czy Instagram, która służy do tworzenia komponowalnych interfejsów użytkownika. Idealnie dopasowana jest do pracy na dużych aplikacjach które wymagają dynamicznej zmiany danych. Jest często porównywany do warstwy V (Widok) w MVC. Główna idea tej technologii polega na tworzeniu komponentów - elementów interfejsu użytkownika, które można wykorzystywać wielokrotnie. Komponenty definiują jak dane mają być prezentowane, a w przypadku ich zmiany są  po prostu ponownie renderowane.

Dlaczego React?

Można zadać sobie pytanie: Kiedy i dlaczego warto wybrać React jako warstwę widoku dla mojej aplikacji? W moim artykule odpowiem na to pytanie i przedstawię kilka przykładów użycia tek technologii! Warto podkreślić, że podstawową cechą Reacta jest to, iż jest on bardzo prosty w przypadku korzystania z komponentów- poznaj główne pojęcia związane z Reactem!

Komponenty

Jest to standardowy obiekt Javascriptowy, który odzwierciedla węzeł z drzewa DOM. Każdy może zawierać w sobie inne komponenty (jest to tak zwane drzewo komponentów). Pozwala to na rozbicie każdego z nich na mniejsze części, które są łatwiejsze w testowaniu, obsłudze oraz mogę być ponowne użyte w innych komponentach.

Reaktywość

Jest to najważniejsza funkcja Reacta. Jak pisałem wcześniej, interfejsy użytkownika są ponowne renderowane w przypadku zmiany danych, dzięki czemu naszym jedynym zadaniem jest zdefiniowanie tego, jak mają wyświetlać się dane zawarte w komponentach. Dzięki wykorzystaniu Virtual DOM i algorytmu porównywania różnic w Reacie, możemy łatwo określić który element się zmienił i renderować jedynie te, które wymagają aktualizacji - jest to bardzo efektywna metoda pracy.

JSX

Jest to rozszerzenie składni JavaScript które znacznie ułatwia pisanie kodu komponentów w React - szczegółowo możecie się z nim zapoznać tutaj. Chciałbym zaznaczyć, że na potrzeby tego artykułu będę posługiwał się przykładami składni ES6 zawierającym kod JSX.

Architektura komponentów

Komponenty są kluczowym elementem Reacta - mogą reprezentować różnego rodzaju widgety czy moduły. Definiują, w jaki sposób elementy DOM są tworzone oraz to, jak użytkownik wchodzi z nimi w interakcję. W moim artykule poznasz  podstawowe koncepcje, które są wymagane to tego, by pracować z tą  technologią. Dla bardziej zaawansowanych developerów polecam artykuł, który dogłębnie opisuje specyfikacje komponentów.

Właściwości (Props)

Właściwości są używane do przekazywania dodatkowych danych do komponentów, co jest bardzo przydatne w przypadku dostosowywania komponentów do naszych potrzeb. Właściwości są definiowane jako atrybuty elementów HTML.
Oto przykład wykorzystania z właściwości w komponentach Reacta.

Po pierwsze, możemy zdefiniować prosty komponent Greeter 

import React from 'react';

exports class Greeter extends React.Component {
  render() {
    return (
      <div>Hello {this.props.name} !</div>
    )
  }
}

Jak widzisz, możesz uzyskać dostęp do właściwości wewnątrz komponentu poprzez obiekt `this.props`, gdzie kluczem jest nazwa własności, a wartością - obiekt przekazany poprzez właściwość.
Komponent może być użyty w następujący sposób:

Komponent może być użyty w następujący sposób:

import React from 'react';
import Greeter from './greeter';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Greeter name="Bob" />
      </div>
    )
  }
}

Po wykonaniu tych kroków komponent Greeter będzie renderowany ponieważ imię z wartością Bob zostało przekazane do komponentu Greeter.

<div>Hello  Bob!</div>

Typy właściwości (propTypes)

Wewnątrz  elementu możemy również zdefiniować propTypes, które są wykorzystywane  do sprawdzania poprawności typu. Powiedzmy, że właściwość `name` naszego komponentu Greeter może przyjmować tylko wartości typu String.

import React from 'react';

exports class Greeter extends React.Component {
  render() {
    return (
      <div>Hello {this.props.name} !</div>
    )
  }
}

Greeter.propTypes = {
  name: React.PropTypes.string
}

Jak widzisz, dodaliśmy 'propTypes'- w taki sposób definiujemy je w składni ES6. 

Greeter.propTypes = {
  name: React.PropTypes.string
}

Dodatkowe informacje na temat propTypes możesz znaleźć tutaj.

Stan

Tak jak właściwości, stan również wpływa na zachowanie i renderowanie komponentów. Jednakże jest on dostępny tylko wewnątrz definicji komponentu, a każdy komponent  posiada własny stan. Uznawać to trzeba jako prywatne dane kompontentu.
Do obiektu stanu możemy odwołać się podobnie jak do właściwości - za pomocą `this.state`. Więcej informacji na temat stanów znajdziesz tutaj.

Alternatywne narzędzia

React nie jest  jedyną biblioteką działającą w ten sposób - podobne założenia posiadają między innymi Polymer, Riot.js czy Om. React na pewno ma  skupioną wokół siebie dużą społeczność i programistów Facebooka, co można uznać za dużą zaletę Reacta. Jednakże wszystkie wymienione biblioteki, mimo nieznacznych różnic, wykonują te same zadania.

React vs Angular

React i Angular są praktycznie niemożliwe do porównania - pierwszy jest biblioteką służącą do tworzenia interfejsu użytkownika (V w MVC), drugi jest pełnoprawnym frameworkiem MV*. Co więcej, React może być wykorzystywany w Angularze jako biblioteka widoku. Jedyną rzeczą którą można porównać jest system szablonów i dykrektyw w Angularze do modułowości Reacta. Osobiście uważam, że React daje większą kontrolę i łatwiejsze zarządzanie danymi pomiędzy komponentami niż Angular pomiędzy  dyrektywami i kontrolerami.

Jak zacząć pracę z Reactem?


Istnieje kilka gotowych szablonów aplikacji, które są skonfigurowane do stworzenia aplikacji w oparciu o React. Mimo to pokażę Ci, jak samemu zacząć pracę nad prostym projektem przy wykorzystaniu Reacta.
React może być używany wykorzystując składnie ES5 lub ES6. Pokażę ci, jak pracować z ES6 używając Babela i Webpacka. Ale pamiętaj, że może być on dowolnie skonfigurowany i możesz użyć go wykorzystując inne narzędzia do budowania projektów.

Rozpoczęcie projektu

Przede wszystkim, musimy stworzyć katalog dla naszego projektu i zainicjować projekt 'npm'. Aby to zrobić, wystarczy wykonać polecenie:

mkdir react-project && cd react-project
npm init

Następnie z 'npm' musimy zainstalować pakiet modułów webpack. Pamiętaj, musimy zainstalować go globalnie i lokalnie dla naszego projektu!

npm install -g webpack  
npm install --save-dev webpack

Po zainstalowaniu Webpacka, należy stworzyć plik konfiguracyjny, np. o nazwie `webpack.config.js`:

module.exports = {
  context: __dirname +' /app',
  entry: './app.js',

  output: {
    filename: 'app.js',
    path: __dirname + '/dist',
  }
}

Ten plik konfiguracyjny określa, że nasze pliki aplikacji znajdują się w folderze /app i że nasz punkt wejścia do naszej aplikacji to app.js. Określiliśmy również, że nasza aplikacjazostanie zapisana do pliku /dist app.js.
Na sam koniec musimy stworzyć app/app.js. Dodamy coś prostego, tak jak:

console.log('Application started');

Loaders

Głównym konceptem Webpacka są loadery, czyli wtyczki, które transformują nasz kod JavaScript. W przypadku Reacta potrzebujemy `jsx-loader`, zaś dla ES6 wykorzystamy `babel-loader`. W nowym wydaniu Babela, wersji 6, zmieniona została nieco architektura, przez co potrzebować będziemy dodatkowo `babel-loader` i `babel-core. Dla wsparcia składni JSX dodatkowo potrzebujemy `babel-preset-react`, dla wsparcia ES6 wymagany jest rownież `babel-present-es2015`.

Aby zainstalować wszystkie potrzebne moduły musimy wykonać polecenia:

npm install --save-dev babel-loader babel-core

# Dla wsparcia składni ES6/ES2015
npm install --save-dev babel-preset-es2015

# Dla wsparcia składni JSX
npm install --save-dev babel-preset-react

Wsparcie dla środowiska uruchomieniowego

Ponieważ składnia ES6 nie jest w pełni obsługiwana przez większość przeglądarek, a Babel nie może zapewnić takiego wsparcia tylko poprzez kompilacją. Musimy dodać tzw. polyfille. W tym celu wystarczy zainstalować:

npm  install --save babel-polyfill

Musimy także zainstalować kilka paczek by w prosty sposób zebrać wszystkie funkcje pomocnicze w naszym kodzie zamiast dołączać je dopiero wtedy, kiedy będą potrzebne.

npm install --save babel-runtime
npm install --save-dev babel-plugin-transform-runtime

Po zainstalowaniu wszystkich modułów musimy skonfigurować Webpack by zacząć korzystać z Babela, a nasz plik webpack.config.js teraz powinien wyglądać tak:

Uwaga: Spójrz na sekcję wejściową, dodałem babel-polyfill do naszego pliku wyjściowego w ramach rozszerzonego wsparcia przeglądarki.

module.exports = {
  context: __dirname + '/app',

  entry: [
    // Set up an ES6-ish environment
    'babel-polyfill',
    // Add your application's scripts below
    './app.js',
  ],

  output: {
    filename: 'app.js',
    path: __dirname + '/dist',
  },

  module: {
    loaders: [
      {
        loader: 'babel-loader',

        // Exclude /node_modules directory
        exclude: /node_modules/,

        // Only run `.js` and `.jsx` files through Babel
        test: /\.js$/,

        // Options to configure babel with
        query: {
          plugins: ['transform-runtime'],
          presets: ['es2015', 'react']
        }
      },
    ]
  }
}

React

Na sam koniec zostało nam tylko dodanie Reacta do naszego projektu i rozpoczęcie pisania kodu. Musimy tylko dodać/zainstalować paczki react i react-dom.

npm install --save react react-dom

Przykład użycia

Kiedy mamy już przygotowane wszystkie inne elementy, czas na wykorzystanie komponentu Greeter i wyświetlenie go na stronie

// greeter.js

import React from 'react';

export default class Greeter extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>Hello {this.props.name} !</div>
    )
  }
}

Greeter.propTypes = {
  name: React.PropTypes.string
}
// app.js

import React from 'react';
import ReactDOM from 'react-dom';
import Greeter from './greeter';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Greeter name="Bob" />
      </div>
    )
  }
}

// Render main app component into DOM
ReactDOM.render(
  <App/>,
  document.getElementById('app')
);
// index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <div id="app"></div> <script src="dist/app.js" type="text/javascript" charset="utf-8"></script> </body> </html>

Ostatnim krokiem jest komenda webpack

webpack

Po jakimś czasie powinniśmy otrzymać krótkie podsumowanie transformacji webpack. Wtedy będziesz mógł otworzyć plik index.html ze swojego lokalnego serwera, który powinien wyświetlić wiadomość "Hello Bob!

Podsumowanie

Uważam, że w pełni wyjaśniłem podstawy pracy z Reactem. Ten poradnik opisuje podstawy tworzenia projektu z wykorzystaniem Reacta i tworzenie prostych komponentów, co jest wystarczające aby zacząć pogłębiać swoją wiedzę w tym temacie. Aby tworzyć bardziej złożone aplikacje, prawdopodobnie będziesz musiał zintegrować je z innymi bilbiotekami, takimi jak Flux czy Redux. Ja aktualnie wykorzystuję React wraz z Reduxem w jednym z moich projektów, czym jestem dość podekscytowany - sprawdźcie sami co o tym myślicie!

Myślisz o realizacji projektu?

Skontaktuj się z nami. Przygotujemy wycenę, opowiemy o szczegółach i procesie wdrożenia.

Napisz do nas

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.