@mjackson/my-react

myReact

myReact is a lightweight, drop-in replacement for React that avoids using ES6 classes and this.

In myReact, you don't create classes or extend React.Component. Instead, you just export a bunch of functions from a JavaScript module.

Instead of using this to access the component instance in methods, every method receives the instance as the first argument, usually called my (similar to how instance methods in Python always receive self as the initial argument). This helps developers avoid many common mistakes including:

• forgetting to bind the appropriate this in event handler methods
• getting the correct this inside inline event handlers in the render method
• getting the correct this inside forEach/map in the render method

Other minor improvements to the ES6 class-based React component API include:

• setupComponent instead of constructor; avoids the super boilerplate
• getNextState instead of componentWillReceiveProps; automatically applies the return value to my.state
• getElement instead of render; it's more descriptive

Now, I know, that sounds like a lot. Let's see what it looks like!

Here's how you might create a simple <TodoList> component:

import MyReact from "@mjackson/my-react"

const displayName = "TodoList"

const defaultProps = {
  title: "Todo List",
  initialItems: []
}

function setupComponent(my) {
  my.state = { items: my.props.initialItems }
}

function handleSubmit(my, event) {
  event.preventDefault()

  const todo = my.refs.todo

  my.setState({
    items: my.state.items.concat([todo.value])
  })

  todo.form.reset()
}

function getElement(my) {
  return (
    <div>
      <h1>{my.props.title}</h1>
      <ol>{my.state.items.map(item => <li>{item}</li>)}</ol>
      <form onSubmit={my.handleSubmit}>
        <input ref="todo" type="text" />
      </form>
    </div>
  )
}

export default {
  displayName,
  defaultProps,
  setupComponent,
  handleSubmit,
  getElement
}

Assuming the above code was saved in TodoList.js, you could use it just like any other React component (see Usage below):

import MyReact from "@mjackson/my-react"
import ReactDOM from "react-dom"
import TodoList from "./TodoList"

const node = document.getElementById("app")

ReactDOM.render(<TodoList />, node)

You can also put your own properties on the my object that aren't needed for rendering, like timers and references to in-flight XHR objects. Each time a lifecycle method is invoked for a given component, it receives the same instance.

Note in the following example how my.timer is set in componentDidMount and then cleaned up in componentWillUnmount.

import MyReact from "@mjackson/my-react"

const displayName = "Counter"

function setupComponent(my) {
  my.state = { count: 0 }
}

function componentDidMount(my) {
  my.timer = setInterval(() => {
    my.setState({ count: my.state.count + 1 })
  }, 1000)
}

function componentWillUnmount(my) {
  clearInterval(my.timer)
}

function getElement(my) {
  return <p>The current count is {my.state.count}</p>
}

export default {
  displayName,
  setupComponent,
  componentDidMount,
  componentWillUnmount,
  getElement
}

Installation

yarn add @mjackson/my-react

Usage

Assuming you're already using Babel for compiling JSX, you can just do:

import MyReact from "@mjackson/my-react"

// Tell Babel to transform JSX into MyReact.createElement calls
/** @jsx MyReact.createElement */

If you'd rather not put that comment in every file where you're using JSX, you can just put the following in your .babelrc:

{
  "plugins": ["transform-react-jsx", { "pragma": "MyReact.createElement" }]
}

Feedback

I'd love to get some feedback on this approach. Please feel free to reach out on Twitter or GitHub.

Thanks!