IMG_3274
>

Dette lærte jeg på heldags-workshop i ReactJS, i New York

Teddy Falsen Hiis 
1. mai 2018

Jetlag “riktig” vei sier de - hm, jeg er ikke helt sikker. Etter å ha lykkes i å holde meg våken på flyet, var jeg endelig i seng på hotellet ved midnatt, men våknet så klart i 3-4 tiden. Da var det jo morgen i Oslo. Ja ja, jeg er hvertfall våken og klar for syv timer workshop i ReactJS for nybegynnere.

Workshopen har tittel "An introduction to ReactJS" og alle kursnotater samt kode ligger her (github). Wes Bos er foredragsholder og eier av materialet. Som en del av Generate konferansen tar vi, med denne kursdagen, sikte på å forstå alle grunnleggende prinsipper med ReactJS. I løpet av dagen arbeidet vi løpende med å bygge en applikasjon som berører de viktigste delene av ReactJS:

  • Opprette komponenter og skrive HTML med JSX
  • Routing med React Router
  • Forstå State og datalagring
  • Sende data mellom komponenter med Props
  • Hente data fra et Ajax sluttpunkt
  • Håndtere vedvarende data med LocalStorage
  • Jobbe med Events i React
  • Arbeide med Forms, hente data fra DOM inputs
  • Stateless Functional Components
  • React deployment

Oppsummert følger lærdommer jeg mener er nyttig å få med seg dersom man er helt ny i ReactJS.


Å forholde seg til DOM’en

Et slags mantra i React er: dont touch the DOM. La React gjøre dette for deg til den grad det er mulig. Du sier hvor og hva den skal rendre - that’s it.


Bruk React dev tools

Når man inspecter dataen med React dev tools vil du i Chrome kunne se hvordan react appen din faktisk er skrevet, til forskjell for hvordan den lastes.


Hva er komponenter?

Komponenter er lego-brikker i applikasjonen din. Det kan eksempelvis være en header, et søk eller en liste av resultater som alle bor sin egen .js fil. Fordi vi ikke kan kjøre alt innholdet på en gang, skriver vi i stede mange små komponenter så lastes på forespørsel. Vi lager gjenbrukbare altså brikker som vi kan hentes frem hvor som helst på applikasjonen. Best practice er å navngi komponenter med stor bokstav. Ettersom det ikke finnes noe globalt scope i ES6 må man importere react inn i alle komponenter man skriver, dette så de kan være selvgående for uavhengig bruk.


En helt basic react component kan se sånn her ut:

import React from 'react';

class Header extends React.Component {

  render(){ //what will this component put on the page

    return <h1>Beer Me</h1>

  }

}

export default Header; // now the component can be used by any other component that asks for it/imports it

React + CSS

Når det gjelder oppsett fro CSS kan det være lurt å la webpack håndtere dette for deg, og på denne måten skrive CSS som er direkte scopet til en spesifikk komponent. Da har du en måte å lage CSS og importert direkte til den komponenten og du slipper du å ha mange, lange klassenavn.


Say Hello to JSX

Hvis du kan HTML, kan du JSX. Babel og webpack konverterer nemlig JSX (denne lignende syntaksen) til HTML. Noen huskeregler med JSX er:

- Alle elementer må være selv-closed, på samme måte som kun noen i HTML er dette (eks. <br />).

- Det er kun ett element som kan returneres. Med dette menes at dersom jeg vil returnere en <h1> og en <p> måtte jeg tidligere wrappe disse to inni en felles div, men dette skaper problemer for eksempelvis CSS og flexbox. I stedet kan du nå bruke <React.Fragment> Dette er et ghost-element som ikke viser noe som helst på siden. I neste Babel 7 kan man få bruke <> i stede for <React.Fragment>

<React.Fragment>

<h1>hei</h1>

<p>Hei igjen</p>

</React.Fragment>

Kommentarer

For å skrive kommentarer må du bruke syntaksen for JS kommentarer. Når du er inni en return er du i JSX, men når du er utenfor kan du først bruke {/* this is a comment */} dersom du har en kommentar over din return for å unngå error. Du må ha altså legge kommentarer inni elementet du returnerer.

Klassenavn

JSX brukes className i stede for class: eksempelvis må <p class=“hei”> skrives som <p className=“hei"> i stede. Tips: bruk Emmet for å holde styr på om du bruker JSX eller ikke. Emmet er generelt noe man burde bruke litt tid på å lære seg hvis man skal lære seg React.


Passing Props

To fundamentale konsepter man må rett og slett bare må lære seg når det gjelder ReactJS er props og state. Dette handler om hvordan data bor og flyter inni applikasjonen. Noen ganger må man vise frem data inni en annen komponent enn den bor i. Ettersom det jo ikke finnes noe globalt scope bruker vi props til dette.


Props fungerer som attributer som gir ekstra info til en element. Eksempelvis må jo en tradisjonell <img> ha src for å i det hele tatt ha noe funksjon. Dette er props. Du kan i teorien sende inn alle typer data (string, funksjon, bool etc) men alt annet enn stringer må ha med curly brackets. Når de først er passert, kan de brukes i hvilken som helst komponent i stede for å eksevmepvis hardkode inn et siteName:


return <h1>{this.props.siteName}</h1>


Men, hvordan vet man hvilken prop som brukes? Da kan du spesifisere det du håper at blir passed til en prop. Eks siteName burde ha en propType fordi da kan man sikre at folk legger inn en string, og får advarsel hvis man for eksempel bruker en bool i stede.


static propTypes = {

    siteName: PropTypes.string.isRequred

  }


Eksempler på typer av Props:

array

bool

func

String

Number

instance

shape -> “pass me an object that looks like this” eks.

beer: PropTypes.shape({

name: PropTypes.string,

desc: PropTypes.string,

adv: PropTypes.string,

})

Routing med React Router

React har ingen router innebygget. Fokus er templating og data management så vi bruker en pakke som heter react router. NextJS er også nesten det samme men har også server-side rendering og webpack bygget inn i seg.


Say hello to State

State er altså andre viktigste punkt når man skal bli kjent med ReactJS. All data som er relatert til applikasjonen holdes i State, i en komponent. Når noe i state endres oppdateres DOMen. Alle steder i en applikasjon som bruker samme state blir da oppdatert. La oss si at vi bruker state for å holde telling på hvor mange ganger brukeren trykker på en knapp. Vi må begynne med å sette initial state i Main.js, eksempelvis:


class Main extends React.Component {

  state = {

    numBeers: 10

  }

  render(){

    return(

      <div className="wrapper">

        <Header siteName="Beer Me!"/>

        <button>{this.state.numBeers}</button>

      </div>

    )

  }

}


export default Main;

Hva med page load?

Page load i react er annerledes fordi man har lifecycle methods som tillater oss å gå inn i en lifecycle av en komponent. Så man må på en måte kun loade en komponent når den brukes, ikke en hel side hvis ikke alle elementer trenger å loades på det gitte tidspunktet. Eksempelvis på ‘life-cycle hooks’ er når en komponent skal brukes eller når en komponent skal tas av en side:


componentDidMount() {

  // componentDidMount kjører rett etterpå denne komponenten er satt inn på siden

   this.loadBeers();

  }

Og hva med eksterne lenker?

Dersom man eksempelvis skal lenke ut til en ny side kan man ikke bruke en vanlig anchor-link fordi du vil jo ikke oppdatere hele siden. Da bruker man i stede pushState. Men, i de tilfellene man  faktisk vil bruke en anchorLink må man i stede bruke <Link> som kommer fra react-router-dom. Man bruker altså <Link to, i stede for <a href. Slug er her også et eksempel på en nyttig pakke som kan brukes for å gjøre url’ene mer lesbare:


return (

      <div className="beer">

        <Link to={`/beer/${id}/${slug(name)}`}>

          <h2>{name}</h2>

          <img src={image} alt={name} />

        </Link>

      </div>

    )

Sikre data states med Redux

Applikasjonen kan ‘breake’ hvis dataen ikke er på plass i riktig state. Derfor kan det være en ide å tenke over hvor dataen bor, evt om man ønsker å bruke verktøy som for eksempel Redux eller React Context API i stede for å sende data “nedover” i applikasjonen. Med Redux flytter du rett og slett ut av komponenten og i stede indekserer data med hjelp av props, på det nivået dataen skal brukes.

Temaer