### Quick Start Commands

Source: https://github.com/alibaba/rax/blob/master/examples/README.md

Provides essential commands for installing dependencies, running the project in development mode, and building the project.

```shell
npm install

# dev mode
npm run start

# build mode
npm run build
```

--------------------------------

### Start Rax Project Development

Source: https://github.com/alibaba/rax/blob/master/README.md

These commands are used to navigate into the project directory, install dependencies, and start the local development server for a Rax project.

```sh
cd <YourProjectName>
npm install
npm run start
```

--------------------------------

### Install rax-server

Source: https://github.com/alibaba/rax/blob/master/packages/rax-server/README.md

Installs the rax-server package using npm.

```bash
npm install rax-server --save
```

--------------------------------

### Rax Miniapp Examples

Source: https://github.com/alibaba/rax/blob/master/examples/README.md

Demonstrates various Rax miniapp functionalities, including native custom components, plugin components, native pages, and runtime usage of compiled components.

```shell
# with-miniapp-native-custom-component: Using miniapp native custom components (local components + npm components)
# with-miniapp-plugin-component: Using miniapp plugin components + split-end build
# with-miniapp-native-page: Using native pages
# use-rax-compiled-component-in-runtime-miniapp: Rax miniapp runtime project using Rax compile-time components
```

--------------------------------

### Basic Rax Usage Example

Source: https://github.com/alibaba/rax/blob/master/packages/rax/README.md

A simple example demonstrating how to create a component and render it to the DOM using Rax and the driver-dom package. It shows the basic structure of a Rax application.

```jsx
import {createElement, render} from 'rax';
import * as DriverDOM from 'driver-dom';

function MyComponent() {
  return <div>Hello World</div>;
}

render(<MyComponent />, document.body, { driver: DriverDOM });
```

--------------------------------

### Install Rax

Source: https://github.com/alibaba/rax/blob/master/packages/rax/README.md

Installs the Rax package using npm. This is the primary installation command for using Rax in your project.

```sh
npm install --save rax
```

--------------------------------

### Install rax-server-renderer

Source: https://github.com/alibaba/rax/blob/master/packages/rax-server-renderer/README.md

This snippet shows how to install the rax-server-renderer package using npm.

```sh
$ npm install --save rax-server-renderer
```

--------------------------------

### Create a New Rax Project

Source: https://github.com/alibaba/rax/blob/master/README.md

This command initializes a new Rax project using the create-rax tool. It's the starting point for building a new Rax application.

```sh
npm init rax <YourProjectName>
```

--------------------------------

### Install rax-redux

Source: https://github.com/alibaba/rax/blob/master/packages/rax-redux/README.md

Installs the rax-redux package using npm.

```sh
npm install --save rax-redux
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/rax/blob/master/examples/get-element/README.md

Runs the Rax application in development mode, enabling hot reloading and easy debugging. Opens the application at http://localhost:9999.

```bash
npm run start

# Opens http://localhost:9999
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/rax/blob/master/examples/with-miniapp-plugin-component/README.md

Runs the Rax application in development mode, enabling hot reloading and easy debugging. Opens the application at http://localhost:9999.

```bash
npm run start

# Opens http://localhost:9999
```

--------------------------------

### Install rax-test-renderer

Source: https://github.com/alibaba/rax/blob/master/packages/rax-test-renderer/README.md

Installs the rax-test-renderer package as a development dependency using npm.

```sh
npm install --save-dev rax-test-renderer
```

--------------------------------

### Install driver-webgl

Source: https://github.com/alibaba/rax/blob/master/packages/driver-webgl/README.md

Installs the WebGL driver for Rax using npm.

```bash
$ npm install --save driver-webgl
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/rax/blob/master/examples/page-lifecycle-with-router/README.md

Runs the Rax application in development mode, enabling hot reloading and easy debugging. Opens the application at http://localhost:9999.

```bash
npm run start

# Opens http://localhost:9999
```

--------------------------------

### Install driver-dom

Source: https://github.com/alibaba/rax/blob/master/packages/driver-dom/README.md

Installs the driver-dom package using npm. This is the first step to using the DOM driver with Rax.

```bash
npm install --save driver-dom
```

--------------------------------

### Install driver-universal

Source: https://github.com/alibaba/rax/blob/master/packages/driver-universal/README.md

This snippet shows the command to install the driver-universal package using npm.

```bash
npm install --save driver-universal
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/rax/blob/master/examples/with-miniapp-native-custom-component/README.md

Runs the Rax application in development mode, enabling hot reloading and easy debugging. Opens the application at http://localhost:9999.

```bash
npm run start

# Opens http://localhost:9999
```

--------------------------------

### Basic Usage of RaxServer

Source: https://github.com/alibaba/rax/blob/master/packages/rax-server/README.md

Demonstrates the basic setup and usage of RaxServer for server-side rendering with Node.js http module.

```javascript
const http = require('http');
const RaxServer = require('rax-server');
const PORT = 8080;
const server = new RaxServer({
  // ...
});

const app = new http.createServer((req, res) => {
  if (req.pathname === '/index') {
    server.render(req, res, {
      page: 'index'
    });
  } else {
    // ...
  }
});

app.listen(PORT, () => {
  console.log(`SSR running on port ${PORT}`);
});
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/rax/blob/master/examples/event-handler/README.md

Runs the Rax application in development mode, enabling hot reloading and easy debugging. Opens the application at http://localhost:9999.

```bash
npm run start

# Opens http://localhost:9999
```

--------------------------------

### Install driver-server with npm

Source: https://github.com/alibaba/rax/blob/master/packages/driver-server/README.md

Installs the driver-server package as a project dependency using npm.

```bash
$ npm install --save driver-server
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/rax/blob/master/examples/with-miniapp-native-page/README.md

Runs the Rax application in development mode. This command starts a local development server, typically accessible at http://localhost:9999, and enables hot reloading for faster development cycles.

```bash
npm run start
```

--------------------------------

### Rax Document/Element APIs

Source: https://github.com/alibaba/rax/blob/master/examples/README.md

Shows how to use document and element related APIs, such as getElementXXX.

```shell
# get-element: document/element getElementXXX related APIs
```

--------------------------------

### Rax Lifecycle and Event Handling

Source: https://github.com/alibaba/rax/blob/master/examples/README.md

Illustrates the usage of application and page lifecycles, including routing, and demonstrates event binding for miniapp compilation.

```shell
# app-lifecycle: Using app lifecycle
# page-lifecycle-with-router: Using page lifecycle + router jump
# event-handler: Event binding (compile-time miniapp)
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/rax/blob/master/examples/app-lifecycle/README.md

Runs the Rax application in development mode. This command starts a local development server, typically accessible at http://localhost:9999, and enables hot reloading for faster development cycles.

```bash
npm run start
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/rax/blob/master/examples/use-rax-compiled-component-in-runtime-miniapp/README.md

Runs the Rax application in development mode. This command starts a local development server, typically accessible at http://localhost:9999, and enables hot reloading for faster development cycles.

```bash
npm run start
```

--------------------------------

### Install Weex Driver

Source: https://github.com/alibaba/rax/blob/master/packages/driver-weex/README.md

This snippet shows the npm command to install the Weex driver for Rax.

```bash
npm install --save driver-weex
```

--------------------------------

### Usage Example

Source: https://github.com/alibaba/rax/blob/master/packages/rax-redux/README.md

Demonstrates how to use the Provider component from rax-redux to connect a Rax application to a Redux store.

```js
import { createElement, render } from 'rax';
import { Provider } from 'rax-redux';

import store from './store';
import App from './App';

render(
  <Provider store={store}>
    <App />
  </Provider>
);
```

--------------------------------

### Install Rax Types for TypeScript

Source: https://github.com/alibaba/rax/blob/master/packages/rax/README.md

Installs the TypeScript type definitions for Rax, enabling better type checking and autocompletion when using Rax with TypeScript.

```sh
npm install --save-dev @types/rax
```

--------------------------------

### Basic Usage of driver-universal in Rax

Source: https://github.com/alibaba/rax/blob/master/packages/driver-universal/README.md

This example demonstrates how to import and use the DriverUniversal in a Rax application to render a component. It includes importing necessary Rax modules and the driver itself.

```jsx
import { createElement, render } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import DriverUniversal from 'driver-universal';

function Example() {
  return (
    <View>
      <Image width="560" height="560" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg" />
    </View>
  );
}

render(<Example />, null, {
  driver: DriverUniversal
});
```

--------------------------------

### Rax Server-Side Rendering Example

Source: https://github.com/alibaba/rax/blob/master/packages/driver-server/README.md

Demonstrates how to use the ServerDriver for server-side rendering in a Rax application. It includes importing necessary components, defining a simple Rax component, and rendering it with the ServerDriver when running in a Node.js environment.

```jsx
import {createElement, Component, render} from 'rax';
import ServerDriver from 'driver-server';
import {isNode} from 'universal-env';

class Example extends Component {
  render() {
    return (
      <div>
        <img width="560" height="560" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg" />
      </div>
    );
  }
}

render(<Example />, null, {
  driver: isNode ? ServerDriver : null
});
```

--------------------------------

### Use Weex Driver in Rax

Source: https://github.com/alibaba/rax/blob/master/packages/driver-weex/README.md

This example demonstrates how to import and use the Weex driver within a Rax component for rendering.

```jsx
import {createElement, Component, render} from 'rax';
import * as WeexDriver from 'driver-weex';

class Example extends Component {
  render() {
    return (
      <div>
        <img width="560" height="560" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg" />
      </div>
    );
  }
}

render(<Example />, null, {
  driver: WeexDriver
});
```

--------------------------------

### Node.js Usage Examples

Source: https://github.com/alibaba/rax/blob/master/packages/style-unit/README.md

Demonstrates how to use the `convertUnit` function in a Node.js environment for both Web and Weex platforms.

```javascript
convertUnit('500rpx', 'width', 'weex')
```

```javascript
convertUnit('500rpx', 'width', 'web')
```

--------------------------------

### Basic Document Usage

Source: https://github.com/alibaba/rax/blob/master/packages/rax-document/README.md

Demonstrates the basic structure of a document using rax-document components like Root, Data, Style, and Script. This setup is suitable for standard web applications.

```jsx
import { createElement } from 'rax';
import { Root, Data, Style, Script } from 'rax-document';

export default () => {
  return (
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <title>ssr-document-demo</title>
        <Style />
      </head>
      <body>
        {/* root container */}
        <Root />
        {/* initial data from server side */}
        <Data />
        <Script />
      </body>
    </html>
  );
}
```

--------------------------------

### Basic Rax App Initialization

Source: https://github.com/alibaba/rax/blob/master/packages/rax-app/README.md

Demonstrates how to import and run a Rax application using the runApp function. This is the standard entry point for a Rax application.

```javascript
import { runApp } from 'rax-app';
import appConfig from './app.json';

runApp(appConfig);
```

--------------------------------

### RaxServer Initialization and Rendering with Express

Source: https://github.com/alibaba/rax/blob/master/packages/rax-server/README.md

Shows how to initialize RaxServer with various options including document, shell, and pages, and integrate it with an Express application for rendering specific pages.

```javascript
const { readFileSync } = require('fs');
const express = require('express');
const RaxServer = require('rax-server');

const PORT = 8080;
const app = express();

const options = {
  document: {
    component: require('./dist/server/document.js'),
  },
  shell: {
    component: require('./dist/server/shell.js'),
  },
  pages: {
    index: {
      title: 'Index',
      component: require('./dist/server/index.js'),
      styles: ['./client/index.css'],
      scripts: ['./client/index.js']
    },
    bar: {
      component: require('./dsit2/server/bar.js')
    }
  }
};

const server = new RaxServer(options);

app.get('/', (req, res) => {
  server.render(req, res, {
    page: 'index'
  });
});

app.get('/foo/bar/baz', (req, res) => {
  server.render(req, res, {
    page: 'bar'
  });
});

app.listen(PORT, () => {
  console.log(`app listening on port ${PORT}`);
});
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/rax/blob/master/examples/get-element/README.md

Builds the Rax application for production deployment. The output is placed in the 'build' folder, optimized for performance.

```bash
npm run build
```

--------------------------------

### Create a new Rax project

Source: https://github.com/alibaba/rax/blob/master/packages/rax-create-portal/README.md

Use the rax-create-portal command to initialize a new Rax project. This command sets up the basic project structure and necessary dependencies.

```bash
rax-create-portal my-rax-app
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/rax/blob/master/examples/with-miniapp-plugin-component/README.md

Builds the Rax application for production deployment. The output is placed in the 'build' folder, optimized for performance.

```bash
npm run build
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/rax/blob/master/examples/event-handler/README.md

Builds the Rax application for production deployment. The output is placed in the 'build' folder, optimized for performance.

```bash
npm run build
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/rax/blob/master/examples/page-lifecycle-with-router/README.md

Builds the Rax application for production deployment. The output is placed in the 'build' folder, optimized for performance.

```bash
npm run build
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/rax/blob/master/examples/with-miniapp-native-custom-component/README.md

Builds the Rax application for production deployment. The output is placed in the 'build' folder, optimized for performance.

```bash
npm run build
```

--------------------------------

### Create a new Rax project

Source: https://github.com/alibaba/rax/blob/master/packages/rax-create-factory/README.md

Use the rax-create-factory command to initialize a new Rax project with default settings.

```bash
npx rax-create-factory my-rax-app
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/rax/blob/master/examples/with-miniapp-native-page/README.md

Builds the Rax application for production deployment. This command optimizes the application assets and bundles them into the `build` folder, preparing them for static hosting or integration into a larger application.

```bash
npm run build
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/rax/blob/master/examples/app-lifecycle/README.md

Builds the Rax application for production deployment. This command optimizes the application assets and bundles them into the `build` folder, preparing them for static hosting or integration into a larger application.

```bash
npm run build
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/rax/blob/master/examples/use-rax-compiled-component-in-runtime-miniapp/README.md

Builds the Rax application for production deployment. This command optimizes the application assets and bundles them into the `build` folder, preparing them for static hosting or integration into a larger application.

```bash
npm run build
```

--------------------------------

### Get Element by ID in Rax

Source: https://github.com/alibaba/rax/blob/master/packages/rax-get-element-by-id/README.md

This snippet demonstrates how to use the `getElementById` function from the `rax-get-element-by-id` module to retrieve a DOM element by its ID. It assumes you have a Rax component with an element that has a specific ID.

```javascript
import { getElementById } from 'rax-get-element-by-id';

// Assuming you have a Rax component like this:
// class MyComponent extends Component {
//   render() {
//     return (
//       <div id="my-element">Hello Rax!</div>
//     );
//   }
// }

// To get the element:
const element = getElementById('my-element');

if (element) {
  console.log('Element found:', element);
  // You can now manipulate the element, e.g., change its style
  // element.style.color = 'blue';
} else {
  console.log('Element not found.');
}
```

--------------------------------

### Rax Benchmarking Commands

Source: https://github.com/alibaba/rax/blob/master/scripts/bench/README.md

Provides various npm commands to build and run benchmarks for the Rax framework. Supports options for local execution, selecting specific frameworks and benchmarks, and skipping the build process.

```bash
# build and run all benchmarks
npm start

# only run `rax-local` , and compare data in the `results` fold (to improve bench times)
npm start -- --local

# run specific frameworks and benchmarks with prefixes like in the following example
npm start -- --framework rax preact --benchmark 01_ 02_

# skip build
npm start -- --skip-build

# build a single framework
cd frameworks/rax
npm install
npm run build-prod
```

--------------------------------

### Rax App API Reference

Source: https://github.com/alibaba/rax/blob/master/packages/rax-app/README.md

Provides details on the core functions available in the rax-app library, including application initialization, routing, and lifecycle event hooks.

```APIDOC
runApp(appConfig)
  - Initializes and runs the Rax application.
  - Parameters:
    - appConfig: An object containing the application configuration.

withRouter(Component)
  - A higher-order component that provides routing capabilities to a React component.
  - Parameters:
    - Component: The component to wrap with routing functionality.
  - Returns: A new component with routing props.

useAppLaunch(callback)
  - A hook to register a callback function that runs when the application launches.
  - Parameters:
    - callback: The function to execute on app launch.

usePageShow(callback)
  - A hook to register a callback function that runs when a page becomes visible.
  - Parameters:
    - callback: The function to execute when a page shows.

usePageHide(callback)
  - A hook to register a callback function that runs when a page is hidden.
  - Parameters:
    - callback: The function to execute when a page hides.
```

--------------------------------

### Basic Rax Rendering with DriverDOM

Source: https://github.com/alibaba/rax/blob/master/packages/driver-dom/README.md

Demonstrates how to render a simple Rax component to the DOM. It imports necessary functions from 'rax' and 'driver-dom', defines a functional component, and then uses `render` with the `DriverDOM` driver.

```jsx
import {createElement, render} from 'rax';
import DriverDOM from 'driver-dom';

function Example() {
  return (
    <div>
      <img width="560" height="560" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg" />
    </div>
  );
}

render(<Example />, null, {
  driver: DriverDOM
});
```

--------------------------------

### RaxServer Integration with Express

Source: https://github.com/alibaba/rax/blob/master/packages/rax-server/README.md

Illustrates how to integrate RaxServer with the Express framework for handling specific routes and rendering pages.

```javascript
const express = require('express');
const RaxServer = require('rax-server');

const PORT = 8080;
const app = express();

const server = new RaxServer({
  // ...
});

app.get('/index', (req, res) => {
  server.render(req, res, {
    page: 'index'
  });
});

app.listen(PORT, () => {
  console.log(`app listening on port ${PORT}`);
});
```

--------------------------------

### Rax Developer Tools Integration

Source: https://github.com/alibaba/rax/blob/master/README.md

Instructions for integrating Rax Developer Tools in Chrome for debugging Rax components. The extension is not functional in production mode.

```javascript
// Install the Chrome Rax Developer Tools extension
// Reload and go to the 'Rax' tab in the browser's development tools
```

--------------------------------

### Git Workflow for Contributing

Source: https://github.com/alibaba/rax/wiki/CONTRIBUTING

Details the steps for forking, cloning, creating branches, and synchronizing local code with the Rax repository before submitting a Pull Request.

```bash
# Fork the repository
# Clone your forked repository
git clone <your-forked-repo-url>

# Create a new branch from master
git checkout -b <your-branch-name>

# Before committing, ensure your local code is up-to-date with the target Rax repository
git pull origin master
```

--------------------------------

### server.render Method

Source: https://github.com/alibaba/rax/blob/master/packages/rax-server/README.md

Details the server.render method, used to render a specific page with optional parameters like pathname, query, component, styles, scripts, and title.

```APIDOC
server.render(req, res[, options])

options:
 * page
 * pathname
 * query
 * component
 * styles
 * scripts
 * title

Example:
server.render(req, res, {
  page: 'index'
});
```

--------------------------------

### server.renderToHTML Method

Source: https://github.com/alibaba/rax/blob/master/packages/rax-server/README.md

Describes the server.renderToHTML method, which asynchronously renders the page to an HTML string.

```APIDOC
server.renderToHTML(req, res[, options])

Example:
const html = await server.renderToHTML(req, res, {
  page: 'index'
});
```

--------------------------------

### Server-Side Rendering with rax-server-renderer

Source: https://github.com/alibaba/rax/blob/master/packages/rax-server-renderer/README.md

This snippet demonstrates how to use rax-server-renderer to perform server-side rendering of a Rax component. It imports necessary modules, defines a simple Rax component, and then uses `renderer.renderToString` to generate the HTML output.

```jsx
import {createElement, Component} from 'rax';
import renderer from 'rax-server-renderer';

class MyComponent extends Component {
  render() {
    return <div>Hello World</div>;
  }
}

renderer.renderToString(<MyComponent />);
```

--------------------------------

### Rax Ecosystem Repositories

Source: https://github.com/alibaba/rax/wiki/CONTRIBUTING

A list of key repositories within the Rax ecosystem, providing links to their respective GitHub pages for further exploration and contribution.

```en
- Rax Core: https://github.com/alibaba/rax
- Rax App Framework: https://github.com/raxjs/rax-app
- Rax Mini Program: https://github.com/raxjs/miniapp
- Multi-end Base Components: https://github.com/raxjs/rax-components
- Multi-end API: https://github.com/raxjs/universal-api
- icejs Framework: https://github.com/alibaba/ice
- build scripts: https://github.com/ice-lab/build-scripts
- Component Engineering: https://github.com/ice-lab/iceworks-cli/tree/master/packages/build-plugin-component
```

--------------------------------

### Create a new Rax component

Source: https://github.com/alibaba/rax/blob/master/packages/rax-create-class/README.md

This command generates a new Rax component with basic structure. It requires the component name as an argument.

```bash
npx rax-create-class <ComponentName>
```

--------------------------------

### Rax Project Structure Overview

Source: https://github.com/alibaba/rax/wiki/CONTRIBUTING

Explains the layered architecture of the Rax ecosystem, including Rax Core, Rax App framework, and Rax ecosystem components like components and APIs.

```en
Rax Core: A progressive lightweight React UI library for multi-end scenarios.
  - Core is Rax DSL, using Drivers to abstract rendering capabilities across containers.
  - JSX Plus provides directive capabilities for JSX.
Rax App Framework: A leading and stable development framework for wireless multi-end scenarios.
  - Engineering Build Capability: Uses build scripts as the foundation, with plugins like `build-plugin-rax-web`, `build-plugin-rax-miniapp`, `build-plugin-rax-kraken`, `build-plugin-rax-weex` to support building artifacts for various containers.
  - Runtime Capability: Provides unified runtime capabilities for multiple ends, such as lifecycle and TabBar solutions.
Rax Ecosystem:
  - Component Library: Provides a collection of base components runnable on multiple ends.
  - Uni API: Provides cross-end API solutions for mini-app and Web containers.
```

--------------------------------

### Rax Driver Specification Methods

Source: https://github.com/alibaba/rax/wiki/Driver-Specification

This section details the core methods that a Rax driver must implement to ensure cross-container compatibility. These methods cover element creation, manipulation, event handling, and rendering lifecycle.

```APIDOC
Driver Specification `1.0`

Methods:

createBody()
  - Creates the root body element for the application.

createEmpty(component)
  - Creates an empty placeholder element for a component.

createText(text, component)
  - Creates a text node element.
  - Parameters:
    - text: The text content.
    - component: The component associated with the text node.

updateText(node, text)
  - Updates the text content of an existing text node.
  - Parameters:
    - node: The text node to update.
    - text: The new text content.

createElement(type, props, component)
  - Creates an element of a specified type with given properties.
  - Parameters:
    - type: The type of element to create (e.g., 'div', 'span').
    - props: An object containing element properties.
    - component: The component associated with the element.

appendChild(node, parent)
  - Appends a node as a child to a parent node.
  - Parameters:
    - node: The node to append.
    - parent: The parent node.

removeChild(node, parent)
  - Removes a node from its parent.
  - Parameters:
    - node: The node to remove.
    - parent: The parent node.

replaceChild(newChild, oldChild, parent)
  - Replaces an old child node with a new child node.
  - Parameters:
    - newChild: The new child node.
    - oldChild: The old child node to replace.
    - parent: The parent node.

insertAfter(node, after, parent)
  - Inserts a node after a reference node.
  - Parameters:
    - node: The node to insert.
    - after: The reference node after which to insert.
    - parent: The parent node.

insertBefore(node, before, parent)
  - Inserts a node before a reference node.
  - Parameters:
    - node: The node to insert.
    - before: The reference node before which to insert.
    - parent: The parent node.

addEventListener(node, eventName, eventHandler)
  - Adds an event listener to a node.
  - Parameters:
    - node: The node to attach the listener to.
    - eventName: The name of the event (e.g., 'click').
    - eventHandler: The function to call when the event occurs.

removeEventListener(node, eventName, eventHandler)
  - Removes an event listener from a node.
  - Parameters:
    - node: The node to remove the listener from.
    - eventName: The name of the event.
    - eventHandler: The event handler function to remove.

setAttribute(node, propKey, propValue)
  - Sets an attribute on a node.
  - Parameters:
    - node: The node to set the attribute on.
    - propKey: The name of the attribute.
    - propValue: The value of the attribute.

removeAttribute(node, propKey)
  - Removes an attribute from a node.
  - Parameters:
    - node: The node to remove the attribute from.
    - propKey: The name of the attribute to remove.

setStyle(node, styleObject)
  - Sets the style properties of a node.
  - Parameters:
    - node: The node to set styles on.
    - styleObject: An object containing CSS style properties.

beforeRender({element, hydrate, container})
  - Lifecycle hook called before rendering.
  - Parameters:
    - element: The element being rendered.
    - hydrate: Boolean indicating if hydration is being used.
    - container: The rendering container.

afterRender({element, hydrate, container})
  - Lifecycle hook called after rendering.
  - Parameters:
    - element: The element that was rendered.
    - hydrate: Boolean indicating if hydration was used.
    - container: The rendering container.
```

--------------------------------

### Basic Rax WebGL Component

Source: https://github.com/alibaba/rax/blob/master/packages/driver-webgl/README.md

Demonstrates a basic Rax component rendering a rotating cube using the WebGL driver. It sets up a scene, a perspective camera, and a mesh with box geometry and basic material. The component updates its rotation on each frame.

```jsx
import {createElement, Component, render} from 'rax';
import WebGLDriver from 'driver-webgl';

class HelloWorld extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      cubeRotation: [0, 0, 0]
    };
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.cameraPosition = [0, 0, 5];
  }

  onFrame = () => {
    this.setState({
      cubeRotation: [
        this.state.cubeRotation[0] + 0.01,
        this.state.cubeRotation[1] + 0.01,
        0
      ]
    });
  }

  render() {
    return (
      <scene
        width={this.width}
        height={this.height}
        onFrame={this.onFrame}
      >
        <perspective-camera
          fov={75}
          aspect={this.width / this.height}
          near={0.1}
          far={1000}
          position={this.cameraPosition}
        />
        <mesh
          rotation={this.state.cubeRotation}
        >
          <box-geometry
            width={1}
            height={1}
            depth={1}
          />
          <mesh-basic-material
            color={0x00ff00}
          />
        </mesh>
      </scene>
    );
  }
}

render(<HelloWorld />, document.body, {
  driver: WebGLDriver
});
```

--------------------------------

### Basic Hydration

Source: https://github.com/alibaba/rax/blob/master/packages/rax-hydrate/README.md

This snippet demonstrates the basic usage of rax-hydrate to hydrate a server-side rendered Rax application. It assumes you have a root component and a container element.

```javascript
import { hydrate } from 'rax-hydrate';
import App from './App'; // Your root component

const container = document.getElementById('app'); // Your container element

hydrate(App, container);

```

--------------------------------

### API Reference (react-redux v7.1)

Source: https://github.com/alibaba/rax/blob/master/packages/rax-redux/README.md

This section provides API documentation based on react-redux version 7.1. It covers the core components and functionalities for integrating Redux with React-like frameworks.

```APIDOC
Provider:
  Purpose: Makes the Redux store available to any nested components that need to access it.
  Props:
    store: The Redux store object.

connect:
  Purpose: Higher-order component that connects a React component to the Redux store.
  Arguments:
    mapStateToProps(state, ownProps): Function to map the Redux state to component props.
    mapDispatchToProps(dispatch, ownProps): Function to map Redux actions to component props.
  Returns: A function that takes a component and returns a new component connected to the Redux store.

useSelector:
  Purpose: Hook that extracts data from the Redux store state.
  Arguments:
    selector: A function that takes the Redux state and returns the selected data.
    equalityFn: Optional function to compare the previous and current selected values.

useDispatch:
  Purpose: Hook that returns the dispatch function from the Redux store.

Related Documentation:
  https://react-redux.js.org/api/hooks
  https://react-redux.js.org/api/provider
  https://react-redux.js.org/api/connect
```

--------------------------------

### SSR Document Usage with App Component

Source: https://github.com/alibaba/rax/blob/master/packages/rax-document/README.md

Illustrates how to use the App component from rax-document for Server-Side Rendering (SSR) projects. It shows how to pass configuration and access page information to dynamically set the document title.

```jsx
import { createElement } from 'rax';
import { Root, Style, Script, App} from 'rax-document';

import appJSON from '../app.json';

function Document() {
  return (
    <App config={appJSON}>
      {
        pageInfo => <html>
          <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"/>
            <title>{pageInfo.title}</title>
            <Style />
          </head>
          <body>
            {/* root container */}
            <Root />
            <Script />
          </body>
        </html>
      }
    </App>
  );
}

export default Document;
```

--------------------------------

### Render Rax Component to JSON

Source: https://github.com/alibaba/rax/blob/master/packages/rax-test-renderer/README.md

Demonstrates how to use rax-test-renderer to render a Rax component into a JSON object. This is useful for testing component output without a DOM or native environment.

```jsx
import {createElement} from 'rax';
import renderer from 'rax-test-renderer';

const tree = renderer.create(
  <Link page="https://example.com/">Example</Link>
);

console.log(tree.toJSON());
// { tagName: 'A',
//   attributes: { href: 'https://example.com/' },
//   children: [ 'Example' ] }
```

--------------------------------

### API: setTagNamePrefix

Source: https://github.com/alibaba/rax/blob/master/packages/driver-dom/README.md

Allows setting a prefix for custom element tag names used within Rax. This is useful for namespacing or custom component naming conventions.

```javascript
static setTagNamePrefix(prefix: String)
  Set tag prefix for custom elements.

  Example:
  import DriverDOM from 'driver-dom';

  DriverDOM.setTagNamePrefix('a-');
```

--------------------------------

### Snapshot Test Rax Component with Jest

Source: https://github.com/alibaba/rax/blob/master/packages/rax-test-renderer/README.md

Shows how to integrate rax-test-renderer with Jest for snapshot testing. The rendered JSON tree of a Rax component is compared against a saved snapshot.

```jsx
import {createElement} from 'rax';
import renderer from 'rax-test-renderer';

test('Link renders correctly', () => {
  const tree = renderer.create(
    <Link page="https://example.com">Example</Link>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
```