-
Notifications
You must be signed in to change notification settings - Fork 9
Things you need to know in our Frontend (a.k.a Farewell gift from Kyubin)
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 has many benefits over vanilla JavaScript such as optional static typing, early spotted bugs, predictability, readability, rich IDE support, fast refactoring and so on and so forth. Long live and prosper TypeScript! 🖖
Start learning all about TypeScript here. (I know this documentation is overwhelming 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>.
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 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 basically handle all the Redux stuff such as creating reducers, actions, and selectors using their createSlice API. Please note that our code structure is based on their advanced tutorial.
Want to know how we can mutate state in our reducers?(Typically you shouldn't), check out this link.
React Router is the standard routing library for React. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in.
To learn more about the usage of this library including their declarative component API, check out their documentation here.
We are using Material-UI as building blocks when implementing components. So whenever you create a new component, check out their built-in components to start with.
We are using their styling hook api called makeStyles to style our components. It has many benefits including theme nesting and dynamic styles based on props.
The following code snippet demonstrates the hook can grab a theme color that's been initialized in web/src/app/App.tsx and set properties based on props passed on to the hook in the component.
// web/src/components/ErrorMessage.tsx
const useStyles = makeStyles(theme => ({
root: {
color: theme.palette.error.main,
marginTop: (props: Props) => props.marginTop,
marginBottom: (props: Props) => props.marginBottom
}
}))
Use this trick if you need to modify certain properties in Material-UI components. Use this file as a reference as well web/src/features/fireWeather/components/WxDataForm.tsx.