Skip to content

Co to jest, do czego służy i jak działa biblioteka JavaScript React.js? – Przykłady

19 de czerwiec de 2021

Czy wiesz, czym jest biblioteka JavaScript Reactjs i do czego służy? Robimy małą historię Reactjs odpowiada za budowę dwóch dużych sieci społecznościowych na całym świecie: Facebook i Instagram. Choć nigdzie nie jest to ściśle określone, początkowo zostało stworzone dla Facebooka, bardzo wszechstronnej sieci. o szerokim zastosowaniu w biznesie internetowym. Jak mogę zacząć korzystać z Reactjs?.

Czym jest biblioteka JavaScript Reactjs?

Reactjs ma na celu rozwijanie i budowanie interfejsów użytkownika. Ideą Reactjs jest podążanie za ideologią opartą na komponentach. Jego deklaratywne widoki sprawiają, że kod jest bardziej przewidywalny i łatwiejszy do debugowania.

Możemy użyć Reactjs w połączeniu z Webpackiem jako menedżera pakietów, Redux w połączeniu z ImmutableJS do zarządzania stanem aplikacji.

Istnieje kilka innych bibliotek, które ułatwiają życie programistom, takich jak Gulp do obsługi zadań kompilacji i wdrażania. Knockout.js, to kolejna biblioteka JavaScript, który tworzy interfejsy użytkownika, ale korzysta z własnego podstawowego systemu aktualizacji danych.

Jak zacząć, skoro jest to biblioteka JavaScript Reactjs?

React i JSX

W React szeroko zobaczysz takie fragmenty kodu:

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

To nie jest ciąg JavaScript ani HTMLZamiast tego nazywa się JSX, rozszerzenie składni dla JavaScript. Jest szeroko stosowany w metodach renderowania dla Reacta.

Aby renderować dynamiczne części stron internetowych. JSX produkuje „przedmioty” Reaction i na przykład jest szeroko stosowany podczas przetwarzania czegoś w oparciu o warunek.

Aby użyć JSX w metodzie render, musi być zapakowany w {}:

<img src={user.avatarUrl}></img>

JSX jest bezpieczny w użyciu, ponieważ zapobiega atakom iniekcyjnym, więc nie musisz się martwić o wstrzyknięcie kodu.

Na pewno będziesz chciał również wyrenderować listę elementów lub przejść przez jakiś obiekt w pewnym momencie podczas tworzenia.

Odbywa się to również za pomocą JSX I tak jak z warunkami, mam osobny artykuł, który skupia się wyłącznie na renderowaniu list.

Jak używać kluczy list w bibliotece JavaScript Reactjss

co to jest biblioteka Reactjs Javascript?

Klucze pomoc Reaguj, aby określić, które elementy uległy zmianie, są dodawane lub usuwane. Klucze muszą być niepowtarzalne i nie mogą być edytowalne w celu poprawnej reprezentacji elementów React na liście.

Organizacja oparta na komponentach i akcesoriach

W świecie React lubimy rozkładać rzeczy na modułowe komponenty. Na przykład, gdybyśmy pisali klienta poczty e-mail.

Możemy mieć składnik dla listy e-mailowej, jeden dla elementu na tej liście, jeden dla okienka podglądu, jeden dla paska narzędzi i tak dalej.

Utrzymanie elementów modułowych sprawia, że ​​są łatwe do zrozumienia, wyjątkowo wielokrotnego użytku i łatwe do przetestowania.

Oto przykład komponentu React.

import React, { Component } from 'react';

class Hello extends Component {

render() {
return <div>I am a component!</div>
}

}

Ten komponent po prostu wygeneruje etykietę

z tekstem w środku. Zauważysz, że zaimportowana zależność React nie jest używana! Dobrze.

Właściwie to jest! Używane, gdy kod jest transpilowany do natywnego JavaScript, więc jest to wymóg każdego pliku JSX.

Możesz używać innych komponentów w komponentach React. Oto przykład:

import React, { Component } from 'react';

import Hello from './Hello';

class Welcome extends Component {

render() {
return <div>
<Hello />
</div>
}

}

Stan reakcji

Z drugiej strony państwo jest prywatne i jego głównym celem jest manipulowanie nim w komponencie. Status jest dostępny tylko dla klas.

Ae używa do obsługi niektórych zmian wewnętrznych (takich jak aktualizacja zapisanego tekstu na podstawie zdarzenia onChange):

import React, { Component } from 'react';

class Hello extends Component {

setName() {
this.setState({name: 'Dayle'});
}

render() {
return <div>
<p>Hello there {this.state.name}!</p>
<button onClick={this.setName.bind(this)}>Set name!</button>
</div>
}

}

W tym przykładzie dodaliśmy przycisk ze zdarzeniem onClick, które wywołuje metodę setName() na tym komponencie.

Nie martw się zbytnio o część wiążącą (), to tylko sposób na zmianę zakresu funkcji i jest to przydatna mała funkcja JavaScript.

Początkowo, gdy komponent jest wyświetlany, wyświetli „Hello!” bez imienia, to dlatego, że ten.stan.nazwa Nie jest zdefiniowany.

Jeśli klikniemy przycisk, nasz kod wywoła this.setState () aby zaktualizować status o nazwę, a komponent zostanie ponownie renderowany, aby pokazać „Hello there Dayle!”, aktualizując się w czasie rzeczywistym.

Składnik cyklu życia

Metody obsługujące cykl życia składnika są dziedziczone z Component. Bardziej szczegółowy opis metod cyklu życia można znaleźć tutaj.

Należy pamiętać, że w przypadku aplikacji uniwersalnych (aplikacji renderowanych na serwerze) zmienne globalne związane z przeglądarką.

Stylizacja komponentów React

Chociaż React nie obsługuje bezpośredniego użycia CSS do stylizacji, ale jest bardziej nastawiony na wbudowane style jsx (przekazywanie obiektu styl do tagu HTML), podejście to nie jest stosowane tak często.

React nie jest tak skomplikowany. Niestety, podobnie jak w przypadku wielu bibliotek Javascript, narzędzia i procesy do budowania, które się wokół nich znajdują, reagują, co komplikuje sprawę.

dołącz do naszego kanału telegram