React

import React from 'react';

A JavaScript library
for building user interfaces

- Facebook

• Skapat av Facebook för att skapa snabba gränssnitt
• Enbart VIEW, bryr sig bara om grässnittet.
• Inte mycket inbyggt: litet men kraftfullt API

Mycket är REN JS, inga konstiga abstraktioner

Vi får heller inte så mycket gratis

Virtual DOM

DOM-uppdateringar är långsamma och kostsamma

React har en avancerad algoritm som istället bestämmer om och vad som ska uppdateras

Mindre och färre uppdatering, snabbare gränssnitt.

React Components

React byggs upp av komponenter som antingen är ES6-classes eller funktioner

class App extends React.Component{
  render(){
    return(
      <div>
        <h1>Hej!</h1>
      </div>
    );
  }
}

render(){
  return(
    <div>
      <h1>Hej!</h1> //JSX!
    </div>
  );
}

Metod som returnerar HTML?

NEJ! JSX: JavaScript förklätt till HTML

Viktigt

Funktioner som måste returnera något

Components must return a single root element.

Stor bokstav på Komponenter

JSX

return(
    <div>
    </div>
);

Vad som egentligen händer

React.createElement(
  'div',  //type of element
  null    //no children :( so alone
);

Funktion som returnerar HTML

Kodexempel