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 väldigt lite på köpet, enbart ett sätt att enkelt hantera View

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>
    );
  }
}

Komponenter kan också vara funktioner

function App() {
  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

React bygger på Komponenter

Varje komponent är i princip en funktion som returnerar andra funktioner

Props

Props kan ses som argument till komponenter

Props är immutable, de får inte ändras av komponenten

Props ska enbart skickas ned

function Header(props){
  return <h1> { props.name } </h1>;
}

function App(){
  return <Header name="Jesper" />
}

Om komponenten är en class så lagras props i this.props

class Header extends Component {
  render(){
    return <h1> {this.props.name } </h1>;
  }
}

Du kan skicka ner hur många props du vill

På samma sätt som du kan skicka med hur många argument du vill till en funktion