Rax初学者使用心得

rax的官方文档对于初学者来说是模糊不清的，为了让初学者更容易地理解和接受一个新框架/库本身，而不被其它额外因素所困扰（如：redux、router）
本篇的开头，选择从最简单的Demo – Hello Wrold说起：

入门

// 顶层API
import { createElement, Component, render } from 'rax';
// 元件引用
import { View, Text } from 'rax-components';

// 样式定义
const styles = {
  app: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
};

// 组件定义
const HelloWorld = (props) => {
  return (
    <View style={styles.app}>
      <Text>Welcome to Rax，{ props.name }</Text>
    </View>
  );
};

// 渲染（挂载）
render(<HelloWorld name="Lovesueee" />);

上述Demo很简单，Rax使用了React DSL/JSX，这里主要做了两件事：

定义了一个HelloWorld组件类，包含了内联样式「css in js」
将““标签”渲染到页面/容器里，这其实是一个组件实例化的过程

与react/react-native类似，Rax同样是由两个库组成：rax和rax-components：

rax – 核心渲染库，提供了React-compatible API
rax-components – 辅助组件库，更准确地说，应该是：元件，提供了UI跨平台的能力

所以：一般来说，基于元件编写的复合组件，是可以同时运行在Native和Web上的。