ReactJS – Wprowadzenie

ReactJS jak już pewnie się domyślacie jest kolejną biblioteką JavaScript. Została opracowana przez twórców Facebooka i tam także użyta po raz pierwszy. React przede wszystkim przyspiesza działanie aplikacji, ma budowę modułową dzięki czemu możemy tworzyć moduły wielokrotnego użytku, jest bardzo elastyczny pozwalając na tworzenie ciekawych i innowacyjnych projektów i najważniejsze jest coraz bardziej popularny i wymagany przez rekruterów.

JSX jest rozszerzeniem JavaScript i został stworzony do użycia w połączeniu z ReactJS. Wyglądem przypomina zaś HTML. Przeglądarki nie mogą poprawnie odczytać kodu JSX.  Jeśli plik JavaSCript zawiera kod JSX plik musi zostać skompilowany. Oznacza to, że zanim plik dojdzie do przeglądarki internetowej, kompilator JSX przetłumaczy JSX na zwykły skrypt JavaScript.

Elementy JSX są traktowane jako wyrażenia JavaScript.  Oznacza to, że element JSX może być zapisany w zmiennej, przekazany do funkcji przechowywanej w obiekcie lub tablicy. Oto przykład elementu JSX zapisanego w zmiennej:

const navBar = <nav>I am a nav bar</nav>;

Oto przykład kilku elementów JSX przechowywanych w obiekcie:

const myTeam = {  
center: <li>Benzo Walli</li>,  
powerForward: <li>Rasha Loa</li>,  
smallForward: <li>Tayshaun Dasmoto</li>,  
shootingGuard: <li>Colmar Cumberbatch</li>,  
pointGuard: <li>Femi Billon</li> 
};

Elementy JSX mogą mieć atrybuty, podobnie jak elementy HTML. Atrybut JSX jest zapisywany przy użyciu składni HTML-podobnej: nazwa, po której następuje znak równości, a następnie wartość. Wartość powinna być zawinięta w cudzysłowie, tak jak poniżej:

my-attribute-name = "mój-atrybut-wartość"

Przykłady

<a href="http://www.example.com">Welcome to the Web</a>;
 const title = <h1 id="title">Introduction to React.js: Part I</h1>;

const panda = <img src="images/panda.jpg" alt="panda" width="500px" height="500px" />;

Możesz ukryć elementy JSX wewnątrz innych elementów JSX, podobnie jak w HTML. Oto przykład elementu JSX <h1>, zagnieżdżonego wewnątrz elementu JSX <a>:

<a href="https://www.example.com"><h1>Click me!</h1></a>

Aby było to bardziej czytelne, można użyć przerw w wierszu w formacie HTML i wcięcia. Jeśli wyrażenie JSX zajmuje więcej niż jedną linię, należy zapisać wyrażenie JSX w nawiasach. To wygląda dziwnie na początku, ale przyzwyczaisz się do tego:

(  
<a href="https://www.example.com">  
<h1>  Click me!  </h1>  
</a> 
)

Zagnieżdżone wyrażenia JSX mogą być zapisywane jako zmienne, przekazywane do funkcji itd., Podobnie jak nie zagnieżdżone wyrażenia JSX! Oto przykład zagnieżdżonej wyrażenia JSX zapisywanej jako zmienna:

const theExample = (  
<a href="https://www.example.com">  
<h1>  Click me!  </h1>  
</a>  
);

Jest zasada, której nie wspominaliśmy: wyrażenie JSX musi mieć dokładnie jeden element najbardziej zewnętrzny. Innymi słowy, ten kod będzie działał:

const paragraphs = ( 

 <div id="i-am-the-outermost-element"> 

 <p>I am a paragraph.</p> 

 <p>I, too, am a paragraph.</p> 

 </div> 

);

Natomiast ten już nie:

const paragraphs = ( 

<p>I am a paragraph.</p> 

<p>I, too, am a paragraph.</p> 

);

Pierwszy tag otwierający i końcowy tag zamykający wyrażenie JSX muszą należeć do tego samego elementu JSX! Łatwo o tym zapomnieć i może to skończyć się błędami, które są trudne do zdiagnozowania. Jeśli zauważysz, że wyrażenie JSX zawiera wiele elementów zewnętrznych, rozwiązanie jest zwykle proste: zawrzyj wyrażenie JSX w <div> </ div>.

Pora wyeksportować wyrażenie JSX:

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

// Copy code here:
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

ReactDOM jest nazwą biblioteki JavaScript. Ta biblioteka zawiera kilka metod specyficznych dla React, które w jakikolwiek sposób dotyczą DOM. ReactDOM.render () jest najczęstszym sposobem renderowania JSX. Pobiera wyrażenie JSX, tworzy odpowiednie drzewo węzłów DOM i dodaje drzewo do DOM. To jest sposób na wyświetlenie wyrażenia JSX na ekranie. Pierwszym argumentem ReactDOM.render () powinien być wyrażenie JSX i zostanie on wyświetlony na ekranie. Drugi argument zawiera element, do którego ma zostać dopisane wyrażenie. 

document.getElementById ('aplikacja')

Element ten działał jako kontener dla pierwszego argumentu ReactDOM.render ()! Po zakończeniu poprzedniego ćwiczenia pojawiło się to na ekranie:

<main id="app">  
<h1>Render me!</h1> 
</main>

Pierwszym argumentem może być również zmienna, o ile zmienna ta zawiera wyrażenie JSX.

const toDoList = (  
<ol>  
<li>Learn React</li>  
<li>Become a Developer</li>  
</ol> 
);  

ReactDOM.render(  
toDoList,   
document.getElementById('app') 
);

Szczególną rzeczą dotyczącą ReactDOM.render () jest tylko aktualizacja elementów DOM, które uległy zmianie. Oznacza to, że jeśli dokładnie to samo zrobisz dwa razy z rzędu, drugi render nie zrobi nic. Aktualizacja niezbędnych elementów DOM stanowi dużą część tego, co sprawia, że ​​React jest tak skuteczny. React realizuje to dzięki temu, że jest to wirtualny DOM.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *