A hyperscript render engine.
Community
⚡ Fast: blazing fast virtual DOM.
🎯 Tiny: 12.6 KB minified + gzipped.
🎨 Universal: works in browsers, Weex, Node.js, Mini-program, WebGL and could works more container that implement driver specification.
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
Example
JSX DSL
// Hello.jsx
import {createElement, Component} from 'rax';
export default class extends Component {
state = {
name: 'world'
};
onChange = ()=>{
this.setState({
name: 'rax'
});
};
render() {
return (
<view style={styles.hello}>
<text style={styles.title} onClick={this.onChange}>
Hello {this.state.name}
</text>
</view>
);
}
}
const styles = {
hello: {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
title: {
fontSize: '40px',
textAlign: 'center'
}
};
SFC(Single File Component) DSL
SFC is a Vue-like DSL that will compile to JSX DSL.
<!-- hello.html -->
<template>
<view class="hello">
<text class="title" @click="change">Hello {{name}}</text>
</view>
</template>
<script>
export default {
data: function () {
return {
name: 'world'
}
},
methods: {
change () {
this.name = 'rax';
}
}
}
</script>
<style>
.hello {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 40px;
text-align: center;
}
</style>
// app.js
import {render} from 'rax';
import Hello from './hello';
render(<Hello name="world" />);
Rax Renderers
- 🚥 rax-test-renderer: Rax renderer for snapshot testing.
- 💻 rax-server-renderer: Rax renderer for server-side render.
Compatible with React Components
Usage with Webpack or Babel makes React-based components work with Rax, without any code changes.
Usage with Webpack
Add an alias for react
and react-dom
:
{
// ...
resolve: {
alias: {
'react': 'rax',
'react-dom': 'rax-dom',
// Not necessary unless you consume a module using `createClass`
'create-react-class': "rax/lib/createClass"
}
}
// ...
}
Usage with Babel
Install the babel plugin for aliasing: npm install --save-dev babel-plugin-module-resolver
Add an alias for react
and react-dom
in your .babelrc:
{
// ...
"plugins": [
["module-resolver", {
"root": ["."],
"alias": {
"react": "rax",
"react-dom": "rax-dom",
// Not necessary unless you consume a module using `createClass`
"create-react-class": "rax/lib/createClass"
}
}]
]
// ...
}
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.
- Use the
rax-redux
module in your app - Simply replace code follow the Redux DevTools extension usage doc
- Use the
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
createslib
anddist
folder with all the packages.npm start
start local server withexamples
folder.
Core Team
@yuanyan Core |
@imsobear Development |
@yacheng Components |
@boiawang Babel Loaders & Plugins |
@noyobo Webpack Plugins |