Wprowadzenie React JS #1 – wprowadzenie na przykładzie

React jest jedną z najpopularniejszych bibliotek języka Javascript, służącą do tworzenia interfejsów użytkownika – a konkretniej tych webowych, czyli stron internetowych. Został on stworzony przez pracownika Facebooka i głównie przez tę firmę jest utrzymywany oraz oczywiście wykorzystywany. Inne duże korporacje jakie z niego korzystają to PayPal czy Netflix. W tym wpisie przedstawie krótkie wprowadzenie do biblioteki Ract.

 


Format wideo wpisu znajduję się na jego końcu


Najważniejsza, dla mnie, cecha Reacta

Jestem programistą wychowanym na Javie i rzeczą, która przekonała mnie do Reacta jest podział aplikacji Javascriptowej na komponenty – czyli odizolowane od siebie fragmenty kodu, gdzie każdy odpowiada za inny kawałek strony dzięki czemu źródła programu stają się o wiele bardziej czytelne i uporządkowane.

Czyli jeden wielki plik index.html w pseudokodowej postaci dla galerii obrazków:

<body>
    <!-- Header starts -->
    <div>
      <div>
        <h2><center>...</h2></center>
      </div>
    <div>
    <!-- Header ends -->
    <!-- Images -->
    <div>
      <!-- Image -->
      <div>
        <img>...</img>
      <div>
      <!-- Image -->
      <div>
        <img>...</img>
      <div>
     ....
</body>

Rozbija nam się, w przybliżeniu na:

<body>
   <Header/>
   <Image/>
   <Image/>
</body>

Ów Header i Image to właśnie komponenty. Prawda, że wygląda to obiecująco?

Wprowadzenie React na przykładzie prostej aplikacji

Głównym czynnikiem hamulcowym na początku istnienia Reacta był poziom komplikacji jego konfiguracji – trzeba było odpowiednio zestawić Webpack, Babel, NPM. Nawet doświadczonemu programiście Javascript potrafiło to zająć trochę czasu… a wszystkich pozostałych po prostu odrzucało.

Na szczęscie pojawił create-react-app czyli starter projektów Reactowych, który robi wszystko za nas i zdejmuje z nas obowiązek nie tylko konfiguracji Webpacka i Babela, a wręcz sprawia, że nie musimy nawet wiedzieć co to jest. Szczerze? Ja nie wiedziałem, dzięki czemu mogłem szybko zabrać się za samego Reacta bez babrania się w konfiguracji środowiska, a braki uzupełniać później, w miarę potrzeb.

Generator ten instalujemy za pomocą komendy NPMowej (czyli musimy mieć zainstalowanego NodeJS)

npm install create-react-app

Następnie komendą

create-react-app mygallery

tworzymy katalog mygallery, a w nim szkielet projektu.

Szkielet projektu

Co nas najbardziej interesuje z wygenerowanych rzeczy to pliki.

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

a najbardziej ten kawałek <div id="root"></div>

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

oraz komponent App z pliku src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Możesz odpalić komendę npm start by uruchomić serwer developerski i strona wyświetli się w domyślnej przeglądarce.

Co tu się wyprawia? Wyświetlamy prosty plik index.html, następnie w pliku index.js podpinamy za pomocą metody render z biblioteki ReactDOM komponent App jako dziecko elementu o nazwie root w index.html.

App jest klasą Javascript (wersja Javascript ES6) , która rozszerza klasę Compnent  biblioteki React. Każdy komponent reactowy musi to robić. Klasa App zawiera jedna metodę render(), która zwraca… coś co wgląda na html.

Jest to tak zwany JSX – rozszerzenie Javascript, które pozwoli Ci na tworzenie pseudo-kodu html na poziomie Javascript. Do tej pory było to traktowane jako zła praktyka i poza użyciem z poziomu JSX wciąż jest. JSX w React sprawdza się doskonale. Należy jednak pamiętać, że jest to pseudo-html, na przykład zamiast parametru class mamy className.

Co się dzieje z poziomu ‚czystej’ strony html to pod diva o id root podpinany jest div z headerem i jednym paragrafem, utworzony na podstawie tego, co zwraca metoda render() z komponentu App.

Mógłbym jeszcze trochę teorii popisać na temat komponentów, ale po co skoro najlepiej będzie stworzyć po prostu nasz własny i jednocześnie dodać nieco praktyki i przyśpieszyć Twoje wprowadzenie React.

Pierwszy komponent

Po pierwsze zminimalizujmy to co zwraca nam metoda render()  w komponencie App, do prostego div:

class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default App;

 

Utwórzmy komponent o nazwie Header – czyli nagłówek naszej strony. Tworzymy w katalogu src nowy plik o nazwie Header.js:

import React, { Component } from 'react';

class Header extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default Header;

Każdy komponent React potrzebuje trzech rzeczy – klasy rozszerzającej klasę Component, posiadać metodę render()  zwracającą pseudo-html, który ma się wyświetlić na stronie oraz eksport utworzonej klasy.

W takiej formie jednak komponent jeszcze nic nam nie wyświetli, a jedynie doda ‚pustego’ diva do drzewa DOM. Zmieńmy tę sytuację dodając HTML nagłówek – h2.

render() {
  return (
    <div>
      <h2>Galeria React</h2>
    </div>
  );
}

By użyć tego komponentu w głównym komponencie naszej aplikacji – App musimy zaimportować klasę Header oraz użyć jej w kodzie zwracanym przez App.render()

import React, { Component } from 'react';
import Header from './Header';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <Header/>
      </div>
    );
  }
}

export default App;

Komponentu używamy w zwracanym JSX dokładnie tak gdyby był to standardowy tag HTML. Pamiętaj by był to zawsze tag domknięty <Header/>.

Jeśli serwer uruchomiony za pomocą npm start wciąż jest otwarty  strona odświeży się automatycznie, jeśli nie – możemy ponownie jej użyć i zobaczyć nasze zmiany.

Komponent dla obrazów

Analogicznie utwórzmy teraz drugi komponent dla obrazu w naszej galerii. Po pierwsze dodaj jakiś obrazek do katalogu public, ja dodałem obrazek o nazwie react.png. Nowy komponent i jego użycie przedstawia się następująco:

import React, { Component } from 'react';

class ImageContainer extends Component {
  render() {
    return (
      <img src="react.png" width="100" height="100" alt="Pierwszy obrazek"/>
    );
  }
}

export default ImageContainer;
import React, { Component } from 'react';
import Header from './Header';
import ImageContainer from './ImageContainer';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <ImageContainer/>
      </div>
    );
  }
}

export default App;

A strona prezentuje się tak:

Szał, prawda? 🙂

Drugi obraz w galerii

Generalnie słowo „galeria” sugieruje, że na stronie będzie więcej niż jeden obrazek. Dorzućmy więc drugi, tylko jak to zrobić? Normalnie dodalibyśmy drugi img i po sprawie… czy musimy więc utworzyć kolejny komponent? Na szczęscie nie, w końcu React i komponenty obiecały, że będzie można ich używać wielokrotnie by nie powtarzać kodu.

Każdy komponent może dostać dane z zewnątrz, poprzez tak zwane propertisy. Wygląda to następująco:

<ImageContainer image='react.png'/>

Czyli konstrukcja taka jak przy ustawianiu atrybutów w HTML. Różnica jest taka, że zarówno nazwa atrybutu, jak i jego wartość jest ustawiana przez nas. W tym wypadku ustaliliśmy property o nazwie image i wartości react.png.

By odnieść się do tych wartości z poziomu komponentu używamy konstrukcji this.props.image, gdzie this.props odnosi się do wszystkich propertisów, natomiast image już do naszego konkretnego o nazwie image.

import React, { Component } from 'react';

class ImageContainer extends Component {
  render() {
    return (
      <img src={this.props.image}  width='200' height='200' alt='Pierwszy obrazek'/>
    );
  }
}

export default ImageContainer;

Dodatkowo w JSX (pseudo-html zwracany przez render) używamy { } by  poinformować, że teraz wołamy kod Javascript.

Komponent App wygląda następująco:

import React, { Component } from 'react';
import Header from './Header';
import ImageContainer from './ImageContainer';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <Header/>
        <ImageContainer image='react.png'/>
        <ImageContainer image='forest.png'/>
      </div>
    );
  }
}

export default App;

Czyli ponownie używamy istniejącego już komponentu tylko  zmieniamy nazwe pliku, który zostanie wyświetlony.

Oczywiście to prosty przypadek… ale gdy komponenty rozrastają się, dochodzą jeszcze css’y, logika uruchamiana po kliknięciach i tak dalej to podział na komponenty jest zbawienny.

Dodatkowo komponenty posiadają coś takiego jak ‚state’ czyli wewnętrzny stan danego „egzemplarza” danego komponentu, ale to już materiał na następny wpis, bo gdy wpadniemy w te króliczą norę to tekst na pewno wykroczy poza szybkie wprowadzenie React.

Tutaj zakończymy to wprowadzenie React 🙂 Mam nadzieje, że choć odrobinę zaspokoiłem Twoją ciekawość biblioteki React. Jeśli spodobał Ci się ten artykuł, proszę podziel się nim w swojej sieci społecznościowej, a może nawet zapisz się do mojeg newslettera 🙂

Źródła projektu dostępne są na githubie

Zupełnie przypadkiem 🙂 jestem autorem kursu React JS więc jeśli jesteś zainteresowany tą biblioteką i zainteresowało Cie to wprowadzenie React, a nie chce Ci się czekać na kolejne wpisy to serdecznie zapraszam 🙂

Jedna odpowiedź do “Wprowadzenie React JS #1 – wprowadzenie na przykładzie”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *