Samouczek ReactJS dla początkujących

Co to jest ReactJS?

ReactJS to front-end typu open source JavaBiblioteka skryptów do tworzenia interfejsów użytkownika. ReactJS Platforma jest utrzymywana przez Meta (dawniej Facebook) oraz społeczność indywidualnych programistów i firm. Jest szeroko wykorzystywana jako baza do tworzenia aplikacji jednostronicowych i aplikacji mobilnych. Jest bardzo łatwa w użyciu i pozwala użytkownikom tworzyć wielokrotnego użytku komponenty interfejsu użytkownika.

Zanim napiszesz pierwszą linijkę kodu React, warto wiedzieć, czym ta biblioteka różni się od zwykłej JavaSkrypt. W następnej sekcji omówimy jego podstawowe funkcje.

Funkcje ReactJS

JSX: JSX jest rozszerzeniem JavaSkrypt. Chociaż używanie JSX nie jest obowiązkowe w React, jest to jedna z zalet i jest łatwe w użyciu.

Komponenty : Składniki są jak czyste JavaFunkcje skryptowe, które ułatwiają kodowanie poprzez podzielenie logiki na niezależny, wielokrotnego użytku kod. Komponenty mogą być używane jako funkcje, a komponenty jako klasy. Komponenty posiadają również stan i właściwości, co ułatwia życie. Wewnątrz komponentu klasy stan i właściwości są utrzymywane.

Wirtualny DOM: React tworzy wirtualny DOM, czyli pamięć podręczną struktury danych w pamięci. Tylko ostatnie zmiany są później aktualizowane w DOM przeglądarki, co zapewnia szybkie renderowanie.

JavaWyrażenia skryptowe: Wyrażenia JS można stosować w plikach JSX za pomocą nawiasów klamrowych, na przykład {}.

Zalety ReactJS

Oto najważniejsze zalety i korzyści wynikające ze stosowania ReactJS:

• ReactJS korzysta z wirtualnego DOM, który wykorzystuje pamięć podręczną struktury danych w pamięci, a tylko ostateczne zmiany są aktualizowane w DOM przeglądarki. Dzięki temu aplikacja działa szybciej.
• Możesz tworzyć dowolne komponenty, korzystając z funkcji komponentów React. Komponenty można ponownie wykorzystać, a ponadto są one pomocne w utrzymaniu kodu.
• ReactJS jest oprogramowaniem typu open source JavaBiblioteka skryptów, dzięki której łatwo zacząć.
• ReactJS zyskał ogromną popularność w krótkim czasie i obsługuje takie produkty jak Facebook i Instagram. Jest używany przez wiele znanych firm, takich jak Apple, Netflix, itp.
• Biblioteka ReactJS jest utrzymywana przez Meta, dlatego jest ona dobrze utrzymywana i aktualizowana.
• ReactJS może być używany do tworzenia bogatego interfejsu użytkownika zarówno dla aplikacji komputerowych, jak i mobilnych.
• Łatwe do debugowania i testowania, ponieważ większość kodowania odbywa się w JAVASCRIPT a nie w HTML.

Wady ReactJS

Oto wady/wady korzystania z ReactJS:

• Większość kodu jest napisana w JSX, tzn. HTML i CSS są częścią JavaSkrypt. Może to być dość mylące, ponieważ większość innych frameworków preferuje keeping HTML oddzielony od JavaKod skryptu.
• Rozmiar pliku ReactJS jest stosunkowo duży.

Znając kompromisy, jesteś gotowy do skonfigurowania Reacta. Najszybszym sposobem na wypróbowanie go jest bezpośrednie połączenie z CDN, które omówimy najpierw; konfiguracje oparte na npm dla rzeczywistych projektów przedstawimy później.

Używanie ReactJS z CDN

Aby rozpocząć pracę z Reactem, musimy najpierw dodać ReactJS do naszej strony. Możesz łatwo rozpocząć korzystanie z ReactJS dzięki CDN. JavaPliki skryptów pokazane poniżej.

Przejdź do witryny z dokumentacją starszej wersji React, aby uzyskać łącza CDN, np. https://legacy.reactjs.org/docs/cdn-links.html, a wymagane pliki zostaną wyjaśnione na poniższym obrazku.

Dla deweloperów

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Dla prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

zastąpić wersja z wersją Reacta, którą chcesz dla react.development.js i react-dom.development.js. Na tej stronie używamy wersji 16, więc poniższe przykłady działają bez zmian.

Jeśli planujesz korzystać z plików CDN, pamiętaj o zachowaniu atrybutu crossorigin, aby uniknąć problemów międzydomenowych. Kodu ReactJS nie można wykonać bezpośrednio w przeglądarce i należy go transpilować do zwykłego kodu za pomocą Babel. JavaSkrypt przed wykonaniem w przeglądarce.

Oto skrypt BabelJS, którego można użyć:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Oto działający przykład ReactJS wykorzystujący pliki CDN i skrypt BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Wyjście:

W następnym rozdziale zajmiemy się szczegółami kodu; zobaczmy, jak działa on z plikami CDN. Bezpośrednie korzystanie ze skryptu Babel nie jest dobrą praktyką i nowicjusze powinni na razie używać go tylko do nauki ReactJS. W środowisku produkcyjnym React będzie musiał zostać zainstalowany za pomocą pakietu npm.

Korzystanie z pakietów NPM

Upewnij się, że masz zainstalowany Node.js. Jeśli nie, zapoznaj się z tym samouczkiem dotyczącym Node.js (https://www.guru99.com/node-js-tutorial.html) instalacja.

Po zainstalowaniu Node.js utwórz folder projekt reakcji/.

Aby rozpocząć konfigurację projektu, uruchom polecenie początek npm.

Oto jak będzie wyglądać struktura folderów:

reactproj\
package.json

Teraz zainstalujemy potrzebne pakiety.

Oto lista pakietów dla ReactJS. Przypinamy React do wersji 16, aby… ReactDOM.render przykłady na tej stronie działają dokładnie tak, jak pokazano:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Otwórz wiersz poleceń i uruchom powyższe polecenia w folderze reactproj/.

Utwórz folder src / gdzie znajdzie się cały kod JS. Cały kod projektu ReactJS będzie dostępny w folderze src/. Utwórz plik index.js i zaimportuj react i react-dom, jak pokazano poniżej.

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Napisaliśmy podstawowy kod dla ReactJS. Szczegóły wyjaśnimy w następnym rozdziale. Chcemy wyświetlić Cześć, z Guru99 samouczków, a to samo dotyczy elementu DOM o identyfikatorze „root”. Jest on pobierany z pliku index.html, który jest plikiem startowym, jak pokazano poniżej.

Utwórz folder public/ i dodaj do niego plik index.html, jak pokazano poniżej.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Pakiet react-scripts zajmie się kompilacją kodu i uruchomieniem serwera w celu wyświetlenia pliku HTML, tj. index.html. Należy dodać polecenie w pliku package.json, które zajmie się użyciem react-scripts do kompilacji kodu i uruchomienia serwera, jak pokazano poniżej:

 "scripts": {
    "start": "react-scripts start"
  }

Po zainstalowaniu wszystkich pakietów i dodaniu powyższego polecenia ostateczny plik package.json wygląda następująco:

Pakiet.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Aby rozpocząć testowanie ReactJS, uruchom polecenie:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Otworzy się przeglądarka z URL http://localhost:3000/ jak pokazano poniżej:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Użyjemy tego samego procesu do wykonania JavaPliki skryptów również w kolejnych rozdziałach. Dodaj wszystkie pliki .js i .jsx do folderu src/. Struktura plików będzie następująca:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Jak stworzyć pierwszą konfigurację projektu React

Oto przewodnik krok po kroku w tym samouczku ReactJS, który pokaże Ci, jak rozpocząć pracę nad pierwszą aplikacją React.

Krok 1) Zaimportuj pakiety reakcji.
1. Aby rozpocząć pracę z ReactJS, musimy najpierw zaimportować pakiety reakcji w następujący sposób.

import React from 'react';
import ReactDOM from 'react-dom';

2. Zapisz plik jako index.js w folderze src/.

Krok 2) Napisz prosto Code.
W tym samouczku napiszemy prosty kod React JS, w którym wyświetlimy komunikat „Witam, z Guru99 samouczków!”

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render dodam Tag do elementu o identyfikatorze root. Oto plik HTML, który mamy:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Krok 3) Skompiluj Code.

W dalszej części tego samouczka dotyczącego React.js musimy skompilować kod, aby uzyskać wynik w przeglądarce.

Oto struktura folderów:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Dodaliśmy polecenia umożliwiające kompilację końcowego pliku w package.json w następujący sposób:

"scripts": {
    "start": "react-scripts start"
  },

Aby skompilować plik końcowy, uruchom następujące polecenie:

npm run start

Po uruchomieniu powyższego polecenia pliki zostaną skompilowane i powiadomiony o wystąpieniu błędu. Jeśli wszystko wygląda dobrze, przeglądarka otworzy stronę i wyświetli ją. http://localhost:3000/

Polecenie: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Krok 4) Sprawdź wyjście.
URL http://localhost:3000 otworzy się w przeglądarce po skompilowaniu kodu, jak pokazano poniżej:

Jak skonfigurować React z Vite (nowoczesne podejście)

Powyższa konfiguracja skryptów React pochodzi z Create React App (CRA), które przez lata było standardowym narzędziem startowym. Zespół React oficjalnie wycofał Create React App w lutym 2025 roku, więc nowe projekty powinny zamiast tego korzystać z nowoczesnego narzędzia do kompilacji. Najpopularniejszym wyborem jest obecnie Zyje, który zaczyna się szybciej i tworzy mniejsze kompilacje.

Oto jak utworzyć nowy projekt React za pomocą Vite:

Krok 1) Uruchom polecenie scaffolding w terminalu:

npm create vite@latest my-react-app -- --template react

Krok 2) Przejdź do folderu i zainstaluj zależności:

cd my-react-app
npm install

Krok 3) Uruchom serwer programistyczny:

npm run dev

Vite obsługuje aplikację na http://localhost:5173/ domyślnie i ładuje się ponownie natychmiast po zapisaniu pliku.

Główne różnice w stosunku do starszej konfiguracji na tej stronie:

• Plik wejściowy to src/main.jsx zamiast src/index.js.
• Instaluje najnowszą wersję React, która wykorzystuje createRoot zamiast ReactDOM.render.
• Plik index.html znajduje się w katalogu głównym projektu, a nie w public/.
• Kompilacje są tworzone przy użyciu npm run build do folderu dist/.

W przypadku potrzeb pełnego stosu, takich jak routing i renderowanie serwera, zespół React zaleca również takie frameworki, jak Next.jsWszystko, czego nauczysz się w poniższych rozdziałach — JSX, komponenty, stan i właściwości — ma zastosowanie bez zmian w projekcie Vite lub Next.js.

Co to jest JSX?

JSX jest rozszerzeniem JavaSkrypt. To szablon skryptu, w którym będziesz mógł korzystać z HTML i JavaNapiszcie scenariusz razem.

Oto prosty przykład kodu JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Dlaczego potrzebujemy JSX w React?

W przypadku interfejsu użytkownika potrzebny jest kod HTML, a każdy element w DOM będzie miał zdarzenia do obsłużenia, zmiany stanu itp.

W przypadku Reacta pozwala nam to na wykorzystanie HTML i JavaUtwórz skrypt w tym samym pliku i sprawnie zajmij się zmianami stanu w DOM.

Wyrażenia w JSX

Oto prosty przykład użycia wyrażeń w JSX.

We wcześniejszych przykładach ReactJS napisaliśmy coś takiego:

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Teraz zmienimy powyższy kod, aby dodać wyrażenia. Wyrażenia są używane w nawiasach klamrowych {} i rozwijane w czasie wykonywania. Wyrażenia w React działają tak samo jak JavaWyrażenia skryptowe.

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Przetestujmy teraz to samo w przeglądarce.

Na powyższym zrzucie ekranu widać, że wyrażenie {display} nie jest zastępowane. React nie wie, co zrobić, gdy wyrażenie jest używane w pliku .js.

Dodajmy teraz zmiany i utwórzmy plik .jsx, jak pokazano poniżej:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Dodaliśmy wymagany kod i użyjemy pliku test.jsx w index.js. Chcemy, aby h1tag zmienna, która ma być użyta w pliku index.js, więc jest eksportowana tak, jak pokazano powyżej w pliku test.jsx.

Oto zmodyfikowany kod w index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

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

Aby użyć pliku test.jsx w pliku index.js, musimy go najpierw zaimportować, jak pokazano poniżej:

import h1tag from './test.jsx';

Możemy teraz użyć tagu h1 w renderowaniu ReactDOM, jak pokazano poniżej:

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

Oto wynik, gdy sprawdzimy to samo w przeglądarce:

Czym są komponenty w ReactJS?

Składniki są jak czyste JavaFunkcje skryptowe ułatwiające pisanie kodu poprzez podzielenie logiki na niezależny, możliwy do ponownego wykorzystania kod.

Komponenty jako funkcje

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Stworzyliśmy funkcję o nazwie Cześć Zwraca znacznik h1, jak pokazano powyżej. Nazwa funkcji działa jak element, jak pokazano poniżej:

const Hello_comp = <Hello />;
export default Hello_comp;

Składnik Cześć jest używany jako znacznik HTML, tj. , przypisany do Witaj_komp zmienna, a ta sama jest eksportowana za pomocą export.

Użyjmy teraz tego komponentu w pliku index.js, jak pokazano poniżej:

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

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

Oto wynik w przeglądarce:

Klasa jako komponent

Oto przykład ReactJS, który wykorzystuje klasę jako komponent.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Możemy użyć komponentu Hello w pliku index.js w następujący sposób:

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

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

Komponent Hello jest używany jako znacznik HTML, tj. .

Oto wynik tego samego.

Komponenty klasowe kontra komponenty funkcyjne i haki

Poznałeś już oba sposoby pisania komponentu, więc którego z nich powinieneś użyć? Ta strona omawia komponenty klasowe, ponieważ wyraźnie przedstawiają one koncepcje stanu i cyklu życia, co jest cenne dla początkujących i nadal pojawia się w starszych bazach kodu. Jednak od czasu wprowadzenia Hooków w React 16.8, komponenty funkcyjne również mogą przechowywać stan i są one rekomendowanym stylem dla całego nowego kodu.

WYGLĄD	Komponent klasy	Komponent funkcyjny z hakami
Miasto	this.state i this.setState()	Hook useState()
Cykl życia produktu	componentDidMount, componentDidUpdate, componentWillUnmount	Hook useEffect() obejmuje wszystkie trzy
Składnia	Więcej szablonów (konstruktor, bind, this)	Krótszy, bez tego słowa kluczowego
Status	Obsługiwany, starszy styl	Zalecane dla nowego kodu

Oto przykład stanu z tej strony przepisany przy użyciu hooka useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Obie wersje generują ten sam wynik. Zapoznaj się ze składnią klas używaną w poniższych rozdziałach, a następnie przećwicz konwersję każdego przykładu na hooki.

Co to jest stan w ReactJS?

Państwo to JavaObiekt skryptu, podobny do props, przechowujący dane do wykorzystania w renderowaniu ReactJS. Dane stanu są obiektem prywatnym i są używane w komponentach wewnątrz klasy.

Przykład stanu

Oto przykład działania pokazujący, jak używać stanu wewnątrz klasy.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

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

Oto, co otrzymamy, testując to w przeglądarce:

Czym są rekwizyty w ReactJS?

Właściwości to właściwości używane wewnątrz komponentu. Działają jak obiekty globalne lub zmienne, których można używać wewnątrz komponentu.

Rekwizyty do komponentu funkcyjnego

Oto przykład przekazywania właściwości do komponentu funkcji.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Jak pokazano powyżej, dodaliśmy msg atrybut do komponent. Dostęp do niego jest możliwy jako props wewnątrz funkcji Hello, która jest obiektem, który będzie miał msg szczegóły atrybutu, i ten sam jest używany jako wyrażenie.

Komponent jest używany w pliku Index.js w następujący sposób:

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

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

Oto wynik w przeglądarce:

Propsy dla komponentu klasowego

Aby uzyskać dostęp do rekwizytów w klasie, możemy to zrobić w następujący sposób:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

msg atrybut jest przekazywany do komponentu w pliku Index.js w następujący sposób:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Oto wynik w przeglądarce:

Sprawdź również: - Samouczek AngularJS dla początkujących: Naucz się AngularJS krok po kroku

Cykl życia komponentu

Po omówieniu komponentów, stanu i właściwości, kolejnym krokiem jest zrozumienie, kiedy React wywołuje metody komponentu. Cykl życia komponentu dzieli się na etapy inicjalizacji, montowania, aktualizacji i odmontowywania.

Poniżej znajduje się szczegółowe wyjaśnienie każdego etapu.

Komponent w ReactJS składa się z następujących etapów:

Inicjalizacji: Jest to pierwszy etap cyklu życia komponentu.

Tutaj będzie miał domyślne właściwości i stan na poziomie początkowym.

Montowanie:W tej fazie komponent jest renderowany wewnątrz DOM. W stanie montowania mamy dostęp do następujących metod:

• render(): Ta metoda jest dostępna dla wszystkich utworzonych komponentów. Zwraca węzeł HTML.
• componentDidMount(): Funkcja ta jest wywoływana bezpośrednio po dodaniu komponentu do DOM.

Aktualizacja:W tym stanie użytkownik wchodzi w interakcję z DOM i następuje jego aktualizacja. Na przykład, użytkownik wprowadza coś do pola tekstowego, co powoduje aktualizację właściwości stanu.

Poniżej przedstawiono metody dostępne w stanie aktualizacji:

• shouldComponentUpdate(): wywoływana przed ponownym renderowaniem; pozwala zdecydować, czy komponent powinien zostać zaktualizowany. Zwrócenie wartości true powoduje ponowne renderowanie komponentu.
• componentDidUpdate(): wywoływana po zaktualizowaniu komponentu.

Odmontowanie: Taki stan występuje, gdy komponent nie jest już potrzebny lub został usunięty.

Poniżej przedstawiono metodę dostępną w stanie odmontowania:

• componentWillUnmount(): wywoływana tuż przed usunięciem lub zniszczeniem komponentu.

Przykład działania metod cyklu życia

Poniżej znajduje się działający przykład pokazujący metody wywoływane na każdym etapie.

Przykład: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

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

Podczas sprawdzania wyniku w przeglądarce:

W konsoli przeglądarki otrzymujesz:

Gdy użytkownik wprowadzi tekst do pola tekstowego:

W konsoli wyświetlane są następujące komunikaty:

Teraz, gdy wiesz już, kiedy komponent renderuje się i aktualizuje, możemy zastosować stan i zdarzenia w praktyce: obsłudze danych wprowadzanych przez użytkownika za pomocą formularzy.

Praca z formularzami

W ReactJS elementy wejściowe HTML, takie jak , , <select /> mają swój własny stan i muszą zostać zaktualizowane, gdy użytkownik wchodzi w interakcję, za pomocą metody setState().

W tym rozdziale pokażemy, jak pracować z formularzami w ReactJS.

Oto działający przykład:

formularz.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

W przypadku pól wejściowych musimy zachować stan, dlatego React udostępnia w tym celu specjalną metodę o nazwie ustaw stan, która pomaga utrzymać stan w przypadku każdej zmiany. W rzeczywistym zastosowaniu wywołaj również event.preventDefault() wewnątrz formSubmit, aby zatrzymać ponowne ładowanie strony przez przeglądarkę w momencie wysłania.

Użyliśmy zdarzeń onChange i onClick w polu tekstowym i przycisku Submit. Gdy użytkownik wpisuje tekst w polu tekstowym, wywoływane jest zdarzenie onChange, a pole nazwy w obiekcie stanu jest aktualizowane, jak pokazano poniżej:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

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

Dane wyjściowe w przeglądarce są następujące:

Krok 1) Wpisz swoje imię w polu tekstowym:

Krok 2) Kliknij przycisk „Wyślij”:

Praca ze zdarzeniami w ReactJS

Formularze to tylko jedno ze źródeł interakcji użytkownika. Praca z wydarzeniami w ReactJS przebiega tak samo, jak w JavaSkrypt. Możesz używać wszystkich procedur obsługi zdarzeń, które są używane w JavaSkrypt. Metoda setState() służy do aktualizacji stanu, gdy użytkownik wchodzi w interakcję z dowolnym elementem HTML.

Oto przykład działania pokazujący, jak używać zdarzeń w ReactJS.

wydarzenia.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

W przypadku pól wejściowych musimy zachować stan, dlatego React zapewnia ustaw stan metoda, która pomaga utrzymać stan za każdym razem, gdy następuje jego zmiana.

Wykorzystaliśmy wydarzenia zmieniamy się oraz kliknij na polu tekstowym i przycisku. Gdy użytkownik pisze w polu tekstowym, zmieniamy się wywoływane jest zdarzenie, a pole nazwy wewnątrz obiektu stanu jest aktualizowane, jak pokazano poniżej:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

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

Oto wynik w przeglądarce:

Gdy użytkownik wprowadzi nazwę:

Gdy użytkownik kliknie przycisk Kliknij tutaj:

Praca z Inline CSS w ReactJS

Gdy komponenty obsługują dane i zdarzenia, ostatnim krokiem jest nadanie im stylu. Przyjrzymy się działającemu przykładowi, aby zrozumieć inline CSS w ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Dodałem styl color: 'red' do tagu h1.

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

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

Dane wyjściowe w przeglądarce są następujące:

Możesz utworzyć obiekt ze stylem, jaki chcesz zastosować do elementu, i użyć wyrażenia, aby dodać styl, jak pokazano w przykładzie powyżej.

Praca z zewnętrznym CSS w ReactJS

Utwórzmy zewnętrzny plik CSS. W tym celu utwórz folder css/ i dodaj do niego plik style.css.

style.css

.h1tag {
color:red;
}

Dodaj plik style.css do pliku Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Teraz dodajmy klasę do znacznika h1 w pliku .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

indeks.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

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

Atrybut className zawiera szczegóły klasy. Należy pamiętać, że JSX używa nazwa klasy zamiast atrybutu klasy HTML, ponieważ klasa jest zarezerwowanym słowem kluczowym w JavaSkrypt. Teraz przetestujmy go w przeglądarce.

Oto co zobaczysz po sprawdzeniu znacznika h1 w przeglądarce:

Można zobaczyć, że klasa „h1tag” została pomyślnie dodana do znacznika h1.

Dlaczego ReactDOM.render został zastąpiony przez createRoot

Każdy przykład na tej stronie montuje aplikację za pomocą ReactDOM.render, co jest poprawne dla React 16 i 17, wersji, do których skierowany jest ten kurs. React 18, wydany w marcu 2022 roku, zastąpił ten punkt wejścia API createRoot, a React 19 całkowicie usunął ReactDOM.render. Powodem jest współbieżność: createRoot umożliwia Reactowi jednoczesne przygotowanie kilku wersji interfejsu użytkownika, przerwanie renderowania o niskim priorytecie i zachowanie…ping i płynne animacje. Funkcje takie jak automatyczne przetwarzanie wsadowe, useTransition i strumieniowanie oparte na Suspense zależą od tego.

Współczesny odpowiednik pliku index.js używanego na tej stronie wygląda następująco:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Wszystko inne, czego się tu nauczyłeś — komponenty, JSX, stan, właściwości i zdarzenia — działa tak samo po tej jednolinijkowej zmianie w punkcie wejścia. Różnice w wersjach, takie jak ta, często się pojawiają. Pytania do rozmowy kwalifikacyjnej dotyczące React JSDlatego warto zrozumieć oba API.

FAQ

Sprawdź również: - 70 najpopularniejszych pytań i odpowiedzi podczas rozmowy kwalifikacyjnej React (zaktualizowane)