React to biblioteka JavaScript do budowania interfejsów użytkownika.

Co to jest reakcja

Dla programistów Frontend bardzo popularna jest biblioteka javascript znana jako React.JS . Pomaga w łatwym tworzeniu interfejsu internetowego. Poinformujmy o podstawowym, fundamentalnym temacie React.JS.

Reaguj na dlaczego

Wraz z konkurencją Angular i Vue.JS będą na szczęście dobrym wyborem, React zdobył najlepszą pozycję dla większości deweloperów. Ponieważ jest łatwy do nauczenia i łatwy w pracy. React sprawił, że rozwój był szybki i płynny. Jeśli znasz się na JavaScript i ES6 , z łatwością nauczysz się reagować.

składniki

Komponenty React mogą być funkcją lub klasą. To jak szablon. Możesz również powiedzieć, że jest to globalna definicja i plan. Podstawowa struktura komponentów jest podobna do zwykłej funkcji JS . Składnik ma jeden lub więcej stanów, w których przechowywane są dane i od tego zależą dane wyjściowe.

Pomocną rzeczą jest to, że komponenty sprawiają, że kod jest czytelny i łatwy w obsłudze.

Wirtualny DOM

Dom wirtualny jest tylko wirtualną reprezentacją prawdziwego domu. Za każdym razem zmienia się stan naszej aplikacji i wirtualny dom aktualizuje się w miejsce prawdziwego domu. Gdy nowe elementy zostaną uwzględnione w Twoim wirtualnym domku interfejsu użytkownika , utwórz wirtualne drzewo. I wszystkie elementy są połączone na tym drzewie. Jeśli jakikolwiek element uległ zmianie, wirtualny dom porównaj go z poprzednim wirtualnym drzewem dom. Jeśli tak się stanie, wirtualny dom oblicz i zmień metodę prawdziwego domu.

Wirtualny DOM jest znacznie szybszy i wydajny. Kiedy nadchodzi wirtualny dom i jego wydajność jest lepsza niż prawdziwego domu.

Reaguj haki

React-hook jest jak funkcja. Hooki rozwiązują problem komponentów ponownego użycia kodu. Hooki są pisane bez klas. Oznacza to, że działa tylko przy użyciu funkcjonalnych komponentów. Zwykle programiści reagujący są zaznajomieni z hakami reakcji.

UseState w React.js

Stan zawiera określone dane, które z czasem mogą się zmieniać w składnik. Za pomocą useState możesz zmienić dane, które podałeś w swoim kodzie. Zawsze, gdy używasz useState , musisz go zaimportować.

Przykład ( )

import React, { useState } from ‘react’; 2:
function Example() {
 const [count, setCount] = useState(0); 5:
 
 return (
 <div>
 <p>You clicked {count} times</p>
 <button onClick={() => setCount(count + 1)}>10: 
 Click me
 </button>
 </div>
 );
}

UseEffect służy do aktualizacji dokumentu za pomocą interfejsu API przeglądarki. Jeśli chcesz pokazać dane, które dostałeś z API, musisz użyć hooka useState. Deklarując useState będziesz mógł wyświetlać w swoim interfejsie użytkownika.

Przykład ( )

JSX

JSX to rozszerzenie składni javascript. Przypomina język szablonów, ale zawiera pełną moc javascript. JSX produkuje elementy reagujące . Składnia JSX jest podobna do HTML, ale nie jest HTML. JSX nie zna HTML, a HTML nie zna JSX. Nawet przeglądarki też nie wiedzą, co to jest JSX. Kiedy twój kod jest napisany jako JSX w React, przekonwertuje go do HTML, a przeglądarki zrozumieją i pokażą dane wyjściowe.