React Sketchapp 使用教程

React Sketchapp 使用教程

react-sketchapprender React components to Sketch ⚛️💎项目地址:https://gitcode.com/gh_mirrors/re/react-sketchapp

1. 项目的目录结构及介绍

React Sketchapp 是一个用于将 React 组件渲染到 Sketch 的工具。以下是其基本目录结构：

react-sketchapp/
├── examples/
│   └── basic-setup/
│       ├── src/
│       │   └── my-command.js
│       ├── package.json
│       └── ...
├── src/
│   ├── components/
│   ├── index.js
│   └── ...
├── package.json
├── README.md
└── ...

• examples/: 包含一些示例项目，如 basic-setup。
• src/: 包含项目的主要源代码。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的介绍文档。

2. 项目的启动文件介绍

在 examples/basic-setup 目录下，主要的启动文件是 src/my-command.js。这个文件定义了如何渲染 React 组件到 Sketch。

import * as React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';

const App = (props) => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>{props.message}</Text>
  </Artboard>
);

export default (context) => {
  render(<App message="Hello world" />, context);
};

• render: 用于将 React 组件渲染到 Sketch。
• Text 和 Artboard: 是 React Sketchapp 提供的组件，用于在 Sketch 中绘制文本和画板。

3. 项目的配置文件介绍

主要的配置文件是 package.json，位于项目的根目录和 examples/basic-setup 目录下。

根目录下的 package.json：

{
  "name": "react-sketchapp",
  "version": "3.2.0",
  "description": "render React components to Sketch",
  "main": "src/index.js",
  "scripts": {
    "render": "node render.js"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-sketchapp": "^3.2.0"
  },
  "devDependencies": {
    "typescript": "^3.4.5"
  }
}

examples/basic-setup 目录下的 package.json：

{
  "name": "basic-setup",
  "version": "1.0.0",
  "main": "src/my-command.js",
  "scripts": {
    "render": "react-sketchapp render"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-sketchapp": "^3.2.0"
  }
}

• name 和 version: 项目的名称和版本。
• main: 项目的入口文件。
• scripts: 定义了一些可执行的脚本，如 render。
• dependencies: 项目依赖的库。

通过这些配置文件，可以管理和运行 React Sketchapp 项目。

react-sketchapprender React components to Sketch ⚛️💎项目地址:https://gitcode.com/gh_mirrors/re/react-sketchapp