ReReact

A React implementation from scratch because why not? I hate my life and I hate JavaScript even more so I am on a path of self destruction

Overview

This project implements a functional version of React to understand the core principles behind React's design. It includes:

• Virtual DOM implementation
• Component creation with createElement
• Component rendering with render
• Class-based components with Component class
• Functional components using hooks
• State management with setState and hooks
• Event handling
• Basic reconciliation algorithm
• Component lifecycle methods
• CSS styling integration

Project Structure

rereact/
├── public/
│   ├── index.html            # Main HTML entry point
│   └── styles.css            # Global styles
├── src/
│   ├── core/
│   │   ├── Component.js      # Class component implementation
│   │   ├── Counter.js        # Example class component
│   │   ├── createElement.js  # Virtual DOM element creation
│   │   ├── hooks.js          # Hooks implementation
│   │   ├── reconciler.js     # DOM reconciliation logic
│   │   ├── render.js         # DOM rendering implementation
│   │   └── Timer.js          # Example functional component
│   └── index.js              # Entry point and API exports
├── .babelrc
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js

Getting Started

1. Install dependencies:

   npm install
   

2. Start the development server:

   npm start
   

3. Build for production:

   npm run build
   

Features Implemented

• Virtual DOM elements creation
• Basic rendering to the DOM
• Class components
• Component props
• State management
• Reconciliation algorithm
• Lifecycle methods
• Event handling
• Hooks API
  • useState
  • useEffect
  • useRef
  • useMemo
  • useCallback
• Conditional rendering
• CSS styling integration

How It Works

Virtual DOM

ReReact uses a virtual DOM approach similar to React. The virtual DOM is a lightweight JavaScript representation of the actual DOM that allows for efficient updates.

Component Rendering

1. Components are created using createElement function
2. The rendering process converts virtual DOM to actual DOM elements
3. For updates, a reconciliation process compares old and new virtual DOM trees and makes minimal changes

State Management

• Class components use the setState method
• Functional components use the useState hook
• Both trigger re-renders when state changes

Lifecycle Methods

Class components implement the standard lifecycle methods:

• componentWillMount
• componentDidMount
• componentWillUpdate
• componentDidUpdate
• componentWillUnmount

Hooks

Functional components can use hooks like:

• useState - For state management
• useEffect - For side effects and lifecycle events
• useRef - For persistent mutable values
• useMemo - For memoized values
• useCallback - For memoized callbacks

Learning Resources

• React Documentation
• Build your own React
• Inside Fiber
• React Hooks