Úvod do Reactu

Web před Reactem

Na začátku roku 2010 byl front-end vývoj úplně jiný svět. Dominovaly tři technologie:

jQuery: Král DOM manipulace

jQuery přijalo realitu webu: strom DOM uzlů. "Stav" vaší aplikace fakticky žil v samotném DOM. Aktualizace UI znamenala:

• 1.Najít správný DOM uzel
• 2.Zmutovat ho
• 3.Doufat, že jste něco jinde nerozbili

// jQuery example - imperative DOM manipulation
$('#submit-btn').click(function() {
  var name = $('#name-input').val();
  if (name) {
    $('#greeting').text('Hello, ' + name + '!');
    $('#greeting').show();
    $('#name-input').val('');
  }
});

jQuery revolucionalizovalo kompatibilitu prohlížečů a ergonomii vývojářů... ale také vytvořilo svět sdíleného mutabilního stavu. Jak aplikace rostly, tento stav se stal nemožným sledovat. jQuery projekty se často zvrhly v nepředvídatelný "špagetový kód."

Backbone.js: Minimalismus a vzestup MVC

Backbone.js představil lehkou, JavaScript-přátelskou verzi MVC:

• •Modely uchovávaly stav aplikace
• •Pohledy se překreslily při změně modelu

// Backbone.js example
var UserModel = Backbone.Model.extend({
  defaults: {
    name: '',
    email: ''
  }
});

var UserView = Backbone.View.extend({
  render: function() {
    // Developer had to define their own rendering logic
    this.$el.html('<h1>' + this.model.get('name') + '</h1>');
    return this;
  }
});

S pouhými ~2 000 řádky kódu byl záměrně minimální a bez názoru. Tak bez názoru, že výchozí metoda render() v Backbone nic nedělala. Vývojáři museli definovat vlastní strategie vykreslování a šablon.

AngularJS: "Co kdyby HTML bylo mocnější?"

AngularJS zvolil opačný přístup. Byl to plně názorový framework se vším potřebným:

<!-- AngularJS example - two-way data binding -->
<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="name">
  <p>Hello, {{name}}!</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = 'World';
});
</script>

Bylo to neuvěřitelně mocné, zejména pro backend vývojáře, kteří najednou měli stavět frontendy. Ale největší vlastnost Angularu byla také jeho největší problém:

Společný problém: Mutace všude

Navzdory jejich rozdílům, téměř všechny frameworky té doby sdílely jednu charakteristiku:

Mutace činila složité aplikace obtížnějšími k pochopení a údržbě. Vývojáři potřebovali lepší mentální model. A přesně to React představil.

Průlom Reactu: UI jako čistá funkce stavu

Jednou z klíčových inovací Reactu byla myšlenka, že vaše UI je funkce vašeho stavu:

Místo manuální manipulace s DOM:

• 1.Aktualizujete stav
• 2.React vymyslí, jak by UI mělo vypadat

Komponenty: Funkcionální myšlení pro UI

React zabalil tuto myšlenku do architektury založené na komponentách. Komponenty:

// React component - declarative UI
function Greeting({ name }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

JSX: Nejnenáviděnější vlastnost, která se stala superschopností

React potřeboval způsob, jak popisovat UI uvnitř komponent. Logickou odpovědí bylo HTML — ale HTML nemohlo existovat přímo v JavaScriptu... dokud React nevynalezl JSX.

JSX spojil:

• •Expresivitu JavaScriptu
• •Čitelnost HTML

Ale React měl jinou interpretaci:

Jakmile vývojáři začali stavět skutečné aplikace s JSX, rychle si uvědomili jeho sílu.

React dnes: UI primitiv pro moderní frameworky

Od roku 2014 do 2020 byl React především používán pro jednostránkové aplikace s React Routerem. Ale moderní vývoj se vyvinul.

Dnes je React považován za UI primitiv uvnitř větších metaframeworků jako:

Tyto frameworky přidávají funkce jako server-side rendering, routování, streaming a bundling — zatímco React zůstává zaměřený na to, co dělá nejlépe:

Shrnutí

React uspěl, protože se odvážil zpochybnit status quo: