 Resources from Tomasz Łakomy in 2021

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this lesson we are going to learn how to use `useEffect` hook from React 16.7 to be able to create a custom hook which allows us to see how often the component mounts and unmounts. 

Later, we can reuse it in other components and improve app performance by diving deep into how many times our components are mounted and/or unmounted. 

Use React useEffect hook to see how many times component mounts and unmounts

When developing React apps it's common that we have components that need to have different classes depending on different conditions. In such complex scenarios, we often end up with a whole lot of `if` statements (or `switch`es) just to set proper CSS classes to a component.

Luckily, there is a utility npm package to help us with that - [classnames](https://github.com/JedWatson/classnames). In this lesson, we are going to learn how to use `classnames` package to manage setting different classes to a `Message` component in an easy and maintainable way.

Manage React component classes with classnames npm package 

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Frontend developers tend to write quite a lot of HTML (or JSX). This is why it's important to be able to optimize time spent writing `<div></div>` manually to use the cognitive resources for more challenging tasks. 

Modern editors such as VS Code have **emmet** plugin built in which allows us to write HTML structure much faster due to the fact that it allows us to quickly create nested structures, multiple elements, siblings etc. In this lesson we are going to learn how to use **emmet** to write HTML more efficiently.

Efficiently write HTML and JSX using Emmet

When using functional components in React we may run into situations where we are performing expensive calculations multiple times, even though the values passed in to the functional component hasn't changed.

This is where `useMemo` hook comes in. In this lesson we are going to learn how to use `useMemo` hook to optimize an expensive (in this example - highly expensive operation of adding two numbers together, for simplicity) operation so that its result is recalculated only when it's necessary - that is, when the input arguments have changed. Otherwise, we are going to use an optimized, memoized result.

Optimize expensive operations with React useMemo hook

We sometimes just want to return a couple of elements next to one another from a React functional component, without adding a wrapper component which only purpose would be to wrap elements that we want to render. 

In this one minute lesson we are going to learn how to solve this problem by returning an array of components and as such - avoid adding unnecessary `div` wrappers.

Return a list of elements from a functional component in React

*Note:* React hooks are currently in React v16.7.0-alpha and being discussed in an open RFC.

When using the `useState` hook it's important to remember that the function updating the state returned from this hook works a little different than the `setState` from `React.Component`. In this lesson we are going to learn how we can handle multiple state values when using the React `useState` hook following an example of a simple app with two counters to highlight possible issues we might encounter and how to solve them.

Handle multiple state values when using useState React hook

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Even though JavaScript is a very dynamic language, sometimes we want to be _extra_ sure that it's not possible to modify an object once it was declared. Luckily, there's a method called `Object.freeze` which allows us to freeze an object so it's not possible to modify it in any way whatsoever once it was initialized.

In this lesson we are going to learn how to use `Object.freeze` to ensure that it's not possible to modify an object containing user-specific data

Freeze a JavaScript object with an Object.freeze method

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Sometimes we'd like to ensure that some `console.log` are *really* visible one someone opens dev tools window. For instance, we could want to warn our less tech-savvy users that they shouldn't paste anything someone else send them to console, because their account might get stolen.

In this lesson we are going to learn how to style `console.log` messages with CSS properties so we can make our messages stand out from the crowd.

Style console.log messages with CSS

It's important that our users enjoy using our application or website. One way we can make it happen is by adding microinteractions to subtly reward our users for performing certain actions.

In this quick lesson we are going to learn how to use [react-rewards](https://github.com/thedevelobear/react-rewards) to add microinteractions (such as rain of confetti or emojis) to a simple React application.

Use react-rewards to add microinteractions to React app to reward users for some actions

Dropdowns tend to be difficult. The behaviour of `<select/>` element varies from browser to browser and it's difficult to add options to search the values, select multiple values at once, remove ones that have been selected one by one etc.

Instead of reinventing the wheel, it's worth to use a well-tested, battle-proven solution like [React Select](https://react-select.com/home). 

In this lesson we are going to learn how to: use `Select` component to create a dropdown, convert it to a multi select input using `isMulti` prop, specify a default value using `defaultValue` prop and add custom styles using `styles` property based on CSS-in-JS.

Create and customize a single and multi-select dropdown with React Select

Sometimes it's necessary to have a fixed set of properties on a JavaScript object, while also maintaining the option of changing those properties.

In this lesson we are going to learn how to use `Object.seal()` method to prevent new properties from being added to it and marking all existing properties as non-configurable. Values of present properties can still be changed.

Prevent adding/deleting properties in a JavaScript object with Object.seal() method

Some actions that our users perform in our apps may not be obvious to them. Sometimes it's worth it to tell them what's going to happen after they perform a certain action (for instance - submit a form) before they click the button. 

One of the way we can accomplish that is to add tooltips to our application so that it's easy to explain to users what's going to happen next.

In this lesson we are going to learn how to use [react-tooltip](https://github.com/wwayne/react-tooltip) to easily add tooltips to a simple React application, how to change their properties and how to have different tooltips for different buttons.

Easily add tooltips to a React app with react-tooltip library

In JavaScript, we often end up composing one object out of several other objects. Luckily there's a convenient [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) which allows us to spread entries from one object to another.

Sometimes we only want to include something in the newly created object if a certain condition is met. In this lesson we are going to learn how to conditionally add entries to a JavaScript object using the spread operator.

Conditionally spread entries to a JavaScript object

One of the common pitfalls when learning React is related to event handlers losing the reference to `this` pointing to the component when called. Common approach to solving this issue is to use a `constructor` and `.bind()` function to bind all class methods to `this` object, referring to the component itself.

It sometimes leads to a `constructor` which sole purpose is to bind a bunch of methods. 

In this lesson we are going to learn how to use a public class field syntax (currently available in Babel stage-2 and enabled by default in create-react-app) to avoid having to create unnecessary constructors in order to bind a React component method to proper `this`

Bind React class component methods to proper `this` without calling bind() in constructor

Chrome DevTools provide many handy utility functions that we can use to make debugging faster and easier so we can fix the bug and move on.

In this lesson we are going to learn how to use `$`, `$$` utilities built-in in Chrome DevTools to get references to single and many DOM elements and how to use `$0 - $4` variables to reference object selected using Inspect Element tool.

Use Chrome DevTools console utilities to make debugging easier

One of common pitfalls that many React developers experience is trying to read an 'updated' state of the component right after it was updated using `setState`, for example:

```
this.setState({counter: 5});
console.log(this.state.counter);
```

In this lesson we are going to learn why reading `this.state` right after executing `setState` may lead to inconsistent results and how to use `setState` callback function to read the updated state value as soon as it was updated.

Avoid pitfalls with reading React component state right after running setState

In this lesson we are going to learn how to set default values to variables destructured from a JavaScript object, which may come in handy if we'd like to avoid setting those variables to `undefined` because a certain field is not specified in the object we are destructuring from.

Add default values to variables destructured from a JavaScript object

In this lesson we are going to learn how to remove unwanted properties from a JavaScript object following an example of an object containing sensitive data (such as password and bankBalance) and removing this kind of data from it.

To achieve that we are going to use two ES6 features: destructuring an object and the spread operator.

Remove unwanted properties from a JavaScript with ES6 spread operator

[Logpoints](https://developers.google.com/web/updates/2019/01/devtools) are one of the features recently released in Chrome 73. They allow you to easily log and debug your code (both on local environment and on production) without cluttering your code with `console.log()` statements everywhere and without using a debugger which might be an overkill when you simply want to log something.

In this lesson we are going to learn how to create Logpoints in Chrome DevTools to catch a bug in a JavaScript function.

Use Logpoints to log messages without cluttering up your code with console.log() statments

Choosing right colors for your website is difficult, especially when we want to develop accessible websites. Our goal should be to choose colors that have a high contrast ratio and as such can be easily read by all users, including those with low-vision impairments or color-vision deficiencies. 

In this lesson we're going to learn how to use Chrome DevTools Color Picker to choose colors for text which meet the [AA](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast7) and [AAA](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast7) contrast ratio score.

Choose accessible colors for text using Chrome DevTools Color Picker contrast ratio score

Starting a brand new project can be tricky.

Sometimes we end up spending a couple of hours writing configs for tools like webpack, where instead we would like to dive straight to the code.

[Parcel](https://parceljs.org/getting_started.html) allows us to quickly start a brand new JavaScript web application without having to worry about writing any configs. In this lesson we are going to learn how to install parcel and how to create a development/production build of our app.

Topics

Instructors

Content Type