Latest Tutorials

We've now arrived at Day 5 of our special 6-part YouTube tutorial series on React Hooks . Hooks are so important for all React developers to understand because, conceptually, React components have always been closer to functions and the library supports a functional way of thinking. Hooks add powerful capabilities to functional components. Now in Tutorial 5, Paige covers a powerful Hook - the useContext Hook: The use of component hierarchies solved problems in React around composing UI out of smaller individual parts, but created a range of new problems: More importantly, passing props down became unwieldy in complex component hierarchies where the intermediate components did not need props that were intended for a component further down the hierarchy. These problems are neatly solved for us using the Context API in React, and the useContext Hook lets you share state easily in component hierarchies without passing props down. Learn all about the useContext Hook and how to use it in today's React Hooks tutorial. Keep an eye out for the 6th and final tutorial in our React Hooks series. In it, we'll go in-depth into Custom Hooks and how to write your own. Mastering this skill will turn you into a much more versatile React dev.

We are continuing the tutorial series on React Hooks . Join Paige in today's tutorial as she teaches you all about the useRef hook, how it works, and how to use it in your own React apps. React refs help you imperatively modify the DOM outside the normal flow of component rendering. Here are some example scenarios: Since refs have often been thought of as an escape hatch that indicates that state should be managed elsewhere in the component hierarchy, there are a lot of questions about how to use them correctly. In this detailed but beginner-friendly guide, Paige goes over the nuances of using refs and the useRef React Hook properly so that you can confidently manage DOM elements directly in React. Get started with the useRef hook tutorial here. Up next in our tutorial series, Paige has more on how to use React's built-in Hooks, and how to create your own.

We have the third tutorial in our 6 part YouTube series on React Hooks. (ICYMI - You can check out Part 1 - Introducing Hooks and Part 2 - useState Hook ). Now we're on to the useEffect hook, an incredibly useful hook that allows you to handle side effects such as API calls or modifying the DOM in your function components. The useEffect Hook performs side-effects in function components. The term "side-effects" refers to actions that cause things to occur outside the scope of the function being executed. This includes sending requests to an API, logging, modifying the DOM, subscribing to event listeners, etc. Behavior-wise, you can think of the useEffect Hook as the componentDidMount , componentDidUpdate , and componentWillUnmount lifecycle methods you'd use in class-based components, neatly packaged into one Hook. Follow along as Paige teaches you this second of the most important React Hooks you should know. Your instructor for the tutorial is Paige Niedringhaus, a Staff Software Engineer at Blues Wireless, host of the React Roundup Podcast, and instructor of newline's course: The newline Guide to Modernizing an Enterprise React App . In the full course, Paige covers: If you want to dive deeper into React and master the best practices for modernizing a React app, check out Paige's full course over at  The newline Guide to Modernizing an Enterprise React App .  Stay tuned for parts 4, 5 and 6 in our React Hooks 101 series coming soon!

Here is the second tutorial in our 6 part YouTube series on React Hooks. We've already seen that React Hooks are arguably the biggest fundamental change to happen to React since its inception. Learning Hooks brings you up to speed with this important update to React. Now in this second tutorial, we will teach you the ins and outs of using the useState hook, the most commonly used React Hook, and thus, one of the most important ones you should know. You will see that state management using the useState hook is in many cases more straightforward than using class-based components. Function components have come a long way since React v0.14. Introduced as a simpler syntax for defining stateless, presentational components, function components can now handle state via the useState Hook. This means you can define any component, stateful or stateless, with functions, and you no longer have to deal with the verbose code that comes with classes. Using the useState hook, you can keep track of state changes as the user interacts with your functional components, much as you could do with class-based components. Your instructor for the tutorial is Paige Niedringhaus, who's a Staff Software Engineer at Blues Wireless, and an expert at React as well as related frontend technologies. Paige has a depth of experience in software development with large organizations, including at The Home Depot, where she spent 5 years in engineering. In this part 2/6 React Hooks tutorial, she covers: Mastering the contents of this free tutorial gets you ready to use the most commonly used React Hook and understand React code that uses it. Get started with the tutorial here. And watch for the continuation of the series, when we move into the other hooks you'll use most frequently on React projects. If you want to dive deeper into React and master the best practices for modernizing any React app, then check out Paige's full course: The newline Guide to Modernizing an Enterprise React App . This course covers it all: React Hooks, Design Systems, Testing, and best practices for modern React.

In this course, we’ll build a set of custom reusable hooks, a mini react-hanger clone, essentially going from nothing to a fully-automated publishing pipeline that follows the best practices. We cover common Hooks APIs every React developer should know, then dive straight into implementing Custom React Hooks, similar to what you will find in leading React libraries in the open source React ecosystem. Course modules include: The instructor for this course is Andrey Los who was the Frontend Platform Lead at unicorn startup Revolut, managing a massive 400k+ LOC monorepo with over 80 modules, apps, and JavaScript libraries. Andrey has extensive experience working with React in production, including tools like React, TypeScript, and GraphQL. Besides Revolut, he has worked for other leading companies including Thomson Reuters, UBS, and Deutsche Bank. Find out more and enroll over at  The newline Guide to Creating a React Hooks Library .