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

Overview

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!

Syllabus

Intro Video - React "Baby Names" App
Start a new React project with `create-react-app`
Get familiar with the basics of JSX
Pass data down to children component with props in React
Iterate through a JavaScript Array with JSX and the `Array.map()` method
Think in components and break down a React application in small UI components
Manage local state in React with the `useState` hook
Focus an input field in React with the `useRef` and `useEffect` hooks
Identify the need to elevate state to a parent component in React
Filter a JavaScript array with JSX and the `Array.filter()` method
Update state in React with the update function provided by the `useState` hook
Chain Array methods in JavaScript
Make components reusable in React with a flexible props API
Conditionally render JSX in React with ternary and logical operators
Reset an input field value in React with the update function provided by the useState hook
Reduce "prop drilling" in React with the Context API
Improve developer experience for accessing context with a custom React hook