Samouczek ReactJS dla początkujących: ucz się na przykładzie krok po kroku

Co to jest ReactJS?

ReactJS to front-end typu open source JavaBiblioteka skryptów do tworzenia interfejsów użytkownika. ReactJS jest utrzymywany przez Facebooka i społeczność indywidualnych deweloperów i firm. Jest szeroko stosowany jako baza do tworzenia witryn jednostronicowych i aplikacji mobilnych. Jest bardzo łatwy w użyciu i pozwala użytkownikom tworzyć wielokrotnego użytku komponenty interfejsu użytkownika.

Funkcje ReactJS

JSX: JSX jest rozszerzeniem JavaScript. Chociaż używanie JSX w Reagowaniu nie jest obowiązkowe, jest to jedna z dobrych funkcji i łatwa w użyciu.

Podzespoly Komputerowe : Komponenty są jak czyste funkcje JavaScript, które pomagają uprościć kod, dzieląc logikę na niezależny kod wielokrotnego użytku. Komponentów możemy używać jako funkcji, a komponentów jako klas. Komponenty mają również stan, rekwizyty, które ułatwiają życie. Wewnątrz klasy zachowywany jest stan każdego z rekwizytów.

Wirtualny DOM: React tworzy wirtualny DOM, tj. pamięć podręczną struktury danych w pamięci. Tylko ostatnie zmiany DOM zostały później zaktualizowane w DOM przeglądarki.

Javascript Wyrażenia: Wyrażenia JS można używać w plikach jsx za pomocą nawiasów klamrowych, na przykład {}.

Zalety ReactJS

Oto ważne zalety/korzyści korzystania z ReactJS:

ReactJS korzysta z domeny wirtualnej, która korzysta z pamięci podręcznej struktury danych znajdującej się w pamięci i tylko ostateczne zmiany są aktualizowane w domenie przeglądarki. Dzięki temu aplikacja jest szybsza.
Możesz tworzyć wybrane komponenty, korzystając z funkcji komponentu reagującego. Komponenty mogą być ponownie wykorzystane, a także pomocne w utrzymaniu kodu.
Reactjs to biblioteka javascript o otwartym kodzie źródłowym, więc rozpoczęcie pracy z nią jest łatwe.
ReactJS w krótkim czasie stał się bardzo popularny i jest utrzymywany przez Facebooka i Instagram. Jest używany przez wiele znanych firm, takich jak Apple, Netflix, itp.
Facebook utrzymuje bibliotekę ReactJS, dzięki czemu jest dobrze utrzymana i stale 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 używania ReactJS:

Większość kodu jest napisana w JSX, tj. HTML i CSS są częścią JavaScript, może to być dość mylące, ponieważ większość innych frameworków woli trzymać HTML oddzielnie od kodu JavaScript.
Rozmiar pliku ReactJS jest duży.

Używanie ReactJS z CDN

Aby rozpocząć pracę z React, musimy najpierw zainstalować Reactjs. Możesz łatwo rozpocząć korzystanie z Reactjs, korzystając z plików javascript CDN, jak pokazano poniżej.

Przejdź do oficjalnej strony Reagjs, aby uzyskać linki CDN, tj. https://reactjs.org/docs/cdn-links.html a otrzymasz pliki niezbędne do wyjaśnienia poniższego obrazu.

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 najnowszą wersją React zarówno dla React-development.js, jak i React-dom.developement.js. Możesz hostować pliki na swoim końcu, aby rozpocząć pracę z Reactjs.

Jeśli planujesz używać plików CDN, pamiętaj o zachowaniu atrybutu cross-origin, aby uniknąć problemów między domenami. Kod Reactjs nie może zostać wykonany bezpośrednio w przeglądarce i przed wykonaniem w przeglądarce musi zostać przetransferowany za pomocą Babel do JavaScript.

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 tutaj z plikami CDN. Mówi się, że bezpośrednie używanie skryptu babel nie jest dobrą praktyką i nowicjusze mogą po prostu używać go do nauki reactjs na razie. W środowisku produkcyjnym będziesz musiał zainstalować react przy użyciu pakietu npm.

Korzystanie z pakietów NPM

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

Po zainstalowaniu nodejs utwórz folder projekt reakcji/.

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

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

reactproj\
package.json

Teraz zainstalujemy potrzebne pakiety.

Oto lista pakietów dla Reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

Utwórz folder src / gdzie cały kod js znajdzie się w tym folderze. Cały kod projektu Reagjs będzie dostępny w folderze src/. Utwórz plik indeks.js i dodaj import reagują oraz reagują-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')
);

Zwróciliśmy podstawowy kod dla reactjs. Wyjaśnimy szczegóły w następnym rozdziale. Chcemy wyświetlić Witam, z tutoriali Guru99 i to samo jest nadawane elementowi 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 reagują-skrypty zajmie się kompilacją kodu i uruchomieniem serwera w celu wyświetlenia pliku HTML, tj. indeksu.html. Musisz dodać polecenie w package.json, które zajmie się użyciem skryptów reagujących do skompilowania 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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Aby rozpocząć testowanie reakcji, uruchom komendę

npm run start

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

Otworzy się przeglądarka z adresem 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>

W następnych rozdziałach będziemy używać tego samego procesu do uruchamiania plików JavaScript. Dodaj wszystkie pliki js i .jsx do folderu src/. Struktura pliku będzie następująca:

reatproj/
	 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 pomoże Ci rozpocząć od pierwszej aplikacji reagującej.

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 indeks.js w folderze src/

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

ReactDOM.render(

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

ReactDOM.render doda 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 kod.

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

Kiedy uruchomisz powyższe polecenie, skompiluje pliki i powiadomi Cię, jeśli wystąpi jakiś błąd. Jeśli wszystko wygląda dobrze, otworzy przeglądarkę i uruchomi plik Index.html pod adresem http://localhost:3000/index.html

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:

Co to jest JSX?

JSX jest rozszerzeniem języka JavaScript. Jest to szablon skryptu, w którym będziesz mieć możliwość korzystania z HTML i Javascript razem.

Oto prosty przykład kodu JSX.

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

Dlaczego potrzebujemy JSX w React?

Do interfejsu użytkownika potrzebujemy HTML, a każdy element domeny będzie miał zdarzenia do obsługi, zmiany stanu itp.

W przypadku React pozwala nam to na wykorzystanie HTML i JavaScript w tym samym pliku i sprawną kontrolę zmian stanu w domenie.

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 wewnątrz nawiasów klamrowych {} i są rozwijane w czasie wykonywania. Wyrażenia w React są takie same jak wyrażenia JavaScript.

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.

Widać, że wyrażenie {display} nie zostało zastąpione. React nie wie, co zrobić, gdy w pliku .js użyte zostanie wyrażenie.

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 będziemy używać pliku tekstowego.jsx w pliku Index.js. Chcemy h1tag zmienna, która będzie używana w pliku script.js, więc ta sama wartość zostanie wyeksportowana jak pokazano powyżej w pliku test.jsx

Oto zmodyfikowany kod w pliku 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?

Komponenty przypominają czyste funkcje JavaScript, które ułatwiają tworzenie kodu poprzez podzielenie logiki na niezależny kod, który można ponownie wykorzystać.

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ść który zwrócił tag h1, jak pokazano powyżej. Nazwa funkcji pełni rolę elementu, jak pokazano poniżej:

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

Składnik Cześć jest używany jako znacznik HTML, tj. i przydzielony do Witaj_komp zmienna i to samo jest eksportowane za pomocą eksportu.

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;

Komponentu Hello w pliku Index.js możemy użyć 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.

Co to jest stan w ReactJS?

Stan to obiekt javascript podobny do rekwizytów, który zawiera dane do wykorzystania w renderowaniu reakcji. Dane stanu są obiektem prywatnym i są używane w komponentach wewnątrz klasy.

Przykład stanu

Oto działający przykład użycia stanu w klasie.

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?

Rekwizyty to właściwości, które można wykorzystać wewnątrz komponentu. Działają jako obiekt globalny 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 przypisują Część. Dostęp do tego samego można uzyskać 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;

Kurs 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

Cykl życia komponentu jest podzielony na etapy inicjalizacji, montowania, aktualizacji i odmontowywania.

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

Komponent w reactjs ma następujące etapy:

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. Mamy dostęp do następujących metod w stanie montowania.

ComponentDidMount(): Jest to również wywoływane, gdy komponent jest właśnie dodawany do domeny.

render(): Masz tę metodę dla wszystkich utworzonych komponentów. Zwraca węzeł HTML.

Aktualizacja: W tym stanie dom jest interakcyjny z użytkownikiem i aktualizowany. Na przykład, wprowadzasz coś do pola tekstowego, więc właściwości stanu są aktualizowane.

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

ShouldComponentUpdate() : wywoływana, gdy komponent jest aktualizowany.

komponentDidUpdate() : po zaktualizowaniu komponentu.

Odmontowanie: ten stan pojawia się, gdy Komponent nie jest wymagany lub usunięty.

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

Komponent willUnmount(): wywoływany, gdy komponent zostanie usunięty lub zniszczony.

Przykład działania

Oto działający przykład pokazujący metody wywoływane w każdym stanie.

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')
);

Po sprawdzeniu danych wyjściowych 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:

Praca z formularzami

W reagujących elementach wejściowych HTML, takich jak , i <select /> ma swój własny stan i musi być aktualizowany, gdy użytkownik wchodzi w interakcję za pomocą metody setState().

W tym rozdziale zobaczymy 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, więc w tym celu React udostępnia specjalną metodę zwaną stan zestawu, co pomaga utrzymać stan przy każdej zmianie.

Użyliśmy zdarzeń onChange i onClick na polu tekstowym i przycisku Submit. Gdy użytkownik wejdzie do pola tekstowego, wywołane zostanie zdarzenie onChange, a pole nazwy wewnątrz obiektu stanu state zostanie zaktualizowane, 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:

Kliknij przycisk Prześlij

Praca ze zdarzeniami w ReactJS

Praca ze zdarzeniami w Reactjs przebiega tak samo, jak w JavaScript. Możesz użyć wszystkich procedur obsługi zdarzeń używanych w JavaScript. Metoda setState() służy do aktualizacji stanu, gdy użytkownik wchodzi w interakcję z dowolnym elementem HTML.

Oto działający przykład użycia zdarzeń w reakcjach.

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, więc w tym celu React udostępnia specjalną metodę zwaną stan zestawu, co pomaga utrzymać stan przy każdej zmianie.

Wykorzystaliśmy zdarzenia zmieniamy się i kliknij na polu tekstowym i przycisku. Gdy użytkownik wprowadzi tekst do pola tekstowego, zmieniamy się wywoływane jest zdarzenie, a pole nazwy wewnątrz stanu 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

Przyjrzymy się działającemu przykładowi, aby zrozumieć działanie wbudowanego css w reakcjach.

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 kolor: styl „czerwony” do znacznika 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 stylu, który chcesz umieścić na elemencie i użyć wyrażenia, aby dodać styl, jak pokazano w powyższym przykładzie.

Praca z zewnętrznym CSS w ReactJS

Stwórzmy zewnętrzny css , w tym celu utwórz folder css/ i dodaj do niego 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>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Dodajmy teraz 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 otrzymuje szczegóły klasy. Teraz przetestujmy w przeglądarce.

Oto, co widzisz, sprawdzając tag h1 w przeglądarce:

Możesz zobaczyć, że class="h1tag" został pomyślnie dodany do tagu h1.

Podsumowanie

ReactJS to front-end typu open source JavaBiblioteka skryptów do tworzenia interfejsu użytkownika. Jest utrzymywana przez Facebooka i używana przez wiele firm do tworzenia interfejsów użytkownika.
Podstawowe funkcje ReactJS obejmują JSX, komponenty (komponenty funkcjonalne i komponenty oparte na klasach), cykl życia komponentu, właściwości i obsługę stanu komponentu, pracę z wyrażeniami JavaScript.
Konfiguracja projektu ReactJS jest wyjaśniona przy użyciu plików CDN, a także przy użyciu pakietów npm do zbudowania projektu.
JSX jest rozszerzeniem JavaScript. Jest to skrypt szablonowy, w którym będziesz mieć możliwość jednoczesnego używania HTML i JavaScript.
Komponenty przypominają czyste funkcje JavaScript, które ułatwiają tworzenie kodu poprzez podzielenie logiki na niezależny kod, który można ponownie wykorzystać.
Stan to obiekt javascript podobny do rekwizytów, który zawiera dane do wykorzystania w renderowaniu reakcji. Dane stanu są obiektem prywatnym i są używane w komponentach wewnątrz klasy.
Rekwizyty to właściwości, które można wykorzystać wewnątrz komponentu.
Cykl życia komponentu jest podzielony na etapy inicjalizacji, montowania, aktualizacji i odmontowywania.
W elementach wejściowych HTML Reagjs, takich jak , i <select /> ma swój własny stan i musi być aktualizowany, gdy użytkownik wchodzi w interakcję za pomocą metody setState().
Praca ze zdarzeniami w Reactjs przebiega tak samo, jak w JavaScript. Możesz użyć wszystkich procedur obsługi zdarzeń używanych w JavaScript. Metoda setState() służy do aktualizacji stanu, gdy użytkownik wchodzi w interakcję z dowolnym elementem HTML.
ReactJS umożliwia pracę z zewnętrznym CSS, a także wbudowanym CSS przy użyciu wyrażeń JavaScript.

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

Możesz lubić:

5 NAJLEPSZYCH kursów React z…

Co to jest ReactJS?

Funkcje ReactJS

Zalety ReactJS

Wady ReactJS

Używanie ReactJS z CDN

Dla deweloperów

Dla prod

POWIĄZANE ARTYKUŁY

Korzystanie z pakietów NPM

Jak stworzyć pierwszą konfigurację projektu React

Co to jest JSX?

Dlaczego potrzebujemy JSX w React?

Wyrażenia w JSX

Czym są komponenty w ReactJS?

Komponenty jako funkcje

Klasa jako komponent

Co to jest stan w ReactJS?

Przykład stanu

Czym są rekwizyty w ReactJS?

Rekwizyty do komponentu funkcyjnego

Propsy dla komponentu klasowego

Cykl życia komponentu

Przykład działania

Praca z formularzami

Praca ze zdarzeniami w ReactJS

Praca z Inline CSS w ReactJS

Praca z zewnętrznym CSS w ReactJS

Podsumowanie