jimmylv / demo.rax-weex-app

React Native everywhere, with Web and Weex container

rax-demo-app

Setup and Installation

git clone [email protected]:JimmyLv/demo.rax-weex-app.git rax-demo && cd $_
yarn install

time yarn install
yarn install v0.21.3
warning [email protected]: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
✨  Done in 106.15s.
yarn install  13.75s user 8.51s system 20% cpu 1:46.53 total

Getting Started

npm run start

Runs the app in development mode.

Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.

npm run test

You can run jest with test coverage.

npm run lint

You will see the lint errors in the console.

npm run lint:fix

And fix some of lint errors automatically.

npm run stylelint

You can also run the linter for styling.

npm run build

Builds the app for production to the build folder.

Universal "Gotchas"

• DOM & DOM like window & document do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work.
• If you need to use them, consider limiting them to wrapping them situationally with the imported isWeb / isNode / isWeex features from Universal. import {isWeb, isWeex, isNode} from 'universal-env';

demo.rax-weex-app's Issues

TEST: Add more details in README.md

FEA: Use fetch to request data

Add ESLint

FIX: `createElement is not defined`

"熟悉 React 的同学一定对 JSX 不陌生，Rax 的 DSL 语法是基于 React JSX 语法而创造。与 React 不同，在 Rax 中 JSX 是必选的，它不支持通过其它方式创建组件，所以学习 JSX 是使用 Rax 的必要基础。"
-https://diigo.com/09i2u7

import { createElement, Component } from 'rax'

rather than

import React, { Component } from 'react'

Add Style Lint

在 facebook/css-layout 中所支持的属性， Rax 都支持。 它们最后都会被 Rax 的样式转换器转换为内联的样式。

---

推荐使用不加单位的写法：

<View style={styles.container}>
  <Text>hello world</Text>
</View>

const styles = {
  container: {
    background: 'grey',
    width: 375
  }
};

1 个单位的大小为屏幕宽度的 1/750，这样做的好处是当你拿到一份 750px 宽的视觉稿，你再也不需要去做人工换算。

TEST: Setup jest and related tool

TEST: Just for showcase

Something really fun!