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.
-
De basis boilerplate met React, Webpack, react-router and Jest.
-
Master met redux, redux-saga and redux-form.
-
Redux met Server Side Rendering
-
-
- 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
$ npm install
of
$ yarn install
$ 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 voorredux-ssr)
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.
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:
- https://redux.js.org/basics/usage-with-react
- https://www.valentinog.com/blog/redux/
- https://www.udemy.com/react-2nd-edition/ (cursus)
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:
- https://redux-saga.js.org/docs/basics/UsingSagaHelpers.html
- https://blog.logrocket.com/understanding-redux-saga-from-action-creators-to-sagas-2587298b5e71
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:
- https://github.com/styled-components/styled-components
- https://medium.com/styled-components/how-styled-components-works-618a69970421
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: