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 beginner friendly series on React, we'll start a new project from scratch
with Create React App, and step by step, build a functional and relatively useful React app
that lets you find inspiration on "baby names", with search and shortlisting functionality.

Through the lessons, we'll cover an introduction to JSX, approach concepts like props, state,
React hooks, "thinking in components", and embrace a progressive refactoring mindset.

Once the app is complete, we'll look at how to reduce prop drilling with the use of the Context API,
and we'll even create our own custom React hook!

Welcome to this beginner friendly series on React. We'll start a new project from scratch
with Create React App, and step by step, build a functional and relatively useful React app
that lets you find inspiration on "baby names", with search and shortlisting functionality.

Through the lessons, we'll cover an introduction to JSX, approach concepts like props, state,
React hooks, "thinking in components", and embrace a progressive refactoring mindset.

Once the app is complete, we'll look at how to reduce prop drilling with the use of the Context API,
and we'll even create our own custom React hook!

Intro Video - React "Baby Names" App

In this lesson, we start a new React project using `create-react-app`. This allows us to not have to worry about tooling like webpack, babel etc. Once installed, we'll remove some of the files we don't need, add some CSS for our project, so we're ready to get started.

Start a new React project with `create-react-app`

In this lesson, we go through the basics of the JSX syntax. We see how JSX removes the need for a templating language, and how it gives you access to the full power of JavaScript.

Get familiar with the basics of JSX

In this lesson, we import our list of names - a JavaScript Array - in our index.js file. We then pass it to the App component as a "prop", so it becomes possible for children components to access that data.

Pass data down to children component with props in React

In this lesson, we iterate through our JavaScript Array of names using the Array.map() method, so we can display each name on the screen.

Iterate through a JavaScript Array with JSX and the `Array.map()` method

In this lesson, we look at the final form of the application we are building, and identify parts of the UI that can be abstracted as React components. We then create our first component as an example.

Think in components and break down a React application in small UI components

In this lesson, we create a "Search" component which allows users to filter the names list based on their input. We introduce the `useState` React hook to handle the state of the input field.

Manage local state in React with the `useState` hook

In this lesson, we make the Search input field focus on page load. To do this, we keep a reference of the input field with the `useRef` hook, and trigger focus on that field when the component mounts with another React hook, `useEffect`.

Focus an input field in React with the `useRef` and `useEffect` hooks

In this lesson, we look at our "component breakdown diagram" again. It becomes apparent that the state for the input field `search` value needs to also be available for the `NamePicker` component. We therefore elevate that piece of state to their common parent (App.js), and pass it down to both components via props.

Identify the need to elevate state to a parent component in React

In this lesson, we use application state to filter a list of names from a JavaScript array. When users type a search string in the `Search` component, the `NamePicker` component re-renders with the updated list of names matching the search.

Filter a JavaScript array with JSX and the `Array.filter()` method

In this lesson, we implement a "shortlisting" functionality to allow users to click on a name to add it to their shortlist. We use the `useState` hook to maintain that shortlist, and use the update function it provides to amend the list when a user clicks on a name.

Update state in React with the update function provided by the `useState` hook

In this lesson, we chain an additional `Array.filter()` method to our filteredNames list, that lets us ommit shortlisted names from our displayed list.

Chain Array methods in JavaScript

In this lesson, we abstract a reusable `NamesList` component, that will render the same JSX in two different scenarios. We keep the logic of the onClick event outside of the component, and pass it as a callback prop.

Make components reusable in React with a flexible props API

In this lesson, we decide what markup should be rendered with ternary and logical operators inside our JSX. We want to control the shortlist title, and if there are no names in the `ShortList`, we don't want to render an empty `<ul>` tag in the DOM!

Conditionally render JSX in React with ternary and logical operators

In this lesson, we implement a "search reset" feature that allows users to click a button to reset the value of the `Search` component. We use the update function provided by React's `useState` hook to do so. We also implement a Footer component to complete our application UI.

Reset an input field value in React with the update function provided by the useState hook

In this lesson, we approach the concept of "prop drilling" and see how it can lead to maintenance pitfalls. By leveraging the Context API, we implement a context provider for our "search" and "shortlist" states. We then access that context where needed via the `useContext` hook.

Reduce "prop drilling" in React with the Context API

In this lesson, we create a custom hook that wraps the `useContext` hook and returns its value, as well as more useful error messaging if a context provider is missing. This simple addition brings very elegant ergonomics to access context from any component.

Build a "Name Picker" app - Intro to React, Hooks & Context API

Simon Vrachliotis

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use