 Courses from Tomasz Łakomy

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 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

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 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

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

*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

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

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

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

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

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

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

chrome-devtools

[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

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

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.

Search Results