Droga do reakcji

Dec 01 2022

React jest jedną z najlepszych bibliotek Javascript używanych do budowania aplikacji internetowych. Aby zrozumieć React, musimy zrozumieć, jak to działa za maską.

Zdjęcie Kseni Yakovleva na Unsplash

React jest jedną z najlepszych bibliotek Javascript używanych do budowania aplikacji internetowych. Aby zrozumieć React, musimy zrozumieć, jak to działa za maską. W tym artykule przyjrzyjmy się podstawom Reacta, surowemu interfejsowi API Reacta, temu, jak działa on wewnętrznie, a na koniec stwórzmy komponent React wielokrotnego użytku.

Zakładam, że masz podstawową wiedzę na temat pojęć JavaScript i HTML DOM. Jeśli nie, możesz przejrzeć te koncepcje tutaj: Przewodnik po JavaScript , Wprowadzenie do DOM .

A teraz przejdźmy do naszego tematu!!

Jak powstaje strona internetowa?

Czy kiedykolwiek byłeś ciekawy, jak działa sieć? Co się dzieje po wpisaniu adresu URL witryny i kliknięciu Enter? Jak możesz zobaczyć tę stronę na naszym ekranie? Przyjrzyjmy się temu krok po kroku.

1. Po wyszukaniu dowolnej witryny do serwera wysyłane jest żądanie HTTP.

2. Serwer wyśle pliki strony.

3. Przeglądarka przeanalizuje te pliki. Najpierw analizowany jest plik HTML, a następnie pliki CSS i JavaScript.

4. Przeglądarka buduje DOM z przeanalizowanego kodu HTML i wyświetla go na ekranie.

W ten sposób strona internetowa jest wyświetlana na ekranie (istnieją inne koncepcje, takie jak serwer DNS i protokół HTTP, ale to nie jest nasz obszar zainteresowania). To takie proste, ale czekaj, co to jest DOM? Skąd to się wzieło? Może zbadamy trochę DOM?

DOM odnosi się do Document Object Model, który reprezentuje dokument HTML z logicznym drzewem. Każda gałąź zawiera węzły, a każdy węzeł zawiera obiekty. Metody DOM umożliwiają dostęp do DOM. Za pomocą tych metod można zmieniać strukturę i zawartość dokumentu.

Jak wszyscy wiemy, HTML jest podstawowym budulcem sieci i możemy tworzyć strony internetowe za pomocą HTML. Stwórzmy prostą stronę internetową wyświetlającą „Witaj świecie!!” jak pokazano niżej:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

Aby umożliwić javascript interakcję z DOM, musimy dodać tag script w pliku HTML, a ty możesz napisać kod do tworzenia, usuwania lub aktualizowania elementów w DOM (to właśnie nazywamy manipulacją DOM).

Przyjrzyjmy się kodowi JavaScript, który wchodzi w interakcję z utworzonym powyżej „Hello World!!” stronę i zmienia jej treść na „Wassup World!!”.

Tworzenie elementów HTML za pomocą Javascript:

Jak widzieliśmy, że możemy modyfikować elementy HTML za pomocą javascript, spróbujmy stworzyć stronę internetową zawierającą div z „root” jako id i h1 jako dzieckiem div. h1 zawiera „Witaj świecie!!”. Kod można znaleźć w piaskownicy poniżej.

Ale tworzenie elementów za pomocą Javascript jest koniecznością. Aby wykonać to zadanie, musimy udostępnić Javascript z instrukcjami krok po kroku. Na przykład, jeśli chcesz utworzyć div z identyfikatorem, musisz najpierw utworzyć ten element div , następnie ustawić atrybut id , a na końcu dołączyć ten div do jego elementu nadrzędnego. To już za dużo pracy. Co jeśli istnieje sposób, aby powiedzieć JavaScriptowi tylko, który element ma utworzyć, a nie jak go utworzyć (podejście deklaratywne)? Redukuje dużo kodu JavaScript. Brzmi świetnie, prawda? Ale jak to osiągnąć? Na czym polega to imperatywne i deklaratywne podejście?

Programowanie imperatywne to sposób, w jaki coś robisz, a programowanie deklaratywne bardziej przypomina to, co robisz. Oto piękny artykuł o programowaniu imperatywnym i deklaratywnym .

React jest językiem deklaratywnym, tzn. pozwala nam pisać kod bez martwienia się o to, co dzieje się pod maską.

Przyjrzyjmy się więc, jak programowanie deklaratywne może ułatwić nam życie.

Przegląd React API:

React API zawiera metody manipulowania DOM. np. React.createElement() i ReactDOM.render(). Rozważ metodę React.createElement() jako odpowiednik metody document.createElement() i ReactDOM.render() jako document.append(). Przyjrzyjmy się bliżej tym metodom.

React.createElement() przyjmuje dwa argumenty: element, który ma zostać utworzony oraz rekwizyty. Jeśli chcesz utworzyć prosty znacznik div z identyfikatorem „root” i tekstem „Hello World!” w środku będzie wyglądać tak:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React jest punktem wyjścia do używania React w twoim kodzie. Możesz zainstalować go jako pakiet przez npm lub użyć plików skryptów dostępnych na unpkg.com . Użyjmy plików skryptów w naszym przykładowym kodzie, ponieważ nie musimy przejmować się ich instalacją.

Teraz odtwórzmy to samo „Hello World!!” strona z React API.

Właściwość children dla React.createElement() może być zwykłym tekstem lub innym elementem, w ten sposób tworzymy elementy zagnieżdżone. Aby to zilustrować, rozważmy następujący kod HTML: element div jako kontener zawierający inny element div jako elementy podrzędne. Podrzędny znacznik div zawiera dwa znaczniki span z tekstem „Hello” i „World”. Link do codeSandbox

tworzenie zagnieżdżonych elementów za pomocą React API

Do tworzenia elementów zagnieżdżonych musimy używać metod zagnieżdżonych, co bardzo utrudnia czytanie i zrozumienie kodu.
Potrzebujemy więc bardziej czytelnego kodu. Czy jest więc jakiś alternatywny sposób na uczynienie kodu czytelnym? Co by było, gdybyśmy mogli pisać składnię podobną do HTML zamiast korzystać z React API? JSX pojawia się tutaj. Poświęćmy kilka minut na naukę o JSX.

JSX:

JSX to składnia podobna do HTML (ale nie HTML), która jest cukrem składniowym w stosunku do twojego surowego React API. Możesz napisać wszystkie te metody React w prostej składni podobnej do HTML za pomocą JSX.

Ponieważ JSX nie jest Javascriptem, musisz przetransponować go na JavaScript, który jest rozumiany przez przeglądarkę.

Babel to transpilator, który transpiluje JSX na JavaScript. Cały JSX jest konwertowany na React API przez Babel, jak pokazano poniżej.

Babel transpiluje JSX do JavaScript

Jak widać na powyższym obrazku, <div id=”root”> jest konwertowane na React.createElement(“div”,{id:”root”},children). W ten sposób Babel konwertuje JSX na React API.

Aby skorzystać z Babel w naszym projekcie, musimy użyć pliku skryptu z unpkg.com i możemy zacząć pisać JSX wewnątrz znacznika skryptu wspominającego type=”text/babel” . Aby uzyskać większą przejrzystość, możesz odnieść się do poniższej piaskownicy

Doszliśmy tak daleko od imperatywnego modyfikowania DOM przez JavaScript do używania JSX. W przeciwieństwie do Javascript, nie martwimy się, jak tworzyć elementy podczas korzystania z JSX. Zadaniem Babel jest przekształcenie ich w React API, które zmodyfikuje DOM.

W ten sposób deklaratywne podejście Reacta ułatwia nam życie. Ale to jeszcze nie koniec i brakuje nam głównej idei Reacta, czyli ponownego użycia. Stwórzmy komponent React wielokrotnego użytku.

Tworzenie komponentów React:

Ponieważ wiemy, że funkcje ułatwiają nam życie, dzieląc się kodem, możemy również udostępniać kod JSX jako funkcje, ale w React są one nazywane komponentami.

Weźmy przykład.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

Przekazaliśmy funkcję komunikatu jako parametr do React.createElement() zamiast jako element. kiedy przekazujemy funkcję jako parametr do React.createElement(), React Reconciler wywoła tę funkcję z przekazanym przez nas parametrem. Kiedy uzgadniacz napotka element hosta, pozwala rendererowi zająć się jego zamontowaniem.

Komponenty hosta to specyficzne dla platformy komponenty należące do środowiska hosta (takie jak przeglądarki lub urządzenia mobilne). W przypadku hosta DOM mogą to być elementy HTML takie jak div czy img .

W naszym przypadku wystąpią dwa wywołania funkcji, wiadomość („Hello World!!”) i wiadomość („GoodBye World!!”) i obie funkcje zwrócą:

<div className=”msg”> Witaj świecie!! </div>

<div className=”msg”>Do widzenia, świecie!! </div>

Podobnie jak użycie JSX do uczynienia kodu bardziej czytelnym niż użycie surowego React API, użycie JSX do niestandardowych komponentów (funkcji JavaScript) sprawia, że nasz kod jest czystszy i bardziej czytelny. Pamiętaj, że to Babel jest odpowiedzialny za pobranie naszego JSX i transponowanie go do React API, więc musimy skonfigurować Babel w taki sposób, aby przekazywał funkcję przez swoją nazwę, a nie ciąg znaków.

Aby użyć niestandardowego komponentu jako znacznika JSX, musimy napisać wielką literę w nazwie funkcji, aby Babel rozpoznał go jako niestandardowy komponent. To wygląda tak:

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

Hurra!! stworzyliśmy nasz pierwszy komponent React

Wniosek:

Tak działa React za kulisami. Pamiętaj, że jest to tylko podstawowy artykuł, który wyjaśnia, jak wszystko działa pod maską, a istnieje wiele innych koncepcji, takich jak stan, wirtualny model DOM, pojednanie itp., które sprawiają, że React jest potężny i wydajny.