🐰 Rax is a progressive React framework for building universal application. https://rax.js.org

Overview

Rax

Rax is a progressive React framework for building universal applications.

gzip size


💌 Write Once, Run Anywhere: write one codebase, run with Web, Weex, Node.js, Alibaba MiniApp, WeChat MiniProgram and could work with more container that implements driver specification.

Fast: use better performance and tinier size( 📦 ~6KB) alternative to React with the same API.

📤 Easy: quick start with zero configuration, all features like Progressive Web App (PWA), Server-Side Rendering (SSR) and Function as a service (FaaS) can be used out of the box.

Quick Start 🥢 🍚

Start from command line

Create a new Rax project using create-rax:

$ npm init rax <YourProjectName>

npm init <initializer> is available in npm 6+

Start local server to launch project:

$ cd <YourProjectName>
$ npm install
$ npm run start

Start from VS Code

You need to install the Iceworks extension and invoke the Iceworks: Create Application command from the VS Code command palette (Ctrl + Shift + P or Cmd + Shift + P on Mac):

vscode

Developer Tools 🛠

You can inspect and modify the state of your Rax components at runtime using the Rax Developer Tools browser extension, and extension not works in production mode.

  1. Install the Chrome Rax Developer Tools extension
  2. Reload and go to the 'Rax' tab in the browser's development tools

VS Code Extension

You can use Iceworks VS Code Extension to get better development experience.

Awesome Things 📝

You can find some awesome things in awesome-rax.

Contributing 🧼

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

Code Contributors

This project exists thanks to all the people who contribute.

Community support

For general help using Rax, please refer to the official site. For additional help, you can use one of these channels to ask a question:

  • GitHub (Bug reports, contributions)
  • Twitter (Get the news fast)
  • Medium (Get blogs and articles)
  • 知乎专栏 (Get blogs and articles in Simplified Chinese)
Issues
  • Kraken比RN、Weex优势在哪里?

    Kraken比RN、Weex优势在哪里?

    Kraken基于JS和Dart通信实现动态化,脚本和渲染运行在两个环境下。Kraken那么不就和RN、Weex一样了吗? Flutter性能高不就是因为脚本和渲染在一个环境下,不用Bridge通信所以快的吗?

    Question 
    opened by challengingcheng 24
  • [Hooks] Uncaught TypeError: current is not a function

    [Hooks] Uncaught TypeError: current is not a function

    1. How would you tag this issue?
    • Bug
    1. Describe your issue:
    import { createElement, useEffect, useState } from 'rax';
    
    export default () => {
        const [visible, setVisible] = useState(false);
    
        useEffect(async () => {
            let a = await new Promise((resolve) => {
                setTimeout(() => {
                    resolve(11);
                });
            });
            console.log(a);
        });
    
        let element = (
            <div>
                <button onClick={() => setVisible(true)}>update</button>
            </div>
        );
    
        return element;
    }
    

    If I click the update button, Rax will throw the error below: image image

    Bug 
    opened by andycall 22
  • rax-xxx@1.0 更新

    [email protected] 更新

    rax-text、rax-view、rax-image、rax-icon、rax-button、rax-touchable、rax-video 希望能和1.0的rax框架匹配

    opened by yuchonghua 16
  • [BUG] [微信小程序] - style 不支持 WebkitLineClamp 或者 -webkit-line-clamp

    [BUG] [微信小程序] - style 不支持 WebkitLineClamp 或者 -webkit-line-clamp

    代码:

    <view style={{
          '-webkit-box-orient': 'vertical',
          '-webkit-line-clamp': 2,
          color: 'blue',
        }}>
    

    渲染成小程序代码以后,可以发现 -webkit-line-clamp 丢失

    Bug 
    opened by Rabbitzzc 12
  • [BUG] 使用 vant 添加到 miniapp-native,组件 linked 事件调用失败

    [BUG] 使用 vant 添加到 miniapp-native,组件 linked 事件调用失败

    问题描述

    在 Rax 开发的小程序中,使用 vant 添加到 miniapp-native,使用了 drop-menu 组件,发现无效果。经过测试,发现组件内部 link 事件调用失败。 image

    Bug 
    opened by Rabbitzzc 12
  • npm run start后报错,求解决

    npm run start后报错,求解决

    webpack: building modules...(node:48859) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead (node:48859) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead webpack: building modules.../Users/edward/study/testrax/demo/node_modules/neo-async/async.js:14 throw new Error('Callback was already called.'); ^

    Error: Callback was already called. at throwError (/Users/edward/study/testrax/demo/node_modules/neo-async/async.js:14:11) at /Users/edward/study/testrax/demo/node_modules/neo-async/async.js:2760:7 at Compilation.processModuleDependencies (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:435:4) at afterBuild (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:560:16) at _this.buildModule.err (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:606:11) at callback (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:357:35) at module.build.error (/Users/edward/study/testrax/demo/node_modules/webpack/lib/Compilation.js:393:12) at handleParseError (/Users/edward/study/testrax/demo/node_modules/webpack/lib/NormalModule.js:364:12) at doBuild.err (/Users/edward/study/testrax/demo/node_modules/webpack/lib/NormalModule.js:394:5) at runLoaders (/Users/edward/study/testrax/demo/node_modules/webpack/lib/NormalModule.js:270:12) at /Users/edward/study/testrax/demo/node_modules/loader-runner/lib/LoaderRunner.js:370:3 at iterateNormalLoaders (/Users/edward/study/testrax/demo/node_modules/loader-runner/lib/LoaderRunner.js:211:10) at Array. (/Users/edward/study/testrax/demo/node_modules/loader-runner/lib/LoaderRunner.js:202:4) at Storage.finished (/Users/edward/study/testrax/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16) at provider (/Users/edward/study/testrax/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9) at /Users/edward/study/testrax/demo/node_modules/graceful-fs/graceful-fs.js:78:16 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: rax-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    opened by vdiskmobile 12
  • 在weex中使用rax是否可以引用本地ttf字体图标

    在weex中使用rax是否可以引用本地ttf字体图标

    使用rax比使用we要舒服,但都有同一个问题,似乎不能引用本地资源。 我想使用字体图标 <Icon fontFamily="iconfont" source={{uri: 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf', codePoint: '\uE60f'}}/> 这样,如果客户端无网络,图标就无法显示出来,现在是否有解决办法? 我尝试local://drawable/aaa这样算是可以使用本地图片了,但ttf不行。 还有在windows下 npm run build 不能编译,只能在linux下编译目前

    opened by bishen 12
  • [Question]路由使用browser,二级目录部署,需要publicPath,设置后发现一些问题。

    [Question]路由使用browser,二级目录部署,需要publicPath,设置后发现一些问题。

    "publicPath": "/webapp/"

    1. Link组件需要web开发加上publicPath, 小程序不能加;
    2. Navigator组件需要web开发加上publicPath(使用history不需要开发拼), 小程序不能加;
    3. tabbar的image在public文件夹下会识别不到image,如果加上 publicPath就会影响小程序。
    4. 请问代码中如何获取publicPath
    Question 
    opened by waylon-gmail 12
  • [Question]微信onShareTimeline 分享朋友圈,title跟 imageUrl不生效

    [Question]微信onShareTimeline 分享朋友圈,title跟 imageUrl不生效

    分享给朋友是可以的。但是分享朋友圈不生效。不知道什么原因。

      // query: 自定义页面路径中携带的参数,如 path?a=1&b=2 的 “?” 后面部分
      const handleShareTimeline = () => {
        return {
          title: '我是自定义title',   // 不生效, 分享后是页面的title而不是自定义title
          query: `key=123`,
          imageUrl: 'https://xxxx.png',  // 不生效, 看到的是logo
        }
      };
    
      if (isWeChatMiniProgram) {
        registerNativeEventListeners(Index, ['onShareTimeline']);
      }
    
      useEffect(() => {
        if (isWeChatMiniProgram) {
          wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareTimeline'],
          });
          addNativeEventListener('onShareTimeline', handleShareTimeline);
        }
        return () => {
          if (isWeChatMiniProgram) {
            removeNativeEventListener('onShareTimeline', handleShareTimeline);
          }
        };
      }, []);
    
    opened by waylon-gmail 12
  • React devtool not work with rax.

    React devtool not work with rax.

    开启react devtool后,map元素会报错Cannot read property '_topLevelWrapper' of undefined

    Bug 
    opened by wuyasong 11
  • refactor: rework rax-test-renderer

    refactor: rework rax-test-renderer

    Rax Core

    • chore: move the configuration not related to rendering to inject method, others move to injectRenderOptions method

    rax-test-renderer

    • refactor: avoid rax-test-renderer's dependence on rax/lib/testing which use Class or Function in rax inside
    opened by SoloJiang 0
  • Create SECURITY.md

    Create SECURITY.md

    null

    opened by SoloJiang 0
  • [Question]同时适配手机与pc

    [Question]同时适配手机与pc

    项目想用rax+响应式布局同时支持pc和手机端,发现 @alifd/meet在pc端上的样式非常的大个,比如loading,样式非常难看。

    @alifd/next 看起来比较正常,请问 这种到底是

    1. 开发两套项目
    2. 还是选择 @alifd/next
    3. 还是 @alifd/meet 呢?
    opened by waylon-gmail 1
  • fix: isValidElement should return boolean type

    fix: isValidElement should return boolean type

    fix:

    isValidElement({}) // => undefined
    
    opened by carlisliu 0
  • 怎么设置CSS的基准

    怎么设置CSS的基准

    怎么设置CSS的基准,不同屏幕,电脑上尺寸不一样~

    opened by mayouchen123 1
  • [WIP] feat: support harmony

    [WIP] feat: support harmony

    null

    opened by SoloJiang 0
  • [BUG] Function Component should add `__getName` method

    [BUG] Function Component should add `__getName` method

    In development, Rax validates children nodes key property. In this method, it will console warn the target component name. However, function component missed __getName method.

    Bug 
    opened by SoloJiang 0
  • Responsible disclosure policy

    Responsible disclosure policy

    Hey there!

    I belong to an open source security research community, and a member (@yetingli) has found an issue, but doesn’t know the best way to disclose it.

    If not a hassle, might you kindly add a SECURITY.md file with an email, or another contact method? GitHub recommends this best practice to ensure security issues are responsibly disclosed, and it would serve as a simple instruction for security researchers in the future.

    Thank you for your consideration, and I look forward to hearing from you!

    (cc @huntr-helper)

    opened by benharvie 1
  • [Question]scrollview scrollTo 在支付宝小程序下不生效,微信小程序没问题

    [Question]scrollview scrollTo 在支付宝小程序下不生效,微信小程序没问题

    https://rax.js.org/docs/components/scrollview

    const scrollViewRef = useRef();
    
      const handleBackTop = () => {
        // @ts-ignore
        scrollViewRef?.current?.scrollTo({ y: 0 });
        console.log(scrollViewRef);
        console.log(scrollViewRef?.current);
      };
    
    
             <ScrollView
                className="scroll-container"
                horizontal={false}
                ref={scrollViewRef}
              >
     ...
    
    Bug 
    opened by waylon-gmail 2
  • fix: Encountered two children with the same key

    fix: Encountered two children with the same key ""

    closes #2209

    opened by fengzilong 0
Releases(v1.2.2)
  • v1.2.2(Sep 2, 2021)

  • v1.2.1(Sep 1, 2021)

  • v1.2.0(Feb 5, 2021)

  • v1.1.4(Jul 15, 2020)

  • v1.1.3(May 26, 2020)

    • fix: fragment cache native node #1867
    • fix: portal with new context #1866
    • fix: unmount dirty component #1865
    • fix: destory function of a passive effect should call synchronously #1864
    • fix: render returns null to null empty nodes are also rebuilt #1842
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Nov 19, 2019)

    • Fix: driver dom rpx (#1406)
    • Feat: upgrade style-unit support to driver-worker (#1411)
    • Fix: error boundary bug and remove useless code (#1414)
    • Feat: promote init speed (#1449)
    • Feat: support props check (#1444)
    • Feat: pwa support keepAlive & TabBar & preload and prerender (#1452)
    • Fix: update exception when rise a element type error (#1455)
    • Fix: support dimensional prop value without px (#1456)
    • Chore: freeze props (#1463)
    • Feat: do not break render when element type invalid (#1468)
    • Fix: prevent the same reference (#1470)
    • Fix: support dimensional prop value without px (#1467)
    • Feat: add useInterval and useTimeout (#1462)
    • Chore: rax-redux upgrade to latest (#1439)
    Source code(tar.gz)
    Source code(zip)
  • v1.0.13(Nov 19, 2019)

    v1.0.13

    • Feat: rax-use-router support withRouter (#1385)
    • Fix: componentDidMount exec correct (#1399)

    v1.0.12

    • print warning when loop elements without key property (#1355)
    • context not work correct in async render mode (#1378)
    • Update rax project entry file app.js usage. (#1343)
    • minify the wrapper code generated by rollup (#1374)
    • when prev fragment is empty and update to other type (#1365)
    • compress _hooks (#1369)
    • mobx-rax support rax1.x (#1368)
    • fragment test case (#1363)
    • Only prevNativeNode is empty fragment should find the prevSlibingNativeNode (#1361)
    • add toWarnDev and toLowPriorityWarnDev jest matcher (#1354)

    v1.0.11

    • compress isPureComponent (#1358)
    • Key should not be compressed, for that will be added to native n… (#1356)

    v1.0.10

    • little opt (#1351)
    • empty array diff error (#1346)
    • Revert "fix: optimize performance and reduce package size" (#1352)
    • use for loop instead of while to avoid mutate array iteself (#1348)
    • change log logic inversion (#1329)
    • driver-universal support CSS custom properties (#1335)
    • Optimize performance (#1333)
    • Refactor compress variables (#1332)
    • optimize performance and reduce package size (#1331)
    • Refactor core performance and size (#1300)
    • Apply some performance optimisation (#1330)
    • migrate scripts packages (#1325)
    • fix ssr style (#1324)
    • add rax-plugin-pwa (#1307)
    • Support component use separated css file (#1303)

    v1.0.9

    • v1.0.9 and update readme (#1320)
    • rax-scripts (#1299)
    • tansform jsx to html (#1304)
    • Optimize scheduler size and performance (#1309)
    • prop style array to Object.assign (#1313)
    • remove useless packages (#1305)
    • raxjs supports iife and cjs, pulling away from amd. (#1286)
    • plugin app add hash config (#1292)
    • Transfer miniapp related packages (#1294)
    • Add rax-set-native-props & rax-get-element-by-id (#1296)
    • transfer miniapp related packages to internal (#1290)
    • Multi pages support routeName (#1289)
    • add rpx2vw (#1283)
    • Fix ssr multi (#1275)
    • rax-engineering (#1239)
    • Feat enhance component plugin (#1235)
    • Feat mpa plugin (#1260)
    • Feat user config (#1253)
    • improve performance with clearing all children (#1254)
    • Feat fix minimize (#1238)
    • Refactor new context (#1184)
    • Feat common config (#1233)
    • Fix inline style (#1228)
    • improve driver dom performance for rpx (#1223)
    • fix change mp build dir (#1217)
    • add qrcode (#1215)
    • remove web-app index.html font-size (#1214)
    • rax 1.0 engineering (#1180)
    • Fix engineer error (#1213)
    • Feat optimize app template (#1210)
    • support cli api (#1209)
    • Merge remote-tracking branch 'origin/feat-rax-engineering' into feat-optimize-app-template (#1187)
    • Feat: update App Shell plugin (#1206)
    • revert: external rax (#1207)
    • Merge remote-tracking branch 'origin/feat-rax-engineering' into feat-add-mpapp (#1208)
    • fix document plugin public (#1202)
    • fix weex external (#1204)
    • add SSR client router initialComponent (#1200)
    • fix-com&api-config (#1199)
    • fix publicPath (#1198)
    • add ssr plugin client (#1196)
    • Feat app plugin update (#1195)
    • generate package.json (#1194)
    • add pwa (#1188)
    • The fix isValidElement method returns a Boolean value (#1191)
    • add api plugin (#1190)
    • add application template (#1189)
    • add universal API template (#1185)
    • Feat new initialization workflow (#1183)
    • version patch babel-plugin-transform-jsx-stylesheet (#1175)
    • Feat/universal app runtime (#1179)
    • Refactor/universal app shell loader (#1181)
    • fix: match search is not needed (#1166)
    • add dont remove className option (#1171)
    • Fix repeat packing rax in production mode when compat react (#1172)
    • Update event-handle.md (#1170)

    v1.0.8

    • Migration project deletion (#1143)
    • rax-scripts component-miniapp bug (#1164)
    • proxy for ssr dev server (#1137)
    • typo fix in docs (#1150)
    • rax scripts add postcss-plugin-rpx2vw (#1146)
    • Rax PWA (#1097)

    v1.0.7

    • react compatibility (#1116)
    • Feat create rax (#1114)
    • Remove weex generator and update readme (#1111)
    • Universal app (#1102)
    • improve creating & removing performace (#1089)
    • weixin mp props (#1080)
    • Add component scripts (#1069)
    • link render-helpers & Update rax.js (#1074)
    • fix: path error in windows (#1059)
    • filename typo (#1054)
    • fix readme import useImport from 'rax-use-import'; (#1055)
    • rax-use-router with history (#1029)
    • fix: style transform error (#1051)
    • component generator & universal build (#967)
    • support webview replace api (#1050)
    • fix(rax-scripts): command line option "--output-path" not working (#1045)
    • feat(rax-script): support .tsx files (#1043)
    • chore: remove atag from github (#1042)
    • publish rax-cli 1.2.1 (#1033)
    • fix: hack to avoid bug in windmill iOS 10 (#1038)
    • Support jsx file sturcuture resolve and remove dep of rax (#1034)
    • fix: import driver-dom error (#1037)
    • fix: vue denpendencies config (#1036)
    • rax-benchmark (#999)

    v1.0.4

    • fix: reducer only exec once when reducer set inner function component (#1027)
    • fix: scheduler change to setTimeout (#1024)
    • Fix miniapp plugin (#1016)
    • publish atag (#1011)

    v1.0.2

    • fix: style 'top: 0' can't update (#1006)
    • fix: set two state but re-render once (#992)
    • fix: send location.replace once (#1005)
    • fix: remove inputType judgement (#997)
    • hotfix/scroll-with-animation (#996) (#980)
    • rax-scripts 1.2.0 (#987)
    • add forwardRef (#989)
    • Make driver-weex works and bump rax-cli rax-scprits 1.1.0 (#986)
    • optimize text listener (#985)
    • fix broken link to browser driver (#981)
    • export react compatibility entry (#978)
    • Fix/rax scripts (#979)
    • fix: atag input value in iOS (#976)
    • rax-cli v1.0.0 (#972)
    Source code(tar.gz)
    Source code(zip)
Owner
Alibaba
Alibaba Open Source
Alibaba
A framework for building native apps with React.

React Native Learn once, write anywhere: Build mobile apps with React. Getting Started · Learn the Basics · Showcase · Contribute · Community · Suppor

Facebook 98.7k Oct 12, 2021
🤖 The universal chatbot library based on React. Write once, launch Telegram, Facebook, Slack, ... every messenger with chatbots

Urban Bot The universal chatbot library based on React. Declarative. You don't need to know any messenger API, just write simple react components. Mul

Urban Bot 291 Oct 8, 2021
render React components to Sketch ⚛️💎

render React components to Sketch; tailor-made for design systems Quick-start ??‍ First, make sure you have installed Sketch version 50+, & a recent n

Airbnb 14.8k Oct 11, 2021
Reactron is a React component visualizer that allows you to traverse an app's fiber tree and render components individually.

Reactron Empowering the Development Process from Top to Bottom A tool for the complete and total visualization of your React application Reactron bols

OSLabs Beta 109 Oct 13, 2021
🌈 React for interactive command-line apps

React for CLIs. Build and test your CLI output using components. Ink provides the same component-based UI building experience that React offers in the

Vadim Demedes 16.9k Oct 12, 2021
Flareact is an edge-rendered React framework powered by Cloudflare Workers.

Edge-rendered React framework built for Cloudflare Workers

Flareact 1.2k Oct 8, 2021
[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications

React-TV · react-tv: React Renderer for low memory applications. react-tv-cli: React Packager for TVs. Currently under development. import React from

Raphael Amorim 1.9k Oct 10, 2021
High performance canvas> rendering for React components

react-canvas Introductory blog post React Canvas adds the ability for React components to render to <canvas> rather than DOM. This project is a work-i

Flipboard 12.7k Oct 16, 2021
An experimental, comprehensive port of React Native to the web.

React Native DOM · An experimental, comprehensive port of React Native to the web. Multithreaded by default: Following the exact same architecture as

Vincent Riemer 3.2k Oct 4, 2021
Create amazing 360 and VR content using React

React 360 React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and W

Facebook Archive 8.5k Oct 6, 2021
Create amazing 360 and VR content using React

React 360 React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and W

Facebook Archive 8.5k Oct 10, 2021
A React renderer for Hardware.

React Hardware React Hardware enables you to build firmata-based hardware applications using a consistent developer experience based on JavaScript and

Dustan Kasten 775 Oct 4, 2021
Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀

React NodeGui Build performant, native and cross-platform desktop applications with React. ?? React NodeGUI is powered by React ⚛️ and Qt5 ?? which ma

NodeGui 5.9k Oct 8, 2021
🇨🇭 A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

Poimandres 15.3k Oct 14, 2021
🇨🇭 A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

Poimandres 15.3k Oct 13, 2021
Build native, high-performance, cross-platform applications through a React (and/or QML) syntax

ReactQML Build native, high-performance, cross-platform universal applications (desktop and mobile) through a React (and/or QML) syntax ?? NOTE: React

Long Nguyen 85 Oct 3, 2021
A react renderer for blessed.

react-blessed A React custom renderer for the blessed library. This renderer should currently be considered as experimental, is subject to change and

Guillaume Plique 4.2k Oct 5, 2021
Experiments to see the advantages of using Web Workers to Render React Virtual DOM

React Renderer using Web Workers A React Custom renderer using Web Workers. All the Virtual DOM reconcilliations happen in a WebWorker thread. Only no

Web Performance 898 Oct 9, 2021
a react renderer for the command line

This repository is now archived This project was originally created as an alternative to the Ink library, as a separate renderer for a real React comp

Mike Grip 44 Dec 2, 2020