Fork me on GitHub

Rax(1)-入门

发表于 | 分类于
字数统计: 437 | 阅读时长 ≈ 2
Rax入门

初步了解

  • Weex是什么

    官方描述：一个构建移动端跨平台（Web/IOS/Android）UI框架。

    Weex官网

  • Rax是什么

    官方描述：一个通用的跨容器（Browser/Native/Node）的渲染引擎

    Rax官网

工具安装

创建和管理一个Rax apps，你得安装：Node.js, Rax CLI 和 Weex Playground App.

node：版本号至少为4.0

Weex Playground App : Weex Native 运行时实例 & Weex 文件预览工具，这里下载。

Rax CLI：Rax提供的脚手架工具，在终端执行如下命令安装：

1
$ npm install -g rax-cli

开始第一个项目

创建一个名为hello-world的文件夹，利用Rax CLI工具创建一个新的application，安装需要的依赖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
rax init hello-world
Creating a new Rax project in /Users/anonymous/hello-world
Install dependencies:
...
To run your app:
   cd hello-world
   npm run start
```$ cd hello-world
/Users/anonymous/hello-world
|-- README.md
|-- node_modules
|-- package.json
|-- public
|-- src
`-- webpack.config.js
改变路径到你的新项目

跑rax init之后，会自动在项目路径当中创建一系列文件：

  • src/index.js 是Rax app的入口。
  • package.json定义了项目所需要的各种模块，它告诉npm如何安装外部依赖，比如rax和rax-component库。

使用npm run start命令开启本地预览，终端会显示两个二维码，通过weex playground app扫描第二个可以访问该地址。

Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//顶层API
import {createElement, Component} from 'rax';
//元件引用
import View from 'rax-view';
import Text from 'rax-text';
//import {View, Text} from 'rax-components';
//rax-components需要自行安装
//引用样式
import styles from './App.css';
//定义组件
class App extends Component {
  render() {
    return (
      <View style={styles.app}>
        <View style={styles.appHeader}>
          <Text style={styles.appBanner}>Welcome to Rax</Text>
        </View>
        <Text style={styles.appIntro}>
          To get started, edit src/App.js and save to reload.
        </Text>
      </View>
    );
  }
}
//渲染
export default App;

参考资料

Rax Github

undefined