用 Rax 开发 Kraken 应用

初始化项目

基于 npm init rax 命令，可以快速创建一个 Rax 多端应用（注意：npm 版本需 >= 6.1.0）：

  1. npm init rax <YourProjectName>

初始化项目过程中， 请依次选择 App、 Kraken 跨端应用，然后根据你的喜好选择 JavaScript 或者 TypeScript。

按流程创建出前端工程目录后启动 dev server：

  1. cd <YourProjectName>npm installnpm start

将得到以下输出

  1. > @rax-materials/scaffolds-app-js@0.1.0 start> rax-app start
  2. [Web] Development server at:http://localhost:3333/home.htmlhttp://[your.ip]:3333/home.html
  3. [Kraken] Development server at:http://[your.ip]:3333/kraken/home.js
  4. [Kraken] Run Kraken Playground App:kraken http://[your.ip]:3333/kraken/home.js

运行

执行上述命令，就可以用 Kraken 打开该 Rax 应用。

  1. kraken http://[your.ip]:3333/kraken/home.js

用 Rax 开发 Kraken 应用 - 图1

状态管理

一个复杂的可交互动态应用往往需要状态管理，以管理数据以及 UI 状态。

在 Rax 应用中，我们可以按如下方式使用 State Hook用 Rax 开发 Kraken 应用 - 图2来管理我们应用内的状态。

示例：

  1. import { useState } from 'rax';
  2. function Example() {  // 声明一个叫 "count" 的 state 变量  const [count, setCount] = useState(0);
  3.   return (    <div>      <p>You clicked {count} times</p>      <button onClick={() => setCount(count + 1)}>Click me</button>    </div>  );}

当然，这样的方式会导致状态分散到各个组件中，不同组件之间需要通过通信的方式来保证数据的传递以及同步。当所开发的应用变大后，复杂度也会明显提高，并不利于开发者在大型应用中做状态管理。对于大型应用，我们推荐 Rax 官方提供的状态管理库 icestore用 Rax 开发 Kraken 应用 - 图3 。