 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

Forms are difficult in React.

In this lesson we are going to see an example of using [react-final-form](https://github.com/final-form/react-final-form) to create a basic form using Form and Field components. react-final-form is a lightweight wrapper around final-form library (only 3kB gzipped!) and is one of the best ways to create a form in React as of today.

Create a basic form in React using react-final-form 

In this lesson we are going to see how you can use `pristine` property from React Final Form render prop to ensure that users won't be able to submit (or reset) an empty form.

Disallow Submitting an Empty Form with React Final Form 'pristine' property

Re-submitting the form before the previous submit action has finished can lead to all sorts of bugs.

In this lesson we are going to see how we can ensure that users won't be able to resubmit the form before the first submit action has resolved by using `submitting` property from React Final Form render prop.

Avoid Submitting a Form Twice with React Final Form 'submitting' property

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jquery

There are many ways of animating stuff on the Web. For example we can use CSS animations, vanilla JavaScript or jQuery library.

In this lesson we are going to learn how to use jQuery `slideUp()`, `slideDown()` and `animate()` functions to animate elements on a webpage in an easy and efficient way.

Animate Elements on a Webpage with jQuery

Most forms require some sort of validation, for instance we'd like to check whether the password is empty, is long enough etc.

In this lesson we are going to learn how to use the `validate` prop from [react-final-form](https://github.com/final-form/react-final-form) `Form` component to validate form values whenever they change and to display helpful error messages to users.

Validate form values with React Final Form 'validate' function

No one wants to reinvent the wheel.

That's why it's so important to be able to use components that someone else had created and put on npm. In this lesson we are going to learn how to use third party [React Select](https://react-select.com) in a [React Final Form](https://github.com/final-form/react-final-form) form to create a searchable select form field.

Use third party components (e.g. React Select) in React Final Form

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

Class components can bail out from rendering when their input props are the same using `PureComponent` or `shouldComponentUpdate`. Since React 16.6 you can do the same with function components by wrapping them in [React.memo](https://reactjs.org/docs/react-api.html#reactmemo).

Use React.memo to avoid unnecessary re-renders in React functional components

Most React developers knows the pain of refactoring a functional component only because we would like to add a state to it.

In this lesson we are going to learn a new way of handling that - React 16.7 alpha introduces a concept of hooks, which allow us to well... hook into existing React features (such as state) from inside of a functional component. By using a `useState` hook we introduce state to a `Counter` component without introducing a class.

Add state to functional React component with useState hook without introducing a class

React allows us to create web, native and... VR applications with [React 360](https://facebook.github.io/react-360/)

In this lesson we are going to learn how to start a Virtual Reality project with React 360 (previously known as React VR) and start making first changes to a "hello world" VR React application.

Start a Virtual Reality project with React 360

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

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

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.

Topics

Instructors

Content Type

Free or Pro