Skip to content
This repository has been archived by the owner on Nov 15, 2022. It is now read-only.

Latest commit

 

History

History
122 lines (91 loc) · 5.56 KB

README.md

File metadata and controls

122 lines (91 loc) · 5.56 KB
Raw

arclogo

4Net React Boilerplate is het standaard boilerplate pakket die als basis dient voor de react projecten van 4Net Interactive. Het pakket ondersteund redux, serverside rendering en bevat een custom module met de 4Net React elementen.

De boilerplate is gebasseerd op het Atomic Design principe en is in grote lijnen een kloon van deze boilerplate.

Branches

Setup

1. Basis installatie

  • Download Node.js.
https://nodejs.org/en/download/
  • Download Yarn of NPM.
https://yarnpkg.com/en/
https://www.npmjs.com/get-npm
  • Maak een nieuwe folder aan om de boilerplate in te zetten.
  • Kloon de 4Net React boilerplate:.
$ git clone -b master https://github.com/4netinteractive/arc .
  • Kies een branch die geschikt is voor het project wat je gaat bouwen.
$ git checkout redux 
of
$ git checkout redux-ssr

2. Installeer de benodigheden

$ npm install
of
$ yarn install

3. Start de applicatie

$ npm run dev
of
$ yarn dev

Je applicatie draait nu op http://localhost:3000

De development server start met de Hot Module Replacement. (HMR, hierdoor kan je aanpassingen maken in je code en rendert je view opnieuw wanneer je een aanpassing maakt.)

http://localhost:3000 — Development server
http://localhost:3001 — Webpack assets server (alleen voor redux-ssr)

Informatie

1. Atomic Design (folder structuur)

De standaard voor de folderstructuur die aangehouden wordt is volgens de 'Atomic Design' methode. Volgens deze methode worden componentrn onderverdeeld in mappen op basis van de grootte van het component. De volgende mappen zijn de basis voor het project:

  • Pages
  • Templates
  • Organisms
  • Molecules
  • Atoms

De 'Page' map bevat het grootste component, en de 'Atom' folder bevat de meest kleine componenten zoals buttons, of inputfields. Meer uitleg over de 'Atomic Design' methode kan je hier vinden.

2. Redux

Redux is een container waarin je de 'state' van componenten in kan bewaren en globaal kan aanroepen. De 'state' word bijgehouden in een zogenaamde store, die je kan manipuleren dmv actions, reducers, selectors en saga's. De actions worden gekoppeld aan Higher Order Components (zie 5.) genaamd 'Containers'. Deze containers zijn gekoppeld aan pages zodat je verschillende 'actions' en states kan aanroepen per pagina.

Voor meer informatie over Redux zijn de volgende links handig:

3. API Calls

De API calls worden gemaakt door middel van een 'action' te dispatchen. Door deze 'action' word er een saga aangeroepen waarin calls naar een API gebeuren. Alle API/externe calls worden in de boilerplate via een 'saga' uitgevoerd. Saga's zijn middelware functies waardoor je naast veranderingen in de store ook losstaande functies kan aanroepen. (Die eventueel ook weer een action kunnen aanroepen.)

Voor meer informatie over 'Saga's' en 'Actions' zijn de volgende links handig:

4. Styled Components

Styled Components is een module om je componenten te stylen dmv css in je react code. Daarnaast bied het de mogelijkheid om 'props' (variabelen die doorgegeven worden aan componenten) te gebruiken in je css zodat je dynamisch de styling van je componenten kan veranderen.

Voor meer informatie over Styled Components zijn de volgende links handig:

5. Higher Order Components

In de boilerplate maken we gebruiken van 'Containers'. Dit zijn Higher Order Components. Deze componenten zorgen voor een koppeling tussen de store/actions en pagina's. Door middel van deze techniek kan er per pagina meerdere states gekoppeld worden en kan er gespecificeerd worden welke acties bereikbaar zijn op de pagina.

Voor meer informatie over Higher Order Components is de volgende link handig: