用 Rax 开发 Kraken 应用

初始化项目

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

  1. npm init rax <YourProjectName>

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

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

  1. cd <YourProjectName>
  2. npm install
  3. npm start

将得到以下输出

  1. > @rax-materials/scaffolds-app-js@0.1.0 start
  2. > rax-app start
  4. [Web] Development server at:
  5. http://localhost:3333/home.html
  6. http://[your.ip]:3333/home.html
  8. [Kraken] Development server at:
  9. http://[your.ip]:3333/kraken/home.js
  11. [Kraken] Run Play Kraken App:
  12. 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来管理我们应用内的状态。

示例：

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

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