Advanced React Concepts

We know that ReactDOM builds up the DOM tree under the hood and renders the application on the screen. But how does React actually build the DOM tree? And how does it update the tree when the app’s state changes?

In this post, I'll try to uncover some interesting things about React which you, as a React developer would find fascinating. Let's start with the very start, the point of initialization.

Understand why patterns in React is such an important topic, and learn why they are used and what problems they came to solve.

I’ve written about the challenges of creating user interfaces before. But this post talks about React in a different way — more as a programming runtime.

2018 has reached its end and it makes sense for me to start the new year with an article about Higher-Order Components!

This time I’m going to tell you about this great superpower called “render props”

React 16.6 brought code-splitting to a new level. You can now load your components when it’s really needed without installing additional libraries.

Hooks have learned from the trade-offs of mixins, higher order components, and render props to bring us new ways to create contained, composable behaviors that can be consumed in a flat and declarative manner.

In this talk we will see in depth how to put together most of the recent React advanced patterns and features (Compound Components, High-Order Components, State Initializers, Context API, Refs and -of course- Hooks!) to solve complex real-world problems in a simple, yet elegant way, including proper automated tests for them.

Learn which component pattern will make your codebase better in which use case.

This talk is going to focus on some advanced patterns in building your react components. More over we do not know what the best way to do things and we end up feeling stressed out.

This is a livestream of part of my Advanced React Component Patterns in Portland at ChainReactConf 2018.

There are patterns that have emerged in React that allow you to promote code reuse without sacrificing the simplicity or flexibility of the component. In this talk we’ll go over 5 of these patterns that will make your React components more useful.

Making React components that can be used in multiple places is not hard. What is hard is when the use cases differ. Without the right patterns, you can find yourself with a highly complex component that requires a lot of configuration props and way too many if statements. With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.

This talk will focus on the creative exploitation of React component architecture to render not only to DOM elements, but other targets as well, at the same time. We will explore techniques you can use to achieve this, common pitfalls, useful applications of these patterns and not so useful, but wildly entertaining applications of these patterns.

You build components with the linux philosophy. Do one thing and do it well. 👆Then assemble for bigger things. Higher order components, render props, function as children, and composite components take a different approach.

This is a livestream/recording of a (remote) talk by me at Phoenix ReactJS.

In this talk, we will explore advanced patterns and techniques in Redux inspired by old and proven design principles of large scale messaging-based systems.

We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features.

Learn how to write cross platform React Native code by using effective design patterns in the JavaScript world

Notes for the Complete Intro to React v4 course on Frontend Masters.

A book about common design patterns used while developing with React. It includes techniques for composition, data flow, dependency management and more.

SurviveJS - React shows you how to build a simple Kanban. The idea is that if you can build a simple application, you can probably build something more complex after that. The first application is always the hardest.

Entire React code base explanation by visual block schemes (Stack version).

The up-to-date, in-depth, complete guide to React and friends.

A compilation of React Patterns, techniques, tips and tricks

Functional Web Development with React and Redux

Learn advanced React, Node, TypeScript, and GraphQL by building a production-ready application in this 8-week, online course.

This course is your one-stop reference to most important React updates since V16 was released. We’ll walk through all the major features of modern React so you can stay in sync with the most recent changes while learning to write better software.

Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.

Lean Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects.

Learn everything you need to build a full stack application with React.js and GraphQL

Boost your JavaScript skills by building a real-world SPA with React

Learn to build scalable React applications using the tools and techniques available in the React ecosystem

Learn to build real-world applications in React!

A series of 5 minute videos to level up your React skillset

Start building real ReactJS apps. Jump in with best practices, solid understanding and confidence.

Sophie Alpert is a core contributor to React and is currently the engineering manager for the React team at Facebook. She has been contributing to React for over 3 years now, making her first contributions while she was working as an engineer at Khan Academy.

In this episode of React Round Up, the panel discusses simple React patterns with Lucas Reis. He recently wrote a blog post about simple React patterns that really took off and became popular on the web. They talk about this blog post, what defines a successful pattern, and then they discuss the different patterns that he has discovered in his years of React programming.

In this episode of React Round Up, the panel discusses advanced component patterns and Downshift. They talk about different component patterns, especially render prop patters, and the fact that Downshift allows for your components to be much more useful generally for more people. They also note that the render prop patterns can help to separate logic from view, which makes things easier to develop.