用 react 开发 Kraken 应用

示例应用

我们提供了一个示例应用来展示一个 React 应用如何在 Kraken 上运行起来。

首先，将代码 clone 下来，并进入 ./demos/hello-react 目录。

  1. git clone https://github.com/openkraken/samples.git
  2. cd ./demos/hello-react

安装依赖并打包。

  1. npm i
  2. npm run build

通过 Kraken Cli 将打包好的 bundle 运行起来。

  1. kraken ./build/static/js/bundle.js

用 React 开发 Kraken 应用 - 图1

初始化一个 React 项目

React 提供了一个官方的 Create React App脚手架工具来初始化一个 React 项目。然后开发者只需要对项目做一些工程上的改造即可使 React 项目在 Kraken 上顺利运行起来。

由于 Kraken 没有 HTML，所以我们的 root 节点必须是 document.body。因此，开发者需要在入口文件中，将 ReactDOM.render 的入参改为 document.body。

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import App from './App';
  5. ReactDOM.render(
  6.   <React.StrictMode>
  7.     <App />
  8.   </React.StrictMode>,
  9.   document.body,
  10. );

由于 Kraken 入口是一个 JavaScript 文件，你需要配置 webpack ，使 bundle 打在一个包中。

此外，需要注意的是，目前 Kraken 只支持内联样式，所以我们建议使用下列方法来写 CSS 样式。

  1. const styles = {
  2.   App: {
  3.     textAlign: 'center',
  4.   },
  5.   AppHeader: {
  6.     backgroundColor: '#282c34',
  7.     minHeight: '100vh',
  8.     display: 'flex',
  9.     flexDirection: 'column',
  10.     alignItems: 'center',
  11.     justifyContent: 'center',
  12.     fontSize: '32px',
  13.     color: 'white',
  14.   },
  15. };
  17. function App() {
  18.   return (
  19.     <div style={styles.App}>
  20.       <div style={styles.AppHeader}>Demo</div>
  21.     </div>
  22.   );
  23. }
  25. export default App;

状态管理

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

在 React 应用中，我们可以按如下方式使用 State Hook来管理我们应用内的状态。

示例：

  1. import { useState } from 'react';
  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. }

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