React

In React everything is a component, main concepts:

• Components
• props
• state

1. Lifecycle

react component has 3 stages: mounting, rendering, dismounting

• render() This method is the only required method within a class component in React and is the most used. As the name suggests, it handles the rendering of your component to the UI, and it happens during the mounting and rendering of your component.
• componentDidMount() runs after the component output has been rendered to the DOM.
• componentWillUnmount() is invoked immediately before a component is unmounted and destroyed
• shouldComponentUpdate() is invoked before rendering when new props or state are being received.
• componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

2. Higher-order component(HOC)

Higher-order components (HOC) are an advanced technique in React for reusing component logic. Meaning a higher-order component is a function that takes a component and returns a new component. They are patterns that emerge from React's compositional nature. While a component transforms props into UI, a higher-order component transforms a component into another component, and they tend to be popular in third-party libraries.

3. Context

In a typical React app, data is passed down via props, but this can be cumbersome for some types of props that are required by many components within an application. Context provides a way to share these types of data between components without having to explicitly pass a prop through every level of hierarchy. Meaning with context, we can avoid passing props through intermediate elements.

Arrow

Arrow functions implicitly return the expression right after =>, so you didn’t need a return statement:

const listItems = chemists.map(person => <li>...</li> // Implicit return!);

However, you must write return explicitly if your => is followed by a { curly brace!

const listItems = chemists.map(person => { // Curly brace return <li>...</li>;});

Arrow functions containing => { are said to have a “block body”. They let you write more than a single line of code, but you have to write a return statement yourself. If you forget it, nothing gets returned!