ReactJS to biblioteka, która służy do tworzenia interfejsów użytkownika z obsługą JavaScript. Powstała z rąk Jordana Walke, który był programistą Facebooka. React został opracowany na Facebooku w celach wewnętrznych, jednak z czasem inżynierowie świadomi jego potencjału postanowili podzielić się swoim projektem ze światem i tak jest on obecnie otwartym źródłem. Pierwsze publiczne wydanie ukazało się w 2013 roku. Zostało udostępnione na standardowej licencji Apache 2.0. Początkowo React umożliwia programowanie dużych aplikacji sieciowych, które są w stanie wykorzystywać dane bez ponownego przeładowania strony nawet gdy dane ulegną zmianom. Zmierza to do tego by framework ten spełniał się jako narzędzie szybkie, proste i w pełni skalowalne. Wielu programistów uważa, że jest to narzędzie jednocześnie lekkie i bardzo potężne. Ciekawą funkcją dla programistów może okazać się, że React zamiast zwykłego podejścia do pisania interfejsów użytkownika, traktuje każdy element UI jako maszynę zawierającą stan. React przede wszystkim pomaga budować szybkie interfejsy użytkownika, które mogą obsługiwać złożone interakcje. Warto wspomnieć, że nie używa on szablonów tak jak tradycyjne interfejsy aplikacji internetowych w zamian tego React używa w pełni funkcjonalnego języka programowania do renderowania widoków. Również jedną z cech, która wyróżnia go od innych jest to, że posiada wirtualny DOM. Oznacza to, że przechowuje cały DOM w pamięci aplikacji a po zmianie stanu wyszukuje wszystkie różnice w wirtualnym i rzeczywistym DOMie oraz aktualizuje ewentualne zmiany. React dzięki wirtualnemu rozwiązaniu minimalizuje ilość manipulacji DOM. Ta funkcja pozwala także na wbudowane renderowanie po stronie serwera za pomocą Node.js, co umożliwia łatwe udostępnianie stron internetowych przyjaznych dla SEO.
Kolejną cechą Reacta jest to, że używa specjalnej składni o nazwie JSX, która pozwala na łączenie HTML z JavaScript. Oznacza to, że jego komponenty są zwykle zapisywane w JSX (rozszerzenie / nakładka na JavaScript) dzięki czemu możliwe jest cytowanie HTML oraz używanie składni tagu HTML do renderowania podkomponentów. Wspomniane komponenty to nic innego jak obiekty JavaScript będące odzwierciedleniem węzła w strukturze DOM. Natomiast React dostarczając zestaw bazowych komponentów pod React.DOM, analizuje również wszystkie zmiany w ich strukturze i ostatecznie generuje minimalną liczbę operacji na strukturze DOM. Warto zauważyć, że w tym frameworku przepływ informacji kieruje się w jednym kierunku czyli ma tendencję do jednokierunkowego reagowania. Architektura Reacta ma zastosowanie poza renderowaniem HTM w przeglądarce.
React obecnie używany jest na wielu znanych stronach, między innymi możemy wymienić: Facebook, Instagram, PayPal, Walmart, Netflix, Imgur czy Gamepedia. Ciekawostką jest, że React znalazł się na piątym miejscu w najpopularniejszych projektach na GitHub zgodnie ze statystykami ze stycznia 2017.
Przykładowy kod w ReactJS
ReactJS Przykład #1
/** greeter.js */
import React from 'react';
export default class Greeter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>Hello {this.props.name} !</div>
)
}
}
Greeter.propTypes = {
name: React.PropTypes.string
}
/** app.js */
import React from 'react';
import ReactDOM from 'react-dom';
import Greeter from './greeter';
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Greeter name="Bob" />
</div>
)
}
}
/** Render main app component into DOM */
ReactDOM.render( <App/>, document.getElementById('app') );
/** index.html */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<div id="app"></div>
<script src="dist/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>