Getting started

環境構築

まず環境を整えます、rax-cliはYeomanみたいなすぐ使えるように環境を構築するコマンドを追加するパッケージです。まずはこれをグローバルにインストールします。

npm i -g rax-cli

で次に、以下のようなrax initを実行します。

$ rax init <project-name>
# > Creating a new Rax project in /path/to/<project-name>
# > Install dependencies:
# > ...
# > ✨  Done in 14.76s.
# > To run your app:
# >   cd sample
# >   yarnpkg run start

Doneと表示されれば、インストールと環境構築は完了です!楽ちん!

Hello Rax

とりあえず、表示させる

次に実際にサーバーを起動して、実際にブラウザでみれるようにします。

前のセクションでインストールをした時に、Doneの下に続きがあったと思うので、それをそのまま実行します。

# > ✨  Done in 14.76s.
# > To run your app:
# >   cd <project-name>
# >   yarnpkg run start

run startすると、サーバーがhttp://localhost:8080で立ち上がるのでブラウザでアクセスすると、こんな感じで表示されました!

Welcome to Rax

ちなみに、プロジェクトのディレクトリ構造はこうなっているようです。

.
├── node_modules # ...長すぎるので省略  
├── package.json
├── public
│   └── index.html
├── src
│   ├── App.css
│   ├── App.js
│   └── index.js
├── webpack.config.js
└── yarn.lock

package.jsonも開いてみて、依存パッケージを確認します。

"dependencies": {
  "rax": "^0.1.5",
  "rax-components": "^0.1.5"
},
"devDependencies": {
  "babel-preset-rax": "...",
  "babel-*": "...",
  "*-webpack-plugin": "...",
  "*-loader": "...",
  "webpack": "...",
  "webpack-dev-server": "..."
}

主に本番で使うのは、raxrax-componentsというパッケージのようです。 またこの環境では、ざっとbabel(es6)で書いてwebpackでBuildするといった感じのプロジェクトができあがったようですね。

あとbabel-preset-raxって何だろうと思ったので調べると、どうやらbabel-preset-reactに幾つかの便利なPluginを追加したもので、特にRax特有のPluginというのはないようです。

「Hello Rax」になるよう書き換える

src/App.jsを弄くれば良さそうなのでエディタで開きます。さて、色々とimportしてますね。

import {createElement, Component} from 'rax';
import {View, Text} from 'rax-components';

名前からですけどなんとなく、raxというのはコンポーネントを作るためで、rax-componentsrax公式のコンポーネント群が入ってる感じです。

rax-componentsで何が有るんじゃいと思ったので調べると、rax-componentsにあるものが使えるようです。 このコンポーネント群ですが、全てに初期スタイル(styles.initial)が適用されるようなので注意が必要かもしれません。

では書き換え作業に入るんですが、実はほぼ出来上がってるものが公式サイトのExampleにあるのでほぼ丸ごと使ってしまいます。

では、src/App.jsを書き換えてください。

import {createElement, Component} from 'rax';
import {View, Text} from 'rax-components';

class App extends Component {
  render() {
    return <View style={styles.container}>
      <Text>Hello Rax</Text>
    </View>;
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
};

export default App;

yarn startして、localhost:8080にアクセスして、画像のようになってればバッチリです!

Welcome to Rax