Category: React

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 …