1. oktober slapp Dan Abramov og resten av React-teamet versjon 2.0 av det ekstremt populære byggverktøyet Create React App.

For selv om React ikke krever et eneste verktøy for å brukes, blir det fort komplisert når man skal bygge en moderne web-applikasjon.

Create React App sitt mantra er å gi deg en enkel måte å bygge prosjektet ditt, ved hjelp av en rekke moderne web-rammeverk, og helst uten et eneste behov for konfigurasjon. Med andre ord er Create React App et perfekt verktøy for nye React-applikasjoner, men også for å lære React – siden mye av knotet med oppsett forsvinner.

kode24 har snakket med fagleder Kristofer Selbekk hos konsulentselskapet Bekk, om hva som er nytt i Create React App 2, og om du bør prøve den nye utgave.

Kristofer blogger forøvrig ukentlig på kode24 om ukas React-nyheter, og bidrar selv til Create React App-prosjektets docs-sider.

Dette er nytt

Versjon 2 gir en masse spennende muligheter man ikke hadde tilgang til i første versjonen. Her er utvalg av de største nyhetene.

• Fragment-syntax: Babel, rammeverket som lar deg bruke moderne Javascript-funksjonalitet er oppgradert til 7.0 og gir støtte for React-fragment-syntax. Praktisk hvis man vil unngå å legge til flere noder enn nødvendig.

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

• SASS: Nå kan du bruke SASS i ditt «Create-React-App»-prosjekt. Før var det kun mulig å bruke CSS ut av boksen. Merk at du fortsatt må installere node-sass-modulen, og at Dan Abramov ikke nødvendigvis er enig i at du skal bruke det.
• PostCSS: PostCSS lar deg bruke nye css-attributter i gamle nettlesere.

/* Støtte sammlignings-operatorer i CSS */
@media (width < 480px) {}

@media (480px <= width < 768px) {}

@media (width >= 768px) {}

/* Reset alle properties i en selector */
a {
  all: initial;
}

• Import av SVG: I versjon 2.0 kan du faktisk importere SVG direkte og bruke dem som komponenter.

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

I tillegg inkluderer Create React App 2 (CRA-2) Webpack 4 som i følge utviklerne skal være 98% raskere enn forgjengeren.

- CRA-2 kommer med støtte for Webpack 4 og Babel 7, som igjen fører til en bedre utvikleropplevelse, raskere bygg som eliminerer mer død kode og nye features som JSX 2.0 og bedre kodesplitting. I tillegg får man støtte for CSS Modules og SASS ut av boksen, som har vært sårt etterspurte features for mange, forteller Kristofer.

Derfor lagde SOL ny app i React Native

fredag 14. september 2018

Vraker IE9 til IE11

Med nye versjoner kommer det alltid endringer som bryter gammelt oppsett. Noen ganger kan det føre til vanskelige oppgraderinger av eksisterende kode. Andre ganger kan det føre til at man må oppgradere software på maskinen sin for å få versjonen til å kjøre.

Create React App 2 varsler også enkelte «breaking changes», men Kristofer tror ikke det blir problemer.

- Det er svært få breaking changes i CRA-2, men noen er det jo. Eldre nettlesere som IE9 til IE11 er ikke lenger støttet ut av boksen, men krever en ekstra polyfill-pakke. Node 6-støtte er fjernet, og til slutt kan jeg nevne at måten man konfigurerer opp proxyer, altså videresending av requests til et spesifikt API under utvikling, har forandet seg, forklarer Kristofer.

Oppgradere fra versjon 1.x

Nå bør alle utviklere være fullstack

torsdag 4. oktober 2018

Oppgradering fra versjon 1.x tror ikke Kristofer skal by på mange problemer.

Men de som fortsatt vil bruke første versjon, trenger heller ikke bekymre seg.

- Oppgradering fra versjon 1 til 2 er forespeilet å være ganske smertefritt. Det er noen breaking changes her og der, men for de aller fleste vil det holde å oppgradere avhengigheten til «react-scripts» til ^2.0.0, forteller Kristofer.

- Når det er sagt så er det ingen krise om man ikke oppgraderer. Er man fornøyd med ytelsen og featurene man hadde, vil versjon 1.x fortsette å fungere i tiden fremover.

// Det holder å endre dependency i package.json  
// ... other dependencies ...
  "react-scripts": "2.0.3"

Arbeidsbesparende for alle

For utviklere som kanskje ikke har brukt React så mye, mener Kristofer at Create React App versjon 2 kan være veldig arbeidsbesparende. Men også erfarne utviklere kan dra nytt av prosjektet.

- Før man hadde Create React App, startet som regel enhver React-tutorial med en times lang introduksjon i hvordan man måtte sette opp Babel til å transformere JSX, Webpack for å bundle alt sammen, og hvordan man setter opp en utviklingsserver for å iterere raskt. Nå er det så enkelt som å kjøre en kommando, eller rett og slett bare åpne codesandbox.io, så er alt det som ikke er direkte relatert til React satt opp for deg, forklarer Kristofer.

- I virkelige prosjekter sparer Create React App deg for en god del oppstartskost, og i veldig mange tilfeller er det godt nok for det man trenger av Webpack og Babel.

ForrigeUke: Ny Parcel, Watermelon DB, jukselapper

tirsdag 2. oktober 2018