Overview

ES2015 introduced built-in JavaScript modules. A module is a file containing JavaScript code and makes it easy to expose and hide certain values.

The module pattern is a great way to split a larger file into multiple smaller, reusable pieces. It also promotes code encapsulation, since the values within modules are kept private inside the module by default, and cannot be modified. Only the values that are explicitly exported with the export keyword are accessible to other files.

video

Overview

Higher-Order Components (HOC) make it easy to pass logic to components by wrapping them.

For example, if we wanted to easily change the styles of a text by making the font larger and the font weight bolder, we could create two Higher-Order Components:

withLargeFontSize, which appends the font-size: "90px" field to the style attribute.
withBoldFontWeight, which appends the font-weight: "bold" field to the style attribute.

Web Vitals

To measure how well our website performs, we can use a set of useful measurements called Web Vitals. A subset of these measurements - the Core Web Vitals - is usually used to determine the performance of a page, and can affect your website's SEO.

Challenge

Refactor the following code so that TemperatureConverter uses the renderKelvin and renderFahrenheit props to render the <Kelvin /> and <Fahrenheit /> components.