Category: Code

refactored into a class

If we have duplicate code like this: it can be refactored into a if-else statement: but even better would be to create a seasonConfig object!

JSX supports ternery expressions though its not the best practice to have so much logic in the return statement Instead, this would be preferable:

This constructor can be refactored into this: In the background, babel will take the refactored code and generate exactly the same code as above, its just a shorthand that makes the code more clear and less boilerplate.

constructor One-time setup, assignments.Do not do data-loading inside the constructor, instead do it in componentDidMount. render Return JSX, nothing else! componentDidMount Place for data-loading, api requests etc. componentDidUpdate Place to do more data-loading when state/props change. Render-method will be called just before this method. componentWillUnmount Place for cleanup       Rarely used lifecycle methods: …

Old version of React: Functional components – produce JSX to show content Class components – produce JSX to show content, use the lifecycle method system, use the state system New version of React: Functional components can: Express things at a certain time with Hooks instead of the lifecycle method system class components are using. use …

By placing … before the arrayname as you are passing the array as a argument when calling a function, you can split an array up so the function will see each array value as different arguments. By placing … before an parameter in the function declaration, values that get sent when calling the function gets …