Skip to content

Things you need to know in our Frontend (a.k.a Farewell gift from Kyubin)

Kyubin Han edited this page Mar 26, 2021 · 18 revisions

React Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. I recommend watching this youtube tutorials to learn the basics. If you prefer reading, the React official website has well-written documentation for Hooks.

TypeScript

Start learning all about TypeScript here. (I know it's overwhelmingly huge but it's worth reading if you want to really learn the language.) Also, check out its Utility Types, some of them are being used in our application such as ReturnType<Type> and Partial<Type>.

Redux

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur.

Not familiar with Redux? check out their official website here.

Redux Toolkit

Redux Toolkit is suggested as best practice, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications. This is the core library that we use in our application to handle all the Redux stuff. In fact, our code structure was based on this tutorial.

React Router

Recommend to read their documentation starting from here.

Code Splitting (Future work)

Authentication with Keycloak

Fetching keycloak-js

Material UI

Working with props and theme

Styled components from Material UI

Storybook

Tests

Cypress & Coverage

Jest

Graph Plotly.js

Map with Openlayers

Clone this wiki locally