This article is all about to build strong understanding of React design as well as how it’s divided into core, renderers, and the reconciler.

At the heart of React are three different types of entities: native DOM elements, virtual elements and components.

• What is React Fiber ?
• React.js Reconciliation
• Beginners guide to Custom React Renderers
• The React Source Code: a Beginner’s Walkthrough

React core only includes the APIs necessary to define components. It contains all the top level React APIs like:

• React.createElement()
• React.createClass()
• React.Component
• React.Children
• React.PropTypes

It doesnt include the diffing algorithm or any platform specific code.

React component takes some state of your application as properties and returns the UI to render a view.

The reconciler is the part of React which contains the diffing algorithm used to diff one tree with another to determine which parts need to be changed.

It is shared between multiple platform renderers like React Dom, React Native, React ART etc. The latest reconciler name is Fiber.

React Fiber: It is the default reconciler since React 16. It is a reimplementation of the React reconciler. It improves performance and responsiveness for complex react applications.

• It is a process of updating your UI to match the application state
• It creates a tree of react elements also called Virtual DOM that the component hands off during render() to tell React what it should build. Virtual DOM is only a representation of the actual DOM
• On the next state or props update, it creates a new tree of React elements out of render()
• Then it compares and figures out the changes from previous version to next version to efficiently update the UI to match the most recent tree. This process is called diffing
• The diff algorithms generates a list of minimum possible DOM mutations which renderer uses
• React uses heuristic O(n) algorithm to transform one tree into another where n is the number of elements in the tree
• React creates component's instances for the React Components and trigger their lifecycle hooks related to reconciliation phase

• Renderer manages how a React tree turns into the underlying platform calls:
  • React-Dom renders the component tree into respective dom elements
  • React Native renders the component tree into respective native platform views
• They are pluggable
• They renders and manipulates the UI after getting the changes list from Reconciler
• Accomplishes this in one continuous write cycle without any reflow until the end
• Reflow is the process that the browser performs to recalculate the positions, geometrics, and colors of elements on the page
• Call component's instances lifecycle hooks related to render phase

It is basically a declaration of how the UI elements should look and behave

With respect to renderers there are two types of react components:

• Host Components: Host components are platform-specific components, such as <div> or a <View> and they run platform-specific code such as mounting, updates, and unmounting of DOM/Native view.
• Composite Components: Composite components are user-defined components such as <MyButton> or <Content> and they behave the same way with all renderers. React will calls methods, such as render() and componentDidMount(), on the user-supplied composite components.

• For components declared as a class, the instances are the in memory initialized version of the components.
• An instance is what you refer to as this in the component class you write.
• It is useful for storing local state and reacting to the lifecycle events. We will never create these instances manually, they will be managed by React. Also, functional components don’t have instances at all.

• An element is an immutable plain object describing a component instance or DOM node and its desired properties.
• It contains only information about the component type (for example, a Button), its properties (for example, its color), and any child elements inside it.
• An element is not an actual instance. Rather, it is a way to tell React what you want to see on the screen.
• Every component encapsulates element trees based on its render() return.
• The returned element tree can contain both elements describing DOM nodes, and elements describing other components. This lets you compose independent parts of UI without relying on their internal DOM structure.
• React elements are easy to traverse, don’t need to be parsed, and of course they are much lighter than the actual DOM elements—they’re just objects!

When an element’s type is a string, it represents a DOM node with that tag name, and props correspond to its attributes.

This is what React will render.

{
	type: 'button',
	props: {
		className: 'button button-blue',
		children: {
			type: 'b',
			props: {
				children: 'OK!'
			}
		}
	}
}

However, the type of an element can also be a function or a class corresponding to a React component:

{
	type: Button,
	props: {
		color: 'blue',
		children: 'OK!'
	}
}