Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

React Deep Dive by Manuel Bieh & Sibylle Lancaster_468 x 60.png

data.tar.gz

reactdeepdive

reactdeepdiveportal

reactdeepdiveflow

ReactDeepDiveNodeAPI

ReactDeepDiveNodeAPI_Portal

The primary goal of this course is to give you an excellent introduction to React and its ecosystem, tackle advanced features, and teach you as many best practices as possible. Furthermore, this course digs deeper into the most popular, latest, and straight forward ways to use React.

React Deep Dive: From Beginner to Advanced

# What are Refs?

**Refs** allow us to directly access DOM elements that were created during the render process. ven if this is unnecessary in most cases, it can be useful in a few situations where it is unavoidable. Examples are calculating the position or size of an element to display a tooltip based on the element or focusing on a form field using `.focus()` once the component has loaded.


React has evolved over the years, and so have the methods dealing with **Refs**. But they all have one thing in common. Refs are always defined by the `ref` prop of a DOM element in JSX, or to be more precise, `createElement()`.

# When to use Refs?

A word of warning before we proceed. Even though **Refs** exist, they should be used sparingly and only if the declarative way of re-rendering components with updated state and props does not help us. Manipulation of attributes or attribute values, or adding or removing classes, event listeners, or changing properties like `aria-hidden` should always occur **declaratively** using props, state, JSX, and re-rendering.

However, there are a few cases in which using Refs is acceptable or even necessary. These are: <br>

* Setting focus on an input element (`input.focus()`) or calling methods such as `.play()` or `.pause()` on video or audio elements.
* Invoking imperative animations.
* Reading properties of elements currently in the DOM (for example `.getBoundingClientRect()`).

Let's take a look at how to access the DOM elements directly.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Introduction

What are Refs?