Podstawowe elementy React JS

React JS to jeden z najpopularniejszych języków programowania na świecie. Jest to język programowania oparty na JavaScript, który umożliwia tworzenie interaktywnych aplikacji internetowych. Jest szczególnie popularny wśród programistów, ponieważ jest łatwy w użyciu i pozwala na szybkie tworzenie aplikacji. 
W niniejszym artykule przyjrzymy się bliżej temu językowi programowania, aby zrozumieć, dlaczego jest on tak popularny i jak można go wykorzystać do tworzenia aplikacji internetowych.

• jest językiem programowania opartym na JavaScript, który służy do tworzenia interaktywnych aplikacji internetowych. 
• umożliwia tworzenie aplikacji za pomocą komponentów, które są łatwe do zarządzania i wymiany. 
• jest szybki, skalowalny i wydajny, dzięki czemu jest idealnym rozwiązaniem do tworzenia aplikacji internetowych. 
• jest również wysoce elastyczny, dzięki czemu można go łatwo dostosować do różnych potrzeb.

Poniżej znajdziecie wszystkie komponenty z których składa się język. Za nim zaczniecie programować warto zrozumieć jak działają te elementy, wtedy postęp w nauce języka będzie szybki i skuteczny.

Komponenty

Komponenty są podstawowymi elementami React, które są używane do tworzenia interfejsów użytkownika. Komponenty są tworzone za pomocą funkcji lub klas i są odpowiedzialne za wyświetlanie danych i logikę aplikacji.

JSX

Propsy

Propsy są właściwościami, które są przekazywane do komponentów React. Propsy są używane do przekazywania danych do komponentów i są wykorzystywane do tworzenia interaktywnych aplikacji.

Stan

Stan jest obiektem, który jest używany do przechowywania danych w komponentach React. Stan jest zmieniany w odpowiedzi na działania użytkownika i jest używany do aktualizowania interfejsu użytkownika.

Cykl życia

Cykl życia jest zestawem metod, które są wywoływane w odpowiedzi na zmiany w komponentach React. Metody cyklu życia są używane do wykonywania operacji, takich jak inicjalizacja, aktualizacja i usuwanie komponentów.

Teraz zajmiemy się krótkim omówieniem każdego z elementów tego języka wraz z przykładem.

Komponent

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello' };
  }

  render() {
    return <h1>{this.state.message}, {this.props.name}</h1>;
  }
}

export default Welcome;

Ten komponent można użyć w innym komponencie poprzez importowanie i wykorzystanie w JSX, np.

import React from 'react';
import Welcome from './Welcome';

function App() {
  return <Welcome name="John" />;
}

export default App;

Komponent jest odpowiedzialny za renderowanie części interfejsu użytkownika, przechowywanie stanu i logikę aplikacji. Możemy przesyłać dane do komponentu jako props oraz komponent może trzymać własny stan.

JSX

JSX jest językiem programowania stworzonym przez firmę Facebook, który jest używany w połączeniu z biblioteką React. JSX jest połączeniem JavaScriptu i XML, co pozwala programistom tworzyć interfejs użytkownika w sposób bardziej zbliżony do HTML.

Przykład:

import React from 'react';

function Welcome(props)
{
     return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;

ReactDOM.render(
   element,
   document.getElementById('root')
);

W powyższym przykładzie, Welcome jest komponentem React, który przyjmuje props "name" i zwraca element h1 z tekstem "Hello, Sara". Następnie komponent Welcome jest używany jako element JSX w linii 8. W linii 9 renderujemy element do dokumentu HTML.

Props

Propsy (ang. props) w React to właściwości, które służą do przekazywania danych z komponentu nadrzędnego do podrzędnego. Są one przekazywane do komponentu jako atrybuty HTML.

Przykład:

import React from 'react';

function Welcome(props)
{
      return <h1>Hello, {props.name}</h1>;
}

function App()
{
      return <Welcome name="Sara" />;
}

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

W powyższym przykładzie, komponent "Welcome" otrzymuje props "name" jako atrybut HTML.
Wewnątrz komponentu "Welcome" wykorzystuje on wartość tego propsa do wyświetlenia tekstu "Hello, Sara" na stronie. Komponent App renderuje komponent Welcome z props name='Sara'.

Stan

Stan (ang. state) w React to obiekt, który przechowuje dane, które mogą być zmieniane przez aplikację. Stan jest zarządzany przez komponent i może być używany do renderowania dynamicznej treści na stronie.

Przykład:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

W powyższym przykładzie, komponent "Example" używa hooka "useState" do utworzenia stanu "count", który jest inicjowany jako 0. Wewnątrz komponentu "Example" stan jest wykorzystywany do wyświetlenia tekstu "You clicked 0 times" i do zwiększenia liczby kliknięć po naciśnięciu przycisku "Click me". Wartość stanu jest zmieniana przez użycie funkcji "setCount", która przyjmuje nową wartość.

Do zarządzania stanem w całej aplikacji lepiej wykorzystać Redux.

Redux to biblioteka JavaScript, która pozwala na zarządzanie stanem aplikacji na poziomie całej aplikacji. Jest ona często używana w połączeniu z biblioteką React do zarządzania stanem aplikacji React.

W Redux, stan aplikacji jest przechowywany w pojedynczym obiekcie zwanym magazynem (store). Komponenty React mogą odwoływać się do tego stanu, ale nie mogą go bezpośrednio zmieniać. Zamiast tego, komponenty wysyłają akcje, które są przetwarzane przez funkcję reducera. Reducer jest odpowiedzialny za modyfikację stanu na podstawie otrzymanej akcji.

Przykład:

import { createStore } from 'redux';

// Reducer
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// Store
const store = createStore(counter);

// Component
function Counter({ value, onIncrement, onDecrement }) {
  return (
    <div>
      <h1>{value}</h1>
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
    </div>
  );
}

// Render 
function render() {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
      onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
    />,
    document.getElementById('root')
  );
}

store.subscribe(render);
render();

W powyższym przykładzie, stan aplikacji jest zarządzany przez obiekt magazynu utworzony przez bibliotekę Redux. Stan jest inicjowany przez reducer, który przyjmuje aktualny stan i akcję, a następnie zwraca nowy stan. Komponent "Counter" odwołuje się do bieżącego stanu i wyświetla go na stronie. Komponent wysyła akcje "INCREMENT" i "DECREMENT" przez wywołanie metody dispatch magazynu.

W React-Redux, zazwyczaj komponenty React są połączone z magazynem za pomocą tzw. "kontenerów" (ang. container), które przesyłają dane z magazynu do komponentów i pozwalają na wysyłanie akcji do magazynu. Dzięki temu komponenty nie muszą bezpośrednio odwoływać się do magazynu i mogą skupić się na renderowaniu interfejsu użytkownika.

Cykl życia

Cykl życia (ang. lifecycle) w React to zestaw metod, które są wywoływane przez bibliotekę React w różnych etapach tworzenia i usuwania komponentów. Dzięki tym metodom, developerzy mogą kontrolować i modyfikować działanie komponentów w trakcie ich życia.

Główne metody cyklu życia w React to:

• constructor(props) - jest wywoływana przed utworzeniem komponentu. Jest to miejsce, gdzie można inicjalizować stan komponentu i przypisywać wartości do "this"

• componentDidMount() - jest wywoływana po tym, jak komponent zostanie zamontowany (dodany do DOM). Jest to miejsce, gdzie można wykonać operacje, które wymagają dostępu do DOM, np. pobranie danych z serwera

• componentDidUpdate(prevProps, prevState) - jest wywoływana po każdej aktualizacji komponentu. Jest to miejsce, gdzie można wykonać operacje po aktualizacji, np. ponowne pobranie danych z serwera

• componentWillUnmount() - jest wywoływana przed usunięciem komponentu. Jest to miejsce, gdzie można wykonać operacje sprzątające, np. anulowanie subskrypcji

• render() - jest wywoływana, gdy React tworzy lub aktualizuje komponent. Jest to miejsce, gdzie komponent jest renderowany i zwraca element JSX

• shouldComponentUpdate(nextProps, nextState) - jest wywoływana przed każdą aktualizacją komponentu. Jest to miejsce, gdzie można określić, czy komponent powinien zostać zaktualizowany, czy też nie, na podstawie porównania propsów i stanu.

Należy pamiętać, że nie wszystkie metody muszą być używane w każdym komponencie, i niektóre z nich są używane rzadziej niż inne, w zależności od potrzeb danego projektu.