0.1.1 • Published 4 years ago
monja v0.1.1
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.
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
Clone the project
$ git clone https://github.com/gustavomonjardim/monja.git
Install the dependencies:
$ yarn
Run the project on watch mode
$ yarn start
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.