React JS: Przewodnik dla początkujących

React JS to potężne narzędzie, które zrewolucjonizowało sposób tworzenia interaktywnych interfejsów użytkownika. Jeśli zastanawiasz się, jak zacząć z nim pracę, ten artykuł jest dla Ciebie. Omówimy podstawowe koncepcje i struktury, takie jak komponenty, props i state, a także pokażemy proste przykłady tworzenia aplikacji. To doskonały punkt startowy dla tych, którzy chcą nauczyć się tej biblioteki od podstaw. # react js javascript

Czym są frameworki programistyczne? Przewodnik po narzędziach

Co to jest React JS?

React (znany również jako ReactJS lub React.js) to biblioteka JavaScript stworzona przez zespół Facebooka w 2013 roku. Służy do budowania dynamicznych interfejsów użytkownika w aplikacjach webowych. Opiera się na architekturze opartej na komponentach (Component-based architecture), co oznacza, że aplikacje są budowane z małych, niezależnych i wielokrotnego użytku kawałków kodu zwanych komponentami.

Dlaczego warto używać React?

Deklaratywne programowanie: Umożliwia opisywanie interfejsu użytkownika w sposób deklaratywny, co ułatwia zrozumienie kodu.
Wysoka wydajność: Dzięki zastosowaniu Virtual DOM, minimalizuje operacje na prawdziwym DOM, co przyspiesza działanie aplikacji.
Unidirectional data flow: Jednokierunkowy przepływ danych ułatwia śledzenie zmian i debugowanie.
Duża społeczność: Ogromne community oznacza dostęp do wielu narzędzi, bibliotek i wsparcia.

Kiedy używać React?

React jest idealny do tworzenia Single Page Application (SPA), gdzie interakcje użytkownika nie wymagają przeładowywania całej strony. Jest szeroko stosowany w tworzeniu aplikacji o różnej skali, od prostych stron po złożone systemy.

Podstawowe koncepcje w React

Komponenty

Komponenty są podstawowymi elementami budującymi aplikacje. Mogą być klasowe lub funkcyjne i mogą zawierać własny stan oraz metody renderujące.

Przykład komponentu funkcyjnego:

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

JSX

JSX (JavaScript XML) to rozszerzenie składni JavaScript, które pozwala na pisanie kodu przypominającego HTML w plikach JavaScript. Ułatwia tworzenie elementów i sprawia, że kod jest bardziej czytelny.

Przykład użycia JSX:

const element = <h1>Witaj, świecie!</h1>;

Props

Props (properties) to dane przekazywane do komponentów. Pozwalają na przekazywanie informacji z komponentów rodziców do dzieci.

Przykład użycia props:

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

<Powitanie imie="Anna" />;

State

State to wewnętrzny stan komponentu, który może ulegać zmianom w trakcie działania aplikacji. Zmiany w stanie powodują ponowne renderowanie komponentu.

Przykład użycia state z React Hooks:

import React, { useState } from 'react';

function Licznik() {
  const [liczba, setLiczba] = useState(0);

  return (
    <div>
      <p>Naciśnięto {liczba} razy</p>
      <button onClick={() => setLiczba(liczba + 1)}>
        Kliknij mnie
      </button>
    </div>
  );
}

React Hooks

React Hooks, wprowadzone w wersji 16.8, pozwalają na korzystanie ze stanu i innych funkcji w komponentach funkcyjnych.

Najważniejsze Hooki

useState: pozwala na korzystanie ze stanu w komponencie funkcyjnym.
useEffect: umożliwia wykonywanie efektów ubocznych, np. pobieranie danych.
useContext: pozwala na korzystanie z Context API do zarządzania stanem bez potrzeby korzystania z zewnętrznych bibliotek.

Przykład użycia useEffect:

import React, { useState, useEffect } from 'react';

function Zegar() {
  const [czas, setCzas] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => setCzas(new Date()), 1000);
    return () => clearInterval(timerID);
  }, []);

  return <h2>Aktualny czas: {czas.toLocaleTimeString()}</h2>;
}

Tworzenie pierwszej aplikacji w React JS JavaScript

Instalacja Create React App

Aby szybko zacząć pracę z React, można użyć narzędzia Create React App, które automatyzuje proces konfiguracji.

Instalacja i utworzenie nowej aplikacji:

npx create-react-app moja-aplikacja
cd moja-aplikacja
npm start

Po uruchomieniu polecenia npm start, nowa aplikacja zostanie uruchomiona pod adresem http://localhost:3000

Strona startowa react app - react js javascript — Zrzut ekranu przedstawiający domyślną stronę startową wygenerowanej aplikacji.

React DOM i Virtual DOM

React DOM to biblioteka odpowiedzialna za aktualizację drzewa DOM w przeglądarce. Virtual DOM to wirtualna reprezentacja DOM, która pozwala na efektywne aktualizacje interfejsu użytkownika poprzez minimalizację bezpośrednich manipulacji na rzeczywistym DOM.

Routing w React

Do obsługi nawigacji w aplikacjach React używa się biblioteki react-router-dom.

Instalacja:

npm install react-router-dom

Przykład prostego routingu:

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

function Aplikacja() {
  return (
    <Router>
      <Switch>
        <Route path="/strona1">
          <Strona1 />
        </Route>
        <Route path="/strona2">
          <Strona2 />
        </Route>
      </Switch>
    </Router>
  );
}

Zarządzanie stanem w React

Context API

Context API pozwala na przekazywanie danych w głąb drzewa komponentów bez konieczności przekazywania props na każdym poziomie. Jest to obecnie preferowane podejście do zarządzania stanem w mniejszych i średnich aplikacjach.

Przykład użycia Context API:

const TemaContext = React.createContext('jasny');

function Aplikacja() {
  return (
    <TemaContext.Provider value="ciemny">
      <Toolbar />
    </TemaContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <PrzyciskTematu />
    </div>
  );
}

function PrzyciskTematu() {
  const tema = React.useContext(TemaContext);
  return <button>{tema}</button>;
}

Diagram przedstawiający przepływ danych w aplikacji React z wykorzystaniem Context API. react js javascript — Diagram przedstawiający przepływ danych w aplikacji React z wykorzystaniem Context API.

react js co to react js routing react js props reactjs docs

Redux

Redux to biblioteka do zarządzania stanem, która była popularna przed wprowadzeniem React Hooks i Context API. Obecnie w wielu projektach odchodzi się od Redux na rzecz prostszych rozwiązań opartych na hookach.

Narzędzia wspierające pracę z React

React Developer Tools

To rozszerzenie do przeglądarek Chrome i Firefox, które umożliwia inspekcję hierarchii komponentów, podgląd props i state.

Link do pobrania: React Developer Tools

VSCode i wtyczki

Edytor Visual Studio Code z odpowiednimi wtyczkami ułatwia pracę z React, oferując podpowiedzi składni, fragmenty kodu i integrację z narzędziami deweloperskimi.

Server-side rendering (SSR) i Next.js

Next.js to framework oparty na React, który umożliwia renderowanie po stronie serwera (SSR). Dzięki temu aplikacje są lepiej indeksowane przez wyszukiwarki i szybciej się ładują.

Przykłady zastosowania Next.js:

Tworzenie aplikacji o wysokiej wydajności.
Poprawa SEO dzięki SSR.
Budowanie aplikacji z dynamicznym routingiem.

JS Next – Co nowego w Next.js 13 i przyszłości frameworka?

React Native

React Native pozwala na tworzenie aplikacji mobilnych na iOS i Androida, dzięki czemu można wykorzystać posiadaną wiedzę do budowy aplikacji mobilnych.

Praktyczne wskazówki

Pisanie czystego kodu

Komponenty powinny być małe i spełniać jedną odpowiedzialność.
Unikaj zagnieżdżania komponentów zbyt głęboko.
Używaj hooks zamiast klasowych komponentów.

Testowanie aplikacji

Używaj narzędzi takich jak Jest i React Testing Library do testowania komponentów.
Testuj interakcje użytkownika i renderowanie komponentów.

Społeczność React

React community jest ogromne i aktywne. Można znaleźć wsparcie na forach, grupach dyskusyjnych i uczestniczyć w konferencjach poświęconych tej technologii.

Przykładowe zasoby:

Oficjalna strona React
ReactJS Docs: Kompleksowe informacje na temat React.
React Tutorial: React Tutorial na stronie oficialnej

Podsumowanie

React JS JavaScript to potężna biblioteka do tworzenia interaktywnych i nowoczesnych interfejsów użytkownika. Dzięki komponentom, props, state i React Hooks, można budować wydajne i skalowalne aplikacje. Nowoczesne podejście do zarządzania stanem z użyciem Context API i hooks ułatwia pracę i zmniejsza potrzebę korzystania z zewnętrznych bibliotek.

Mamy nadzieję, że ten artykuł pomógł zrozumieć, React JS co to jest i jak zacząć z nim pracę. Zachęcamy do dalszego zgłębiania wiedzy i tworzenia własnych projektów z użyciem React.

W tym artykule omówiliśmy:

Czym jest React.js i jakie są jego podstawowe koncepcje.
Jak tworzyć komponenty i jak korzystać z props oraz state.
Jak rozpocząć pracę z Create React App.
Podstawy routingu w React.
Nowoczesne metody zarządzania stanem za pomocą React Hooks i Context API.
Narzędzia wspierające, takie jak React Developer Tools.

Zapraszamy do dalszego eksplorowania React i tworzenia własnych wplikacji!

Sprawdź kurs React JS w Akademii Devstock. # react.js # javascript # react dom # react applications # Unidirectional data flow