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 项目。