Skip to main content

Prerequisites

For the development of the frontend application we will use the React.js library and we will work in the TypeScript language. Typescript is a scripting language, a more typed dialect of JavaScript. We recommend using TypesScript instead of JavaScript for several reasons:

  • Prevents many errors at runtime if data types are used incorrectly like in a weakly typed context.
  • It is easier to modify and maintain the code since data dependencies can be known where a certain type of data is used.
  • Data types also serve as documentation for those who will use the code.

If you are not familiar with JavaScript/TypeScript go through the introduction to TypeScript.

Tools

Before starting the actual development, you will need to prepare the following:

  • Install an LTS version of Node.Js (version 18)
  • Install an IDE for web applications: VSCode or WebStorm, for VSCode you need to install plugins for HTML, JavaScript/Typescript, React.js and Node.Js, with WebStorm these are already included.

πŸ“„οΈ Introduction to TypeScript

We will give a brief introduction to the TypeScript language to develop front-end applications. The way of working with Typescript is much the same as with JavaScript but it benefits from the fact that the syntax is constrained by the declared data types. The existence of data types, even if in this case they are only checked at the transpiling stage where the TypeScript code is transformed into normal JavaScript code, helps developers to avoid common mistakes in poorly typed languages. We will go through the specific syntax of TypeScript, for those familiar with C-like and object-oriented languages ​​the syntax is easy to learn but differs in the way of use compared to these languages.

πŸ“„οΈ State management

In this section we will go into detail about managing application state using hook and Redux Toolkit functions. The reason application state management is needed is that certain components in different locations of the application need to share the same data. One possibility to propagate data to multiple components is for a parent component to pass data to its descendants via child-to-child properties, but this approach can clutter components and lead to hard-to-maintain code. The best alternative is to make data shared by different components available through a global state accessible via hook functions.