This is the introduction to the Beginner's Guide to Real World React.

Course introduction

You'll learn a little bit about Rob Kendal, his development background, and the motivations for producing this course on React.

About Rob Kendal, Author of Beginner's Guide to Real World React

In this lesson we'll take a look at some of the conventions we'll be using throughout the course, including the type of code styles we'll employ, and code editing programs.

Conventions used and helpful links

This lesson will cover how to seek help if you get stuck, as well as how to report any errors or omissions that you come across.

Reporting errors and getting support

How to download and run the project files

Downloading the course code

Introduction

React is a declarative JavaScript library introduced by Facebook in 2013. We'll look at how React came about and determine some of the skills you'll need as a React developer.

What is React? A Comparison to JavaScript and HTML

This lesson takes a deeper look at React in comparison with other, similar frameworks such as Vue and Angular

React vs Angular vs Vue - Benefits and Drawbacks

React does have a few drawbacks and caveats to working with it. We'll explore some of those in this lesson.

React Pros and Cons

Before we dive into more deep and challenging topics, we'll have some fun by building an app. Our first React app will present our users with an input and send them a friendly greeting message.

First React app - The Greeting App

Now that we've introduced our very first app, the Greeting App, this lesson will cover the actual building of it, step by step.

Getting Started with React - Building Your First App

With our Greeting App built, we're going to learn how to 'think in React' by breaking down our small App into components and refactoring it to use them.

How to Refactor a React App into Components

So far, we've built and refactored a great React app. Now, it's time to talk about the fundamental principles of React components and its core concepts.

Beginner's Guide to Managing Data in React

React - A modern UI library

This module introduces us to React Hooks; what they are, how to use them, and why they're an important part of modern React development.

Intro to React Hooks [with examples]

In this lesson we'll take a look at the most common Hooks you'll come across and learn how to use them in your apps.

React useState and useEffect - A Beginner's Guide

We're going to build on the previous Hooks demo by creating a dog picture gallery. First though, let's take a look at what we're going to build.

Furry Friend Gallery app

This code-along lesson walks through using Create React App to build a fully-functioning picture gallery, the Furry Friend Gallery.

Build Your First Functional React App with Create React App

Introducing React Hooks

This lesson introduces the concepts and approaches you can use to deal with fetching data within React, including the JavaScript Fetch API.

How to Fetch API Data in React with JavaScript Fetch and Axios

Our code-along project for this module is to build a new Furry Friends Gallery. This time, we'll be using a new API and common UI patterns such as a sidebar filter. In this lesson, we'll take a look at what we'll be building.

Furry Friends Gallery Mark II

We've seen the finished app, so now it's time to build it! This lesson will take you, step by step, through creating a brand new app, the Furry Friends Gallery Mark II.

Build Your First API-Powered React App with Axios

Fetching data with React

Deploying your React apps is a vital step and this module will help you learn just how to do that. We cover some hosting history as well as your options for deployment in modern hosting ecosystems.

The Best Hosting Environments to Deploy a React App

React apps need to be built and packaged up for deployment before we can think about sending them off to a hosting platform. This lessons covers how to build your React apps, ready for deployment.

How to Set Up a React App for Continuous Integration

In this final lesson of the module, we'll walkthrough the deployment process to host our Furry Friends Gallery Mark II app on the Netlify hosting platform.

How to Deploy Your First React App on Netlify

Deploying an app to the world

Successful React development involves being able to 'think in React'. We'll look at breaking down UI's into components and their relationships.

Thinking in React with Higher Order and Functional Components

React components are modular, isolated slices of functionality that connect together to build user interfaces. This lesson discusses the relationships between components.

When Should You Split Up React Components?

There are many different ways to structure your apps' code. This lesson introduces some different approaches, including how I structure my projects and suggestions from the Facebook team themselves.

How to Structure a React Project

The big project in this module is a Form Builder. Let's take a look at what we'll be building.

Form Builder project

The Form Builder app is the most complex we've built so far. It builds on concepts from earlier modules and reenforces the idea of building modular, component-driven UIs. We'll walk through the app build together to create a dynamic form powered from a set of JSON objects.

How to Build a Dynamic Form Builder in React with JSON Data

Thinking in React

We'll be taking a deep dive walkthrough of the most common Hooks in React, including their use cases and how to work with them.

The 7 Core React Hooks [with examples]

Setup the base project for our Hooks deep dive examples.

Hooks project setup

Learn about the useContext Hook, its use cases and implementation.

Beginner's Guide to React useContext Hook

Learn about the useRef Hook, its use cases and implementation.

Beginner's Guide to React useRef Hook

Learn about the useMemo Hook, its use cases and implementation.

Beginner's Guide to React useMemo Hook

Learn about the useCallback Hook, its use cases and implementation.

Beginner's Guide to React useCallback Hook

React Hooks Deep Dive

In this module we'll explore the third party React Router library to add a routing and navigation system to our applications.

Beginner's Guide to App Navigation [with examples]

React Router is a routing and navigation library that bolts onto to React. We'll explore what it is and how it works.

What is React Router? A Beginner's Guide

For the demo lesson in this module we'll be building an Admin Console app. Let's take a look at what we'll be building in greater detail.

Admin Console app

We're going to build a demo Admin Console app step by step during this lesson, adding in React Router as we go.

How to Build a React Admin Dashboard

With the basics in place, this lesson is all about extending the Admin Console with parameterized routing and query strings.

Parameterized Routing and Query Strings with React Router

Navigation in complex apps

Let's take a look at why we often need a centralized state area in our apps and how we can manage updates and changes to it

Intro to React State Management

One of the best ways to manage your apps' centralized state is with the redux pattern. In this lesson we'll deep dive into redux and how you can use it for managing state.

A Beginner's Guide to Redux and React State Management

This lesson introduces the new demo project for this module, the Event Sign-Up App.

Event Sign Up App

Learn how to build our very own Event Sign-Up App using the React Redux library with a centralized state management store.

How to Build an Event Signup App with React Redux Thunk

This lesson takes things further by extending the Event Sign-Up App to use the Redux Toolkit for even easier state management.

How to Simplify React State Management with Redux Toolkit

This final lesson eschews all external redux libraries and swaps in the use of React's built-in useReducer Hook and Context tools.

Beginner's Guide to React useReducer Hook

State management with Redux

In this final module we'll be putting our skills together and building a Dinosaur Search App

The Dinosaur Search App

We put the foundations of the Dinosaur Search App in place such as creating a new React app and exploring the supporting API

React Scaffolding and File Structure Best Practices

This lesson focusses on building the data-handling services and core Redux management system for the Dinosaur Search App

Intro to React Services with Redux and useReducer Hooks

In the final coding lesson of this module we'll flesh out the UI components that will power the Dinosaur Search App

How to Combine React Components Into an App

With all the code in place, we'll take a walk through the finished Dinosaur Search App and discuss the finer points

Exploring the app

With the course at an end we'll take a look at some next steps to continue your React learning and where you can go from here

Closing thoughts and learning paths

In this course you'll take a deep dive into core React concepts as you learn more about how React works, how you can use it to build complex web applications, and how to combine it with third-party libraries and frameworks to 'join the dots' and gain a detailed understanding of how you might use React in a real world setting.

## Why this course

The Beginner's Guide to Real World React will teach you how to successfully build web applications with modern frontend techniques, using the ReactJS library.

React on its own is only one piece of the puzzle and it doesn't, out of the box, cater for some of the missing pieces of common frontend development. Pieces such as:

- Connecting to an API or external data source and retrieving data to power your app.
- Navigating around your app to different pages or areas.
- Managing the "state" of your application's data at a higher level (i.e. outside of components).

The problem is, these missing pieces are vital parts of any modern web application, as well as any realistic development scenario. It's key to understand both their concepts and how to approach them in React development. Many tutorials only cover one aspect of these and don't bring them together in a realistic setting.

On completion of The Beginner's Guide to Real World React, you'll not only have a knowledge of modern React development, but also the skills required to build real-world apps that talk to real data.

You don't have to be a coding guru or have years of experience as this course is designed for beginners. However, you should be familiar with the basics of frontend development, including HTML, CSS and JavaScript. It would be helpful to have an understanding of basic concepts around RESTful APIs and how to interact with them, but it's not essential.

## Course topics

In The Beginners Guide to Real World React you'll join me on a deep dive into core React concepts. As you progress through this course, you will learn more about how React works, how you can use it to build complex web applications, and how to combine it with third-party libraries and frameworks to 'join the dots'. You will gain a detailed understanding of how you might use React in a real world setting.

### Part I

In part one of the course, we'll take an end-to-end approach to React. We'll start with taking a look at the library itself and the problems it solves, before moving on to topics such as Hooks and handling data from an API. Finally, we'll talk about how to build and deploy our application to a popular service such as Netlify.

Included in the introductory part one of the course are the following modules:

- Module 1 - this very introduction.
- Module 2 - React JS: an introduction to React, a modern UI library.
- Module 3 - React Hooks: what they are and how to use them.
- Module 4 - Fetching data: using APIs in your code, and popular helper libraries such as Axios.
- Module 5 - Deploying your first app: using Netlify to deploy our app to the public.

### Part II

In the extended course part two, we'll cover similar topics to the first part but take a deeper dive into them and look at some of the challenges we face as React developers and how to overcome them. We'll also learn about navigating around our application, and managing state across our application using Redux -- a common stumbling block for aspiring React developers.

The outline for part two of the course includes the following modules:

- Module 6 - Thinking in React: structuring your projects, breaking functionality into components
- Module 7 - React Hooks deep dive: learn what each Hook does and how to use them
- Module 8 - Navigation in complex apps: moving users around different areas of your application
- Module 9 - State management in complex apps: using Redux and useReducer Hooks to manage app state
- Module 10 - The Dinosaur Search App: putting it altogether by building our very own application

If you've been looking for a way to learn _real-world_ React patterns, then this course is for you.

In this course, you'll learn to build web applications with modern front end techniques using the React JS library

Beginner's Guide to Real World React

Build a furry friends gallery application with React and Axios.

Build a form builder application powered by JSON with React.

Build an admin console application with React Router.

Build an event sign up application with Redux Toolkit.

Build a dinosaur search application with the userReducer Hook.

How to build realistic React applications from scratch

How React compares to other front end frameworks

What React is missing and how to fill in the blanks

How to use React with popular libraries like axios

How to navigate in complex apps with React-Router

 Hook provides us with a way to store and retrieve a mutable (that is, subject to change) reference object. It has a 

 property that can be initialized to a starting value. The object that’s returned from 

 will be persisted for the lifetime of the component, which is quite handy. 

Essentially, useRef is like a “box” that can hold a mutable value in its .current property.

 style attributes about the place, especially in class components, then the 

One of the most common use cases for the 

 Hook is to attach a reference to the underlying DOM element that a ref is assigned to. For our demo, we’re going to build a simple modal popup that, when closed, returns focus to the corresponding input element in a form. 

 Hook to provide us with a way to access the input element in the React-generated DOM. With a reference to this element, we can access native properties and functions, such as the 

  Hook isn’t just for DOM refs. A ref object is a generic container with a mutable 

 property. This property can hold any value and is comparable to an instance property on a class.

import { useRef } from 'react';

const MyComponent = props => {
	const inputRef = useRef(null);

	const handleSomething = () => {
		inputRef.current.focus();
	};	

	return (
		<input type="text" ref={inputRef}/>
	);
};

 Hook, passing in a value of ‘null’ as an initial value (though this could be anything you want). In the return function, we define a standard HTML input element and assign our 

 attribute. This essentially wires the underlying DOM input element into the 

’s ‘current’ property, so that later on, in the 

 function, we can grab a reference to the input element. 

In our case, we’ve gone with the common example of calling the 

 function to bring the browser focus into the input element.

Of course, if you want to change the value of the ref’s ‘current’ property, you can do so as you would with any JavaScript assignment — e.g. 

With our fundamental knowledge of the Hook in place, let’s build something to showcase it in action! For this demo, we’ll be creating a form with a modal popup. Once the user clears the modal, we want to return focus to the correct area of the form, a specific input element. 

Back in our project in VS Code, open up the 

 file and add the following additional styles at the bottom: 

/* UseRefExample styles ---------------------------- */
.modal-container {
    background-color: hsla(0, 0%, 0%, 0.43);
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}
.modal-container.is-active {
    display: flex;
}
.modal {
    background-color: white;
    padding: 3rem;
    min-width: 30%;
    border-radius: 4px;
    box-shadow: 1px 1px 2px aliceblue;
}

We already have some default styles for form elements, such as inputs. These styles are concerned with the modal’s onscreen positioning and toggling its visibility. CSS’s 

 property gives us a super clean and simple way to position an element in the center of the screen, such as our modal friend here.

With our helper styles in place, open up the 

 file. Unsurprisingly we’ll be importing the 

import React, { useState, useRef } from 'react';

 component that will house some dummy content to be displayed when we eventually click on a button to trigger the modal into view:

---
title: Beginner's Guide to React useRef Hook
slug: useref-hook
description: Learn about the useRef Hook, its use cases and implementation.
privateVideoUrl: https://fullstack.wistia.com/medias/d1eyqr0bvr
---

# Hook: `useRef`

The `useRef` Hook provides us with a way to store and retrieve a mutable (that is, subject to change) reference object. It has a `.current` property that can be initialized to a starting value. The object that’s returned from `useRef` will be persisted for the lifetime of the component, which is quite handy. 

From the official [React docs](https://reactjs.org/docs/hooks-reference.html#useref) on `useRef`:

> Essentially, useRef is like a “box” that can hold a mutable value in its .current property.

If you’ve come across the `React.createRef` function or seen those funny `ref={}` style attributes about the place, especially in class components, then the `useRef` Hook functions in a very similar way. 

## Use cases for useRef

One of the most common use cases for the `useRef` Hook is to attach a reference to the underlying DOM element that a ref is assigned to. For our demo, we’re going to build a simple modal popup that, when closed, returns focus to the corresponding input element in a form. 

We can use the `useRef` Hook to provide us with a way to access the input element in the React-generated DOM. With a reference to this element, we can access native properties and functions, such as the `focus()` function. 

However, the [useRef()](https://reactjs.org/docs/hooks-reference.html#useref)  Hook isn’t just for DOM refs. A ref object is a generic container with a mutable `current` property. This property can hold any value and is comparable to an instance property on a class.

## Using the useRef Hook

Using the `useRef` Hook couldn’t be simpler:

```js
import { useRef } from 'react';

const MyComponent = props => {
	const inputRef = useRef(null);

	const handleSomething = () => {
		inputRef.current.focus();
	};	

	return (
		<input type="text" ref={inputRef}/>
	);
};
```

We call the `useRef` Hook, passing in a value of ‘null’ as an initial value (though this could be anything you want). In the return function, we define a standard HTML input element and assign our `inputRef` variable to the `ref={}` attribute. This essentially wires the underlying DOM input element into the `useRef`’s ‘current’ property, so that later on, in the `handleSomething` function, we can grab a reference to the input element. 

In our case, we’ve gone with the common example of calling the `focus()` function to bring the browser focus into the input element.

Of course, if you want to change the value of the ref’s ‘current’ property, you can do so as you would with any JavaScript assignment — e.g. `inputRef.current = ‘my value here’`.

## Building the useRef example

With our fundamental knowledge of the Hook in place, let’s build something to showcase it in action! For this demo, we’ll be creating a form with a modal popup. Once the user clears the modal, we want to return focus to the correct area of the form, a specific input element. 

Back in our project in VS Code, open up the `styles.css` file and add the following additional styles at the bottom: 

```css
/* UseRefExample styles ---------------------------- */
.modal-container {
    background-color: hsla(0, 0%, 0%, 0.43);
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
}
.modal-container.is-active {
    display: flex;
}
.modal {
    background-color: white;
    padding: 3rem;
    min-width: 30%;
    border-radius: 4px;
    box-shadow: 1px 1px 2px aliceblue;
}
```

We already have some default styles for form elements, such as inputs. These styles are concerned with the modal’s onscreen positioning and toggling its visibility. CSS’s `flex` property gives us a super clean and simple way to position an element in the center of the screen, such as our modal friend here.

With our helper styles in place, open up the `UseRefExample.jsx` file. Unsurprisingly we’ll be importing the `useRef` Hook from React’s library first:

```javascript { actualFilename=./protected/src/UseRefExample.jsx endLine=2 startLine=1 statedFilename=UseRefExample.jsx url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_07/lesson_04/protected/src/UseRefExample.jsx }
import React, { useState, useRef } from 'react';
```

### The ModalBox component

Next, we’re going to define a `ModalBox` component that will house some dummy content to be displayed when we eventually click on a button to trigger the modal into view:

```javascript { actualFilename=./protected/src/UseRefExample.jsx endLine=21 startLine=3 statedFilename=UseRefExample.jsx url=https&#x3A;//gitlab.com/fullstackio/books/beginners-guide-to-real-world-react/module_07/lesson_04/protected/src/UseRefExample.jsx#L3 }
const ModalBox = ({ isOpen, handleModalClick }) => (
    <div className={`modal-container ${isOpen ? 'is-active' : ''}`}>
        <div className="modal">
            <label>
                <input type="checkbox" /> this is option one
            </label>
            <label>
                <input type="checkbox" /> this is option two
            </label>
            <label>
                <input type="checkbox" /> this is option three
            </label>

Rob Kendal

The Use Ref Hook provides us with a way to start and retrieve a mutable,

that is, subject to change, reference object.

It has a dot current property that can be initialized to a starting value.

The object that's returned from the Use Ref will be persisted for the lifetime

essentially, Use Ref is like a box that can hold a mutable value in its dot

If you've come across React.createref function or seen those funny ref-style

especially in class components, then Use Ref Hook functions in a very similar

One of the most common use cases for the Use Ref Hook is to attach a reference

to the underlying DOM element that a ref is assigned to.

For example, in our demo, in this lesson we're going to build a simple modal

returns focus to the corresponding input element in a form.

We can use the Use Ref Hook to provide us with a way to access the input

With a reference to this element, we can access native properties and functions

However, the Use Ref Hook isn't just for DOM refs.

A ref object is a generic container with a mutable current property.

This property can hold any value and is comparable to an instance property on a

Using the Use Ref Hook couldn't be simpler.

We call the Use Ref Hook passing in the value of null as the initial value, but

this could be anything you want, of course.

In the return function we'll define a standard HTML element and assign our

This essentially wires the underlying DOM input element to the Use Refs current

property so that later on, in the handle something function,

we can grab a reference to the input element.

In our case we've gone with a common example of calling the focus function to

bring the browser focus into the input element.

Of course, if you want to change the value of the refs current property, you

can do so as you would with any JavaScript assignment.

e.g. input ref dot current equals and then whatever your value is.

So, with our fundamental knowledge of the hook in place, let's build something

For this demo we'll be creating a form in the modelled pop-up.

Once the user clears the modelled we want to return focus to the correct area

Back in our project in VS Code, open the styles.css file and add the following

We already have some default styles form elements such as inputs.

These styles are concerned with the modelled on-screen positioning and toggling

CSS's flex property gives us a super clean and simple way to position the

element in the center of the screen, such as our modelled friend here.

With our helper styles in place, open up the userefexample.jsx file and

unsurprisingly we'll start by importing the Use Ref hook from React's library

Next we're going to define a modelled box component that will house some dummy

content to be displayed when we eventually click on the button to trigger a mod

It's a purely presentational component and receives two props, is open and

The isopen prop is used as a ternary if-stem into applying an isactive CSS

class that will show or hide the modelled.

The handle modelled click prop will be a function that we're just assigning to

Ultimately our default parent component will handle the toggling of isopen prop

value via the handle modelled click event, but for now our presentational mod

elled box component doesn't need to know or care about this.

When a user clicks either cancel or save the component simplifies handle mod

Of course the modelled box component on its own isn't enough to do anything, so