React JS - podstawy

Dlaczego warto używać React JS?

React skupia się na budowie komponentów, które mogą być wielokrotnie używane w różnych miejscach aplikacji. Jego podejście oparte na wirtualnym DOM pozwala na efektywne zarządzanie aktualizacjami interfejsu użytkownika, co znacznie zwiększa wydajność w porównaniu do tradycyjnych metod manipulacji DOM.

Pondato, React JS zyskał ogromną popularność dzięki swojej prostocie, dużej społeczności oraz wsparciu w tworzeniu zarówno aplikacji internetowych, jak i mobilnych (za pomocą React Native). Dodatkowo, wiele firm na całym świecie wykorzystuje React w swoich projektach, co czyni go wartościową technologią dla każdego programisty front-end.

Podstawowe koncepcje w React JS

Komponenty (Components)

Podstawowym budulcem aplikacji w React są komponenty. Są to samodzielne, odizolowane fragmenty interfejsu, które można wielokrotnie używać w różnych miejscach aplikacji. Istnieją dwa główne rodzaje komponentów:

Komponenty funkcyjne – bazują na funkcjach JavaScript.

Komponenty klasowe – korzystają z klas ES6 i dawniej były popularnym wyborem, jednak po wprowadzeniu hooków w React 16.8 komponenty funkcyjne stały się preferowaną metodą.

Przykład komponentu funkcyjnego

function Welcome() {
  return <h1>Witaj w React!</h1>;
}

JSX (JavaScript XML)

JSX to rozszerzenie składni JavaScript, które pozwala na mieszanie logiki JavaScript z kodem HTML. Zamiast pisać kod HTML w oddzielnych plikach, JSX umożliwia umieszczanie go bezpośrednio w funkcjach JavaScript. To ułatwia zarządzanie kodem i zwiększa czytelność.

Przykład JSX:

const element = <h1>Hello, World!</h1>;

JSX pod maską jest przekształcane do zwykłych wywołań JavaScript, co pozwala na efektywne manipulowanie DOM.

Props

Props to sposób przekazywania danych między komponentami. Są one niezmienne, co oznacza, że komponent-rodzic przekazuje dane komponentowi-dziecku, ale dziecko nie może ich zmienić.

Przykład:

function User(props) {
  return <h1>Witaj, {props.name}!</h1>;
}

<User name="Jan" />

Tutaj komponent User otrzymuje wartość props.name i wyświetla „Witaj, Jan!”.

Szukasz wsparcia w projektach IT?

Napisz do nas!

State (Stan)

State to dynamiczne dane, które mogą się zmieniać w trakcie działania aplikacji. W komponentach funkcyjnych korzystamy z hooka useState do zarządzania stanem.

Przykład:

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

  return (
    <div>
      <p>Stan licznika: {count}</p>
      <button onClick={() => setCount(count + 1)}>Zwiększ</button>
    </div>
  );
}

Stan (count) zmienia się po każdym kliknięciu przycisku.

Cykl Życia Komponentu (Component Lifecycle)

Cykl życia komponentów klasowych

Komponenty klasowe mają wyraźnie zdefiniowane etapy cyklu życia, takie jak:

Mounting – komponent jest montowany do DOM (np. componentDidMount).

Updating – komponent jest aktualizowany (np. componentDidUpdate).

Unmounting – komponent jest usuwany z DOM (np. componentWillUnmount).

Hooki w komponentach funkcyjnych

Dzięki wprowadzeniu hooków, komponenty funkcyjne mogą korzystać z funkcji zarządzania efektami ubocznymi, np. za pomocą useEffect.

Przykład:

useEffect(() => {
  document.title = `Liczba kliknięć: ${count}`;
}, [count]);

Eventy i obsługa zdarzeń w React

React posiada wbudowany mechanizm obsługi zdarzeń, takich jak kliknięcia myszą czy zmiany wartości pól tekstowych.

Przykład obsługi kliknięcia:

function Button() {
  function handleClick() {
    alert('Kliknięto przycisk!');
  }

  return <button onClick={handleClick}>Kliknij</button>;
}

Możemy również przekazywać funkcje jako propsy, aby umożliwić komponentom-rodzicom kontrolę nad interakcjami w komponentach-dzieciach.

Routing w React – React Router

Większość aplikacji wymaga nawigacji między różnymi stronami. React Router to popularna biblioteka do obsługi routingu w React.

Aby skonfigurować routing, najpierw instalujemy pakiet react-router-dom, a następnie definiujemy trasy w naszej aplikacji.

Przykład konfiguracji:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

Praca z formularzami w React

Formularze kontrolowane (Controlled Components)

W formularzach kontrolowanych, wartości pól są przechowywane w stanie komponentu.

Przykład:

function LoginForm() {
  const [email, setEmail] = useState('');

  return (
    <form>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
    </form>
  );
}

Formularze niekontrolowane (Uncontrolled Components)

W formularzach niekontrolowanych dane są pobierane bezpośrednio z DOM za pomocą referencji.

Przykład:

function LoginForm() {
  const emailRef = useRef();

  return (
    <form>
      <input ref={emailRef} />
    </form>
  );
}

Styling w React

React oferuje kilka podejść do stylizacji komponentów. Można używać tradycyjnych arkuszy CSS, jak i bardziej nowoczesnych narzędzi, takich jak Styled Components.

Przykład:

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
`;

<Button>Kliknij mnie</Button>

Podstawy zarządzania stanem w aplikacjach React

useState vs useReducer

useState jest najprostszym hookiem do zarządzania stanem, natomiast useReducer oferuje większą kontrolę w bardziej skomplikowanych przypadkach.

Context API

Context API pozwala na udostępnianie globalnych danych bez potrzeby przekazywania propsów przez wiele poziomów komponentów.

Przykład:

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Podłączenie do API z React

React umożliwia łatwe pobieranie danych z zewnętrznych API za pomocą fetch lub Axios.

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

Podsumowanie

Poznałeś podstawy React, takie jak komponenty, stan, propsy oraz cykl życia komponentów. Kolejnym krokiem może być nauka zaawansowanych narzędzi, takich jak Redux lub budowanie bardziej skomplikowanych aplikacji z wykorzystaniem zewnętrznych API i Context API. React to potężne narzędzie, które z pewnością zwiększy twoją produktywność jako programisty front-end.