You can imagine this process as a pseudocode:

function isClass(type) {
  // React.Component subclasses have this flag
  return (
    Boolean(type.prototype) &&
    Boolean(type.prototype.isReactComponent)
  );
}

// This function takes a React element (e.g. <App />)
// and returns a DOM or Native node representing the mounted tree.
function mount(element) {
  var type = element.type;
  var props = element.props;

  // We will determine the rendered element
  // by either running the type as function
  // or creating an instance and calling render().
  var renderedElement;
  if (isClass(type)) {
    // Component class
    var publicInstance = new type(props);
    // Set the props
    publicInstance.props = props;
    // Call the lifecycle if necessary
    if (publicInstance.componentWillMount) {
      publicInstance.componentWillMount();
    }
    // Get the rendered element by calling render()
    renderedElement = publicInstance.render();
  } else {
    // Component function
    renderedElement = type(props);
  }

  // This process is recursive because a component may
  // return an element with a type of another component.
  return mount(renderedElement);

  // Note: this implementation is incomplete and recurses infinitely!
  // It only handles elements like <App /> or <Button />.
  // It doesn't handle elements like <div /> or <p /> yet.
}

var rootEl = document.getElementById('root');
var node = mount(<App />);
rootEl.appendChild(node);
React DOM will pass along to the reconciler. Remember that is a React element, that is, a description of what to render. You can think about it as a plain object:

console.log(<App />);
// { type: App, props: {} }
Let’s consider the first time you mount a component:

ReactDOM.render(<App />, rootEl);

Recommend

React Implementation Notes Mounting as a Recursive Process

React Optimizing Performance The Power Of Not Mutating Data

React Optimizing Performance Examples

React Optimizing Performance Avoid Reconciliation

React Optimizing Performance Use the Production Build webpack

React Optimizing Performance Use the Production Build Rollup

React Optimizing Performance Use the Production Build Browserify

React Optimizing Performance Use the Production Build Brunch

React Optimizing Performance Use the Production Build Single-File Builds

Optimizing Performance Use the Production Build Create React App

React Codebase Overview Flow

React Codebase Overview Development and Production

React Codebase Overview Warnings and Invariants

React Strict Mode Detecting unexpected side effects

React Strict Mode Warning about deprecated findDOMNode usage

React Strict Mode Warning about legacy string ref API usage

React Strict Mode

React Fragments Usage Keyed Fragments

React Fragments Usage Short Syntax

React Fragments Usage

React Fragments Motivation

React Fragments

React Without JSX

React Lists and Keys Keys Embedding map() in JSX

React Lists and Keys Keys Keys Must Only Be Unique Among Siblings

React Lists and Keys Keys Extracting Components with Keys

React Lists and Keys Keys

React Lists and Keys Basic List Component

React Lists and Keys Rendering Multiple Components

React Lists and Keys

React Integrating with Other Libraries Integrating with Model Layers Extracting Data from Backbone Models

Integrating with Other Libraries Integrating with Model Layers Using Backbone Models in React Components

Integrating with Other Libraries Integrating with Other View Libraries Embedding React in a Backbone View

Integrating with Other Libraries Integrating with Other View Libraries Replacing String-Based Rendering with React

React Integrating with Other Libraries Integrating with DOM Manipulation Plugins Integrating with jQuery Chosen Plugin

React Integrating with Other Libraries Integrating with DOM Manipulation Plugins How to Approach the Problem

React Components and Props Props are Read-Only

React Components and Props Extracting Components

React Components and Props Composing Components

React Components and Props Rendering a Component

React Components and Props Function and Class Components

React Without ES6 Mixins

React Without ES6 Autobinding

React Without ES6 Setting the Initial State

React Without ES6 Declaring Default Props

React Without ES6

React Babel, JSX, and Build Steps How can I write comments in JSX?

React Styling and CSS How do I add CSS classes to components?

React JSX In Depth Children in JSX Booleans, Null, and Undefined Are Ignored