Writing React

Before writing a React application, we need to set a goal. With a clear goal, we can complete our React development step by step in a more structured manner.

Core Objectives

1. Write the createElement function

2. Write the render function

3. Implement Concurrent Mode

4. Implement Fibers

5. Implement Render and Commit phases

6. Implement Reconciliation

7. Implement functional components

8. Implement basic Hooks

Additional Tasks

1. Set up a webpack compilation environment.

2. Test our React code using Jest.

3. Manage npm packages with Lerna.

Understanding How JSX is Transformed into createElement

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

---After transpilation with @babel/plugin-transform-react-jsx---

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

Note: In React 17, JSX is no longer transpiled to call createElement. Instead, it automatically imports and invokes a new entry function from the React package.

Specific Logic and Ideas for a Simplified React Implementation

1. Use requestIdleCallback for polling to trigger task execution during idle time, and check for available work units.

2. Process the object generated by createElement, assign it as a work unit, wait for the browser's idle time to process the task, and mount it to the FiberRoot.

3. Start processing the work unit with performUnitOfWork. During the initial rendering, create the actual DOM node, but do not append it to the DOM tree yet (i.e., no appendChild call at this stage).

4. During work unit processing, execute reconcileChildren to handle the reconciliation logic. Create new Fiber nodes, which include a flags property to indicate UI mutations that need to be performed.

5. When the traversal of the Fiber tree is complete, and each Fiber node has its mutation status determined, enter the Commit phase.

6. In the Commit phase: first, delete Fiber nodes marked with the deletion flag. Then, start a depth-first traversal from the child of the work-in-progress FiberRoot, and apply the necessary modifications to the actual DOM.

Enabling ESM Support in Jest

Install the Babel plugin for converting ESM to CommonJS:

npm install --save-dev @babel/plugin-transform-modules-commonjs

Add the following configuration to .babelrc:

{
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}