Monja

Example Todo app built with Monja.js.

Implementing my own version of React.

Introduction

This project aims to build a simplified version of the React framework. Particularly, its reconciliation algorithm and the Fiber architecture.

Based on @pomber`s Didact.

Features

• Functional components.
• JSX support.
• useState hook.
• useEffect hook.
• Reconciliation by key.
• Style prop as object.

Installing the package

With npm:

npm install monja

With yarn:

yarn add monja

Example

import Monja from "monja";

function App() {
  return <h1>Monja.js</h1>;
}

const container = document.getElementById("root");

Monja.render(<App />, container);

Run the project locally

1. Clone the project

   $ git clone https://github.com/gustavomonjardim/monja.git

2. Install the dependencies:

   $ yarn

3. Run the project on watch mode

   $ yarn start

4. Build the package

   yarn build

Run an example Todo App

yarn start:example

Tools

This project is bundled with rollup.

Helpful resources

• Build your own React - A Step by step tutorial teaching you how to build your own version of react.
• React as a UI Runtime - A deep dive into React by Dan Abramov.
• Inside Fiber: in-depth overview of the new reconciliation algorithm in React - A deep dive into React`s reconciliation algorithm by Max Koretskyi.
• React Fiber Architecture - An introduction to React Fiber by Andrew Clark.
• A Cartoon Intro to Fiber - A talk about React Fiber by Lin Clark at React Conf 2017.

Future works

• Add static typing with Typescript

License

Licensed under the MIT License.