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

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!

• 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