React -projekt open source

  • Stworzony przez Facebooka w 2013 roku.
  • Możesz korzystać w swoich projektach.
  • Wielka społeczność i mnóstwo komercyjnych projektów.
  • Wersja 16.6 -cały czas rozwijana technologia.

Biblioteka JavaScript

React to biblioteka JavaScript do budowania interfejsów użytkownika, czyli tej części aplikacji, którą użytkownik widzi i za pomocą której komunikuje się (wchodzi w interakcję) z aplikacją.

Interfejs użytkownika

Możesz potraktować interfejs szerzej, jako stronę internetową (wyświetlaną w przeglądarce, bez backendu) Do stworzenia takiego interfejsu możesz też więc wykorzystać HTML, CSS, czysty JS oraz JQ. Jednak za pomocą React możesz zrobić to inaczej.

Dynamiczny i interaktywny UI (User Interface)

React służy przede wszystkim do tworzenia dynamicznych i interaktywnych (reaktywnych) interfejsów (aplikacji/stron internetowych).
Jego głównym celem nie jest tworzenie landing page czy statycznych stron internetowych składających się z kilku podstron (choć nic nie stoi na przeszkodzie, by je zrobić). React to przede wszystkim Single Page Application(dynamiczne zmiany wywołane przez zmianę stanu, interakcję z użytkownikiem, bez przeładowywania strony (jeden plik HTML).

Architerktura React -komponenty

Interfejs zbudowany za pomocą React składa się z komponentów.
Komponenty tworzą strukturę i logikę interfejsu.

Aplikacja jako metafora mieszkania. Są drzwi (komponent drzwi), są meble (różne komponenty, przede wszystkim struktura, bez zachowań), są pokoje (komponenty nadrzędne względem mebli i urządzeń), jest światło (jak włączmy światło, to w całym pokoju zrobi się jasno, zmiana stanu w komponencie, włącznik wpłynie na komponent pokój). Mieszkanie składa się z wielu komponentów, podobnie jak aplikacja. Jeden komponent może zmienić stan i strukturę w innym komponencie. Do mieszkania można dodawać nowe rzeczy, np. klimatyzacja (po włączeniu zmienia się stan w pokoju, np. temperatura, zużycie prądu). Czyli akcja w jednym komponencie może wpływać na inne komponenty

Komponent

  • Interfejs użytkownika (widok) tworzą w React komponenty.
  • Komponent powinien być mały, elastyczny (edytowalny).
  • Komponent powinien mieć swoje znaczenie (struktura, czasami także logika).
  • Przykłady komponentu: przycisk, input, header, tytuł w artykule, avatar, pozycja menu (i samo menu jako komponent nadrzędny).

Lista programów do zainstalowania – tworzymy środowisko

Lista programów do zainstalowania – React IDE

Zmiana preferencji:  file -> preferences -> settings i zaznacz check-box

    • CLI – wiersz poleceń lub cmd
  • Node.js
    • do zainstalowania npx create-react-app my-app


  • React Developer Tools

  • JSON Viewer

Lista programów do zainstalowania – react.js

Plik index.html

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example</title>

</head>

<body>
  <div id="root">
    <!-- kontener na aplikację react  -->
  </div>
  <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://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel" src="App.js"></script>
</body>

</html>


Plik App.js


class App extends React.Component {
  state = {
    counter: 0
  }
  render() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    );
  }
}

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