Getting Started

Suggest Edits

Prerequisites

  • Node.js v16.13.0
  • recommended OS: Linux or Mac

Installation

Disclaimer: The following steps assume that you will keep the upstream to the base repository for continuous updates. If you don't want that, you can skip some steps and simply clone the repository and override the default remote origin with your own.

  • Clone this repository using the --origin <name> flag to set a remote name other than origin (for example upstream)
  • Configure your own origin remote using git remote add origin <your repository url>
  • Initial push of stable branch to your own remote: git push origin stable
  • Configure default remote to be your own remote: git branch --set-upstream-to origin/stable
  • Install dependencies: npm ci
  • Configure your individual .env file in the root directory (see .env.example)

Link collection

The following collection of links is there to help you on your learning path to understand the base technologies our storefront is built on. It's by no means necessary to work through all the material, but could be helpful to gather a deep understanding of all parts and code structures.

Starting from JavaScript basics up to more complex structures of JavaScript furthermore the framework basics of React and its more advanced concepts used in the Storefront.

Happy learning!

JavaScript Basics

For a basic introduction into JS we recommend the book “Eloquent JavaScript” which you can find for free here: https://eloquentjavascript.net/

How to deal with common data structures like arrays and objects is bread and butter in every project:
Array Utilities: https://javascript.info/array-methods
Object Utilities: https://javascript.info/keys-values-entries

Furthermore, the YouTube channel "FunFunFunction" is highly recommended, which delivers awesome videos especially regarding functional programming paradigms
https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q

React

If you want to get more specific about React, the following links are helpful:

Destructuring in JavaScript
In general: https://wesbos.com/destructuring-objects
In React: https://www.carlrippon.com/writing-concise-react-components-with-destructure-assignment-and-spread/

React in general
The following is a very good introduction by Kent C. Dodds, which was published in its first version back in 2017, but has been steadily revised since. All in all only 2,5h, but Kent leads you from a UI written in native JavaScript to React and explains clearly why exactly you should use React at all and what benefits it brings you. After that, basic concepts are explained with clear examples to code along.
https://egghead.io/lessons/react-a-beginners-guide-to-react-introduction

React Context API
https://www.taniarascia.com/using-context-api-in-react/

React Hooks
https://www.freecodecamp.org/news/react-hooks-in-5-minutes/

Updated over 1 year ago