React Tips, Tricks & Nieuws!

Vandaag ga ik het hebben over wat tips, tricks en nieuws over React. Ik ga het hebben over wat manieren om een React project te starten (Create React App, Next.js en Gatsby), over hoe onmisbaar React Dev Tools zijn voor de huidige React ontwikkelaar en we behandelen kort de nieuwste versie React v17.0 en de grootste verandering die dat met zich mee brengt.
updated: Sep 18, 2020 at 7:04PM | published: Sep 18, 2020

In eerdere artikelen hebben ik en mijn collega’s het al vaker gehad over React en dat het onze favoriete JavaScript bibliotheek/framework is. In onze eerdere artikelen hebben we al verteld wat React is en waar het vandaan komt en wat de beste manier is om een project op te starten.

Zoals de naam van het artikel al aangeeft ga ik het vandaag hebben over wat Tips, Tricks en Nieuws uit de React wereld. Ik heb voor elk van de 3 een klein onderwerp gekozen dat te maken heeft met React.

React Tricks – Hoe start ik een React project

Wat is de beste manier om een react project te starten? Er zijn een aantal manieren om een nieuw project te beginnen waarvan de makkelijkste het toevoegen van React als script tags is. Dit is vooral makkelijk als je React wil gebruiken voor een of 2 kleine dingen op je website of als je je nog niet comfortabel voelt om een toolchain te gebruiken.

HTML

<script src=”https://unpkg.com/react@16/umd/react.development.js” crossorigin></script>
<script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js” crossorigin></script>

Maar als je een wat groter project in React wil programeren dan krijg je al snel met de volgende dingen te maken

  • je wilt schalen naar meerdere bestanden en componenten
  • je wilt 3rd-party bibliotheken gebruiken van npm (bvb styled-components/ react-router)
  • je wilt beginners fouten zo snel mogelijk zien ipv bij het testen
  • je wilt je JS en CSS live kunnen editen
  • je wilt je project optimaliseren voor productie

Zodra je met deze zaken te maken krijgt is het verstandig om te gaan denken aan een toolchain. Afhankelijk van wat voor project je wil gaan maken zijn er verschillende toolchains beschikbaar.

Create React App

Als je react aan het leren bent of als je een single-page app wil maken dan kan je het beste Create React App gebruiken. Met Create React App creeer je geen databases of backend je creeert alleen een frontend build die je met elke backend kan gebruiken. Je start heel eenvoudig een nieuw project met de volgende commands

BASH

$ npx create-react-app ‘Naam van je project’

$ cd “Naam van je project”

$ npm start

Wist je dat
npx op de eerste regel is geen typfout npx is een package tool dat bij npm 5.2+ zit.

Gatsby

Wil je een statische website maken met React dan is Gatsby je vriend. Je start heel makkelijk een nieuw project door globaal de Gatsby client te instaleren en dan een nieuw project te starten hier als voorbeeld gebruik we een standaard hello world template van github. Als je de url weg laat dan genereert Gatsby automatisch een project op basis van het default template.

BASH

$ npm install -g gatsby-cli

$ gatsby new “naam van je project” https://github.com/gatsbyjs/gatsby-starter-hello-world

$ cd “Naam van je project”

$ gatsby develop

Gatsby maakt gebruik van een structuur waar je heel simpel nieuwe pagina’s kan aanmaken door een nieuw .js file aan te maken. Zo kan je razendsnel websites bouwen. Verder luistert gatsby automatisch naar je project dus zodra je wat aanpast en op save drukt dan reload hij automatisch. Ook zit er automatisch al een router in zodat je heel eenvoudig links naar verschillende pagina’s kan maken.

 Next.js

Ga je een server-rendered website bouwen met Node.js probeer dan eens Next.js. Het voordeel van server side rendering dit zorgt ervoor dat je applicatie geoptimaliseerd is voor zoekmachines. Dat is een van de grote voordelen van Next.js ook zit er standaard een Head component in waar je super simpel dynamische meta tags kan toevoegen. Je start heel eenvoudig een nieuw Next.js project met de volgende commands

BASH

$ npx create-next-app ‘naam van je project’ –use-npm –example “https://github.com/vercel/next-learn-starter/tree/master/learn-starter”

$ cd “Naam van je project”

$ npm run dev

Zoals je op het plaatje kan zien heeft Next.js ook de pages structuur net als Gatsby. Next.js geeft je ook de mogelijkheid om je configuraties te aan te passen door middel van een next-config.js file zo kan je heel snel bijvoorbeeld sass support toevoegen aan je Next.js applicatie.

React Nieuws – React v17.0 Release Candidate

10 augustus is de eerste release kandidaat van React v17.0 gelanceerd. De laatste major release is inmiddels al weer 2 en een half jaar geleden dus dat is best wel behoorlijk nieuws. In deze release zitten geen nieuwe features voor ontwikkelaars maar is erop gericht zodat ontwikkelaars in de toekomst react beter kunnnn upgraden.

Bij vroegere releases van React wat het zo dat je of je hele applicatie moest upgraden of je blijft bij de vorige versie er was geen middenweg. Ook goed om te weten is dat er geen deprecated methods verwijderd worden. React 17.0 zijn hoofdpunt is dat voor volgende releases mogelijk maakt dat je je applicate geleidelijk update. Voor de meeste applicaties is het nog steeds het makkelijkst om hem in een keer te upgraden maar voor grotere applicaties die niet actief ondersteund worden kan het een uitkomst bieden. Je kan bijvoorbeeld het grootste deel van je code upgraden naar 18 en een deel van de functionaliteit van 17 behouden.

Het grootste verschil in React 17.0 is hoe React events afhandeld. In React components schrijf je een event handler gebruikelijk inline

JS

<button onClick={handleMyClick}>

tervwijl het vanilla DOM equivalent van die code het volgende is

JS

myButton.addEventListener(‘click’, handleMyClick);

Voor de meeste events zet React de event niet op de DOM nodes maar zet hij een handler per event type direct op de root van het document. Dit noemen ze event delegation. Dit deed React al sinds het begin wanneer een DOM event getriggered werd op het document zocht React uit om welk component het ging en dan ging het React event door je componenten heen. Maar achter de schermen was het native event al naar het document level gegaan waar React zijn event handlers installeerd.

Dit is een probleem voor React 17.0 als alle events aan de top geregistreerd worden zal e.stopPropagation() breken. Bvb als een genestelde boom event propagation had gestopt dan zou de buitenste boom het nog steeds ontvangen. Daarom zal in React 17.0 event handlers niet meer op het document level toegevoegd worden maar op de root van je DOM container waar je React boom op is gerendered.

Dankzij dit is het veiliger om een React tree gemanaged door een versie te embedden in een React tree gemanaged door een andere versie.

React Tips – React Dev Tools

Wat voor project je ook gaat maken, welke toolchain je ook gebruikt of wat voor versie van React je ook gebruikt, er is een ding wat zeker is. Je hebt iets nodig om te kijken hoe je states en props zich gedragen door je componenten heen. Een React project kan al snel vrij groot en complex worden dan is het handig als je met testen iets hebt waar je kan zien hoe je props en states zich in een test omgeving gedragen.

Hiervoor is de Google Chrome extension React Dev Tools uitermate geschikt. Deze zorgt ervoor dat als je op je pagina bent van je React Applicatie dat je precies kan zien wat alle waardes zijn van je props en states. Zo kan je precies het gedrag van je applicatie monitoren zeker als je applicatie wat groter wordt is dit onmisbaar.

Fun Fact
bedrijven als Airbnb & Netflix gebruiken ook React met React dev tools kan je zien wat er op hun sites gebeurt misschien leer je er wat van.

Ik hoop dat je weer helemaal op de hoogte bent van React met dit artikel. Heb jij nou een project waar je denkt React voor nodig te hebben neem dan contact met ons op en dan kijken we wat de mogelijkheden zijn.


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!