Evergreen React UI 框架使用教程

Evergreen React UI 框架使用教程

【免费下载链接】evergreen 🌲 Evergreen React UI Framework by Segment 项目地址: https://gitcode.com/gh_mirrors/evergreen1/evergreen

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

Evergreen 是一个由 Segment 开发的 React UI 框架，其目录结构如下：

• .github/：包含 GitHub 相关的配置文件，如代码_of_conduct（行为准则）等。
• .storybook/：用于配置和展示 Storybook，这是一个用于展示组件的 UI 工具。
• .vscode/：包含 Visual Studio Code 的配置文件。
• codemods/：代码修改工具，可能包含用于迁移或更新代码的脚本。
• docs/：项目文档的存放位置。
• examples/：示例应用，如 ssr-next，展示如何使用 Evergreen 进行服务端渲染。
• lib/：可能包含一些辅助库或工具。
• src/：源代码目录，包含所有 Evergreen 组件的实现。
• testing/：测试相关的文件和目录。
• tools/：开发者工具和脚本。
• babelrc、.editorconfig、.eslintrc.json 等：各种编辑器和构建工具的配置文件。
• gitattributes、.gitignore：Git 仓库的配置文件。
• npmrc、nvmrc：npm 和 Node.js 版本管理器的配置文件。
• prettierignore：Prettier 代码格式化工具的忽略文件。
• LICENSE：项目许可证文件。
• README.md：项目说明文件。
• index.d.ts：TypeScript 的声明文件。
• index.test-d.ts：测试用的 TypeScript 声明文件。
• package.json：项目依赖和脚本。
• rollup.config.js：Rollup 打包工具的配置文件。
• tsconfig.*.json：TypeScript 的配置文件。

2. 项目的启动文件介绍

要启动 Evergreen，首先需要安装依赖：

yarn add evergreen-ui

或者使用 npm：

npm install --save evergreen-ui

然后，在项目中引入 Evergreen 组件，并使用它们：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'evergreen-ui';

ReactDOM.render(
  <Button>
    我在使用 🌲 Evergreen！
  </Button>,
  document.getElementById('root')
);

上面的代码创建了一个简单的 React 应用，其中包含一个使用 Evergreen UI 框架的按钮组件。

3. 项目的配置文件介绍

Evergreen 的配置文件主要包括：

• .babelrc：Babel 的配置文件，用于指定 Babel 的转换选项。
• .editorconfig：编辑器配置文件，用于保持代码风格的一致性。
• .eslintrc.json：ESLint 的配置文件，用于定义代码质量规则。
• rollup.config.js：Rollup 的配置文件，用于打包和构建项目。
• tsconfig.json：TypeScript 的配置文件，用于指定 TypeScript 编译选项。

这些配置文件为项目提供了一致的开发体验和构建流程。开发者可以根据自己的需求对它们进行修改和扩展。

【免费下载链接】evergreen 🌲 Evergreen React UI Framework by Segment 项目地址: https://gitcode.com/gh_mirrors/evergreen1/evergreen