luozhihao / rax

:tophat: A universal React-compatible render engine.

A universal React-compatible render engine.

---

Rax is a universal JavaScript library with a largely React-compatible API. If you use React, you already know how to use Rax.

⚡ Fast: blazing fast virtual DOM.

🎯 Tiny: 8.0 KB minified + gzipped.

🎨 Universal: works in browsers, Weex, and Node.js.

Size Comparison

Angular 1.5.8 - 55.4kb (gzip)

React 15.3.2 - 43.7kb (gzip)

Vue 2.1.8 - 17.9kb (gzip)

Rax 0.0.2 - 8.0kb (gzip)

Server-side Rendering Comparison

Benchmark run on a MacBook Pro 2.4GHz Intel Core i5 and 8GB 1600MHz DDR3 with Node.js v6.9.2. For more information, please refer to benchmark repository.

Library	renderToSring
React@15.4.2	94.93 ops/sec
Rax@0.1.2	154 ops/sec(faster)

Quick Start

Install the Rax CLI tools to init project:

npm install rax-cli -g
rax init YourProjectName

Start local server to launch project:

cd YourProjectName
npm run start

Examples

import {createElement, Component, render} from 'rax';
import {Text} from 'rax-components';

class Hello extends Component {
  render() {
    return <Text style={styles.title}>Hello {this.props.name}</Text>;
  }
}

const styles = {
  title: {
    color: '#ff4400',
    fontSize: 48,
    fontWeight: 'bold',
  }
};

render(<Hello name="world" />);

More examples take a look at the examples folder:

• Components
• Redux
• Game2048
• Drag
• TicTacToe
• Todo
• UIKit
• Profile
• Parallax

Rax Renderers

• 🚥 rax-test-renderer: Rax renderer for snapshot testing.
• 💻 rax-server-renderer: Rax renderer for server-side render.

Universal Libraries

• 🌏 universal-env: A universal environment utilities.
• ➿ universal-transition: A universal transition API.
• 📱 universal-platform: A universal Platform API.
• 👙 universal-stylesheet: A universal StyleSheet API.
• 👆 universal-panresponder: A universal PanResponder API.
• 💬 universal-toast: A universal Toast API.
• 📮 universal-jsonp: A universal JSONP utilities.

Developer Tools

• React Developer Tools: Allow you inspect and modify the state of your Rax components at runtime in Chrome Developer Tools.

• Redux DevTools extension: Provide power-ups for your Redux development workflow.
  1. Use the rax-redux module in your app
  2. Simply replace code follow the Redux DevTools extension usage doc

Contributing

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.

Development Workflow

After cloning rax, run npm install to fetch its dependencies.
Run npm run setup link and bootstrap project before development. Then, you can run several commands:

• npm run lint checks the code style.
• npm test runs the complete test suite.
• npm test -- --watch runs an interactive test watcher.
• npm test <pattern> runs tests with matching filenames.
• npm run build creates lib and dist folder with all the packages.
• npm start start local server with examples folder.

---

⬆ back to top