This is very small implementation of the idea of React+Redux with a very light weight approach. The result is a small lib (~150 lines of code, 6kb incl dependencies gzipped) and superfast (based on snabbdom) with batteries included (a minmal version of Redux+Hooks).
For small projects you don't want to spend time on upgrading a huge dependency tree when you just have a few JSX components. Pureact has a minimal implementation where you can solve the basic needs. Render a couple of components, updating state and fetching data from external API:s. In a few years when you want to update your code you will not need to go through a huge list of dependencies - Pureact only has one dependency.
This is a very stratight forward starting point. Just create two files: index.html and index.js:
index.html:
<html><body><script src="index.js"></script></html>index.js:
import React, { render } from 'pureact'
const state = { user: 'John' }
const App = (props) => <h1>Hi {props.user}</h1>
render(<App {...state} />, document.body)$> parcel index.html- 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 )
npm i pureact
npm i -g parcel
"plugins": [
["transform-react-jsx", { "pragma": "Pureact.createElement" }]
]
Then define your app with pure functions:
const props = {name}
const App = (props) => <h1>Hi {props.user}</h1>
Pureact.render(<App {props} />, document.body))// starts dev server and listens to changes
parcel index.html
// package
parcel build index.html // 16kb
...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 Appimport 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)
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>
)
}- 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
- For small projects you don't want 1000s of dependencies to update each time
The lib has been used in production for four years 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 code 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.
MIT, © Copyright 2023 Christian Landgren