Mini-react is a library built to basically study fiber algorithm and implementation, it was inspired by our beloved React.
Before we begin, lets see the architecture of this application, and how it was built
For this, I decided to use a monorepo file structure so in case we need to evolve the application, we can use the folders and packages (inside packages folder) independently.
Mini-react have 3 main packages, 🔍 lets have a closer look:
The mini-react package concerns only components creation (Component class) and node parsing (Node) Needs to be used with a specific renderer (like mini-react-dom for instance)
This package serves as the entry point to the DOM and server renderers. It is intended to be paired with the generic mini-react package (☝️)
When you use React, at a single point in time you can think of the render() function as creating a tree of React elements. On the next state or props update, that render() function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.
This is a very very simple implementation of React's new algorith known as Fiber, it was built based on the Lin Clark's cartoon exponation, if you haven't seen yet, it's very cool and fun to watch! (Give her a 👍 after)
💡 Wanna hear something cool? I built this last package (mini-react-reconciler) totally independent from the others, it doesnt need neither mini-react-dom, or mini-react to work, meaning that: if you like to add new renderers like mini-react-native, you can use this same package to reconcile your mobile application. Cool, right? Some crazy dependency injection going'on here.
First of all, you need to install the dependencies used to build the project
npm installThen, start the project
npm run startThe default server address will be: http://localhost:10001
npm start will run the tests already, but if you like to run only tests:
npm run testsmini-react uses Rollup as build tool.
Rollup was created for a different reason: to build flat distributables of JavaScript libraries as efficiently as possible, taking advantage of the ingenious design of ES2015 modules.