What?

Rebel.js is a functional clone of React for my own learning purposes. It does not seek to be more efficient than React or to add features, it only seeks to replicate React's API in a way that you could drop-in Rebel and your app would still function the same.

Hopefully through creating it, I can better understand the inner workings of a library which is sometimes seen as a bit of black-box magic :)

Features

Rebel, at the moment implements:

• A component tree reconciliation algorithm
• DOM rendering
• Persisted hooks & state including useState and useEffect

Example

The goal is to be able to take any file made for React, and drop in Rebel libraries instead. For example:

import { useState, useEffect } from 'rebel'
import { render } from 'rebel-dom'

const Message = ({ count }) => {
  return <div>You've clicked {count} times!</div>
}

const Counter = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`Effect: Count is ${count}!`)
  }, [count])

  return (
    <div>
      <Message count={count} />
      <button onClick={() => setCount(count + 1)}>Click me!</button>
    </div>
  )
}

render(<Counter />, document.getElementById('root'))

Note: Rebel supports JSX. See webpack-project

---

by Adam Soutar