pureact

v1.5.4

Published

2 years ago

This is very small implementation of the idea of React+Redux with a very light weight approach. The result is a small lib (65 lines of code, 10kb incl dependencies gzipped) and superfast (based on snabbdom) with batteries included (a minmal version of Red

Downloads

0High
0Medium
0Low

irony

Pureact - what React should have been if we knew what it was when it was discovered

Get started

Pure functions are a fantastic way to represent a component and an entire app.

    // index.html
    <html><body><script src="index.js"></script></html>

// index.js
import Pureact from 'pureact'
const state = { user: 'John' }
const App = (props) => <h1>Hi {props.user}</h1>
Pureact.render(<App {...state} />, document.body)

    // start your app
    $> parcel index.html

Demo

Mandatkollen, built with pureact: https://mandatkollen.se (code: https://github.com/iteam1337/mandatkollen)
Todo app, code examples: https://pureact-todo.irony.now.sh (code: https://github.com/irony/pureact-todo )

Install Pureact

npm i pureact
npm i -g parcel

Add pureact pragma in .babelrc

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

Start coding

Then define your app with pure functions:

    const props = {name}
    const App = (props) => <h1>Hi {props.user}</h1>
    Pureact.render(<App {props} />, document.body))

Run and ship it

// starts dev server and listens to changes
parcel index.html

// package
parcel build index.html // 16kb

Also pure components

...or using components with a pure render function. Only render method is supported, no other lifetime or state methods are implemented (intentional to keep the pure fashion)

import Pureact, { Component } from 'pureact'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React {this.props.name}!</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    )
  }
}

export default App

A lightweight redux-compatible store is also included

import Pureact, { createStore } from 'pureact'

const reducer = (state, action) => ({
  ...state,
  name: action.name, // naive example
})

const store = createStore(reducer)

Plug it in in your render lifecycle:

const App = (props) => <h1>{props.name}</h1>
let oldTree

store.subscribe(() => {
  const state = store.getState()
  oldTree = Pureact.render(<App {...state} />, document.body, oldTree)
})

To dispatch events, just use the dispatcher

store.dispatch({
  type: 'UPDATE_NAME',
  name,
})

Note that both reducers and actions can be asyncronous (!)

   const reducer = async (state, action) => ({
     user: await user(state.user, action)
   })

   store.dispatch(() => fetch('/user').then(user => ({ type: 'UPDATE_USER', user}))

(both promises and thunks are supported)

Hooks are also included (beta - only works for non-lists right now)

import React, { useState } from 'pureact'

const Name = (props) => {
  const [name, setName] = useState('')
  return (
    <div>
      <input
        type="text"
        value={name}
        onchange={(e) => setName(e.target.value)}
      />
    </div>
  )
}

Motivation

React is a great idea but has become bloated
Redux is a great idea but should have been included
Pure functions are a great way of describing components

Current state

The lib has been used in production for a year without any problems. With the latest development in React which moves in the same direction (pure functions and state/hooks included you start to wonder why not just use 66 lines of clde instead of thousands?

Let me know if you miss anything important. Either send a pull request or issue. I'm going to try to keep this lib as tiny as possible.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme