@symph/joy

快速开始

Joy 支持 React、Node.js 或者前后端混合应用开发，这里以一个简单的包含前后端的Hello World应用为例，介绍如何快速开始开发。

环境准备

node 必须 12.22.0 或以上版本，推荐使用 nvm 来管理 node 版本。
推荐使用 yarn 管理依赖，国内使用阿里 npm 源 registry: https://registry.npm.taobao.org

# 安装 yarn
$ npm i yarn -g
# 手动设置`registry`地址为国内源
$ yarn config set registry https://registry.npm.taobao.org
# 查看源
$ yarn config get registry

# 或者使用 tyarn
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

创建目录

创建应用根目录

$ mkdir myapp && cd myapp

创建 package.json 文件，申明应用名和依赖：

{
  "name": "myapp",
  "version": "v1.0.0",
  "scripts": {
    "dev": "joy dev",
    "build": "joy build",
    "start": "joy start"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "@symph/joy": "^2.0.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.1"
  }
}

安装依赖

$ yarn install

第一个页面

React 客户端

创建 Model

创建文件 src/client/model/hello.model.ts, ReactModel 管理应用状态数据和封装业务方法。

// src/client/model/hello.model.ts
import { ReactModel, BaseReactModel } from "@symph/react";
import { Inject } from "@symph/core";
import { ReactFetchService } from "@symph/joy";

@ReactModel()
export class HelloModel extends BaseReactModel<{
  message: string;
}> {
  constructor(@Inject("joyFetchService") private joyFetchService: ReactFetchService) {
    super();
  }

  getInitState() {
    return { message: "Hello World!" }; // Init model state
  }

  async fetchMessage() {
    const resp = await this.joyFetchService.fetchApi("/hello");
    const message = await resp.text();
    this.setState({ message }); // Update model state
  }
}

创建页面

创建第一个页面src/client/pages/index.tsx，页面 ReactController 负责展示 Model 中的状态，响应用户交互，触发业务流程。

// src/client/pages/index.tsx
import React, { ReactNode } from "react";
import { BaseReactController, ReactController } from "@symph/react";
import { Inject } from "@symph/core";
import { HelloModel } from "../model/hello.model";

@ReactController()
export default class IndexController extends BaseReactController {
  @Inject()
  helloModel: HelloModel;

  renderView(): ReactNode {
    const { message } = this.helloModel.state;
    return (
      <div>
        <div id="message">{message}</div>
        <button id="btnUpdateMessage" onClick={() => this.helloModel.fetchMessage()}>
          Update Message
        </button>
      </div>
    );
  }
}

Server 服务端

创建 Api Controller

创建文件 server/controller/hello.controller.ts, Server Controller 对外提供 HTTP 接口服务。

// server/controller/hello.controller.ts
import { Controller, Get } from "@symph/server";

@Controller()
export class HelloController {
  @Get("/hello")
  hello(): string {
    return "Hello Joy!";
  }
}