A universal React-compatible render engine.
Community
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, Node.js and could works more container that implement driver specification.
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
import {createElement, Component, render} from 'rax';
import Text from 'rax-text';
class Hello extends Component {
render() {
return [
<Text style={styles.title}>Hello Rax</Text>,
<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:
- 🚥 rax-test-renderer: Rax renderer for snapshot testing.
- 💻 rax-server-renderer: Rax renderer for server-side render.
- 🌏 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.
- 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.
- Use the
rax-redux
module in your app - Simply replace code follow the Redux DevTools extension usage doc
- Use the
- rax-animated
- rax-barcode
- rax-button
- rax-calendar
- rax-canvas
- rax-charts
- rax-checkbox
- rax-countdown
- rax-counter
- rax-datepicker
- rax-gotop
- rax-grid
- rax-icon
- rax-image
- rax-link
- rax-listview
- rax-menulist
- rax-modal
- rax-multirow
- rax-navigation
- rax-picker
- rax-picture
- rax-player
- rax-qrcode
- rax-recyclerview
- rax-redux
- rax-refreshcontrol
- rax-scrollview
- rax-slider
- rax-switch
- rax-tabbar
- rax-tabheader
- rax-table
- rax-text
- rax-textinput
- rax-timepicker
- rax-touchable
- rax-video
- rax-view
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.
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
createslib
anddist
folder with all the packages.npm start
start local server withexamples
folder.
![]() @yuanyan Core |
![]() @imsobear Development |
![]() @yacheng Components |
![]() @boiawang Babel Loaders & Plugins |
![]() @noyobo Webpack Plugins |