Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update quick start guide content #4636

Merged
merged 1 commit into from
Feb 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions website/docs/en/guide/framework/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ import { PackageManagerTabs } from '@theme';
}}
/>

Then select `React` when prompted to "Select framework".
Then select `React 19` or `React 18` when prompted to "Select framework".

## Use React in an existing project

To compile React, you need to register the Rsbuild [React Plugin](/plugins/list/plugin-react). The plugin will automatically add the necessary configuration for React builds.
To compile React's JSX syntax, you need to register the Rsbuild [React Plugin](/plugins/list/plugin-react). The plugin will automatically add the necessary configuration for building a React application.

For example, register in `rsbuild.config.ts`:

Expand Down
6 changes: 3 additions & 3 deletions website/docs/en/guide/start/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ import Step from '@components/Step';
description="Learn all features of Rsbuild"
/>
<Step
href="/guide/basic/configure-rsbuild"
title="Config"
description="Learn how to configure Rsbuild"
href="https://github.com/web-infra-dev/rsbuild"
title="Support Rsbuild"
description="Support us with a star ⭐️"
/>
</NextSteps>
35 changes: 27 additions & 8 deletions website/docs/en/guide/start/quick-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,13 @@ import { PackageManagerTabs } from '@theme';
}}
/>

Then follow the prompts to complete the operation.
Follow the prompts step by step. During the creation process, you can choose whether you need additional tools like TypeScript, ESLint, etc.

After the project is created, you can follow these steps:

- Run `git init` to initialize the Git repository.
- Run `npm install` (or the install command of your package manager) to install project dependencies.
- Run `npm run dev` to start the development server, which runs on `localhost:5173` by default.

### Templates

Expand Down Expand Up @@ -134,20 +140,22 @@ To migrate from an existing project to Rsbuild, refer to the following guides:
- [Migrate from Vue CLI](/guide/migration/vue-cli)
- [Migrate from Vite](/guide/migration/vite)
- [Migrate from Modern.js Builder](/guide/migration/modern-builder)
- [Migrate from Tsup to Rslib](https://lib.rsbuild.dev/guide/migration/tsup)
- [Migrate from Storybook to Storybook Rsbuild](https://rspack.dev/guide/migration/storybook)

### Other projects

For other types of projects, you can manually install the [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core) package:
If your project does not belong to the above migration guides, you can manually install the [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core) package:

<PackageManagerTabs command="add @rsbuild/core -D" />

Then refer to the guide and documentation to enable the features you need:
After installation, you can refer to the following documents to configure your project:

- See [CLI](/guide/basic/cli) to learn about available CLI commands.
- See [Plugin List](/plugins/list/index) to select Rsbuild plugins.
- See [Configure Rsbuild](/guide/basic/configure-rsbuild) to configure Rsbuild.

## Command line interface
## CLI

Rsbuild comes with a lightweight CLI that includes commands such as `dev` and `build`.

Expand All @@ -170,6 +178,17 @@ Refer to the [CLI](/guide/basic/cli) to learn about all available commands and o

By default, Rsbuild CLI uses `src/index.(js|ts|jsx|tsx)` as the entry module. You can modify the entry module using the [source.entry](/config/source/entry) option.

```ts title="rsbuild.config.ts"
export default {
source: {
entry: {
foo: './src/pages/foo/index.ts',
bar: './src/pages/bar/index.ts',
},
},
};
```

## Core packages

### @rsbuild/core
Expand Down Expand Up @@ -214,7 +233,7 @@ import Step from '@components/Step';
<NextSteps>
<Step
href="/guide/start/features"
title="All Features"
title="All features"
description="Learn all features of Rsbuild"
/>
<Step
Expand All @@ -223,8 +242,8 @@ import Step from '@components/Step';
description="Learn how to configure Rsbuild"
/>
<Step
href="/guide/start/glossary"
title="Glossary"
description="Learn about Rsbuild related concepts"
href="https://github.com/web-infra-dev/rsbuild"
title="Support Rsbuild"
description="Support us with a star ⭐️"
/>
</NextSteps>
4 changes: 2 additions & 2 deletions website/docs/zh/guide/framework/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ import { PackageManagerTabs } from '@theme';
}}
/>

然后在 `Select framework` 时选择 `React` 即可。
然后在 `Select framework` 时选择 `React 19``React 18` 即可。

## 在已有项目中使用 React

为了能够编译 React,你需要注册 Rsbuild 的 [React 插件](/plugins/list/plugin-react)插件会自动添加 React 构建所需的配置
为了能够编译 React 的 JSX 语法,你需要注册 Rsbuild 的 [React 插件](/plugins/list/plugin-react)插件会自动添加构建一个 React 应用所需的配置

例如,在 `rsbuild.config.ts` 中注册:

Expand Down
6 changes: 3 additions & 3 deletions website/docs/zh/guide/start/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,8 @@ import Step from '@components/Step';
description="了解 Rsbuild 提供的所有功能"
/>
<Step
href="/guide/basic/configure-rsbuild"
title="查阅配置"
description="了解如何配置 Rsbuild"
href="https://github.com/web-infra-dev/rsbuild"
title="支持 Rsbuild"
description="点个 Star 支持一下✨"
/>
</NextSteps>
31 changes: 25 additions & 6 deletions website/docs/zh/guide/start/quick-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,13 @@ import { PackageManagerTabs } from '@theme';
}}
/>

然后按照提示操作即可。
按照提示一步步操作即可。在创建过程中,你可以选择是否需要 TypeScript、ESLint 等额外的工具。

项目创建完成后,你可以执行以下步骤:

- 执行 `git init` 来初始化 Git 仓库。
- 执行 `npm install`(或其他包管理器的 install 命令)安装项目依赖。
- 执行 `npm run dev` 启动开发服务器,服务器默认运行在 `localhost:5173`

### 模板

Expand Down Expand Up @@ -139,14 +145,16 @@ Templates:
- [从 Vue CLI 迁移](/guide/migration/vue-cli)
- [从 Vite 迁移](/guide/migration/vite)
- [从 Modern.js Builder 迁移](/guide/migration/modern-builder)
- [从 Tsup 迁移到 Rslib](https://lib.rsbuild.dev/zh/guide/migration/tsup)
- [从 Storybook 迁移到 Storybook Rsbuild](https://rspack.dev/zh/guide/migration/storybook)

### 其他项目

对于其他类型的项目,你可以手动安装 [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core) 包:
如果你的项目不属于上述迁移指南中提到的类型,你也可以直接安装 [@rsbuild/core](https://www.npmjs.com/package/@rsbuild/core) 包:

<PackageManagerTabs command="add @rsbuild/core -D" />

然后参考指南和文档,按需启用各个功能
完成安装后,你可以参考以下文档来配置你的项目

- 参考 [CLI 工具](/guide/basic/cli) 来了解可用的 CLI 命令。
- 参考 [插件列表](/plugins/list/index) 来选择 Rsbuild 插件。
Expand Down Expand Up @@ -175,6 +183,17 @@ Rsbuild 内置了一个轻量的命令行工具,包含 dev、build 等命令

Rsbuild CLI 默认会使用 `src/index.(js|ts|jsx|tsx)` 作为入口模块,你可以使用 [source.entry](/config/source/entry) 配置项来修改入口模块。

```ts title="rsbuild.config.ts"
export default {
source: {
entry: {
foo: './src/pages/foo/index.ts',
bar: './src/pages/bar/index.ts',
},
},
};
```

## 核心 npm 包

### @rsbuild/core
Expand Down Expand Up @@ -228,8 +247,8 @@ import Step from '@components/Step';
description="了解如何配置 Rsbuild"
/>
<Step
href="/guide/start/glossary"
title="名词解释"
description="了解 Rsbuild 相关的概念"
href="https://github.com/web-infra-dev/rsbuild"
title="支持 Rsbuild"
description="点个 Star 支持一下✨"
/>
</NextSteps>
6 changes: 5 additions & 1 deletion website/theme/components/Step.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@ import styles from './Step.module.scss';
import { useUrl } from './utils';

const Step = (props: { href: string; title: string; description: string }) => {
const isExternal = props.href.startsWith('http');
return (
<Link className={styles.step} href={useUrl(props.href)}>
<Link
className={styles.step}
href={isExternal ? props.href : useUrl(props.href)}
>
<p className={styles.title}>{props.title}</p>
<p className={styles.description}>{props.description}</p>
</Link>
Expand Down
Loading