Skip to content
Closed
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
116 changes: 116 additions & 0 deletions .github/ISSUE_TEMPLATE/3-framework.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
name: "📄 Suggest new framework"
description: "I am a framework author applying to be included as a recommended framework."
title: "[Framework]: "
labels: ["type: framework"]
body:
- type: markdown
attributes:
value: |
## Apply to be included as a recommended React framework

_This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/creating-a-react-app). If you are not a framework author, please contact the authors before submitting._

Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production.

While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).

To be included, frameworks must meet the following criteria:

- **Free & open-source**: must be open source and free to use.
- **Well maintained**. must be actively maintained, providing bug fixes and improvements.
- **Active community**: must have a sufficiently large and active community to support users.
- **Clear onboarding**: must have clear install steps to install the React version of the framework.
- **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem.
- **Self-hosting option**: must support an option to self-host applications without losing access to features.
- **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh.
- **User experience**. must provide built-in support for common problems like routing and data-fetching.
- **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time.

Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below.
- type: input
attributes:
label: Name
description: |
What is the name of your framework?
validations:
required: true
- type: input
attributes:
label: Homepage
description: |
What is the URL of your homepage?
validations:
required: true
- type: input
attributes:
label: Install instructions
description: |
What is the URL of your getting started guide?
validations:
required: true
- type: dropdown
attributes:
label: Is your framework open source?
description: |
We only recommend free and open source frameworks.
options:
- 'No'
- 'Yes'
validations:
required: true
- type: textarea
attributes:
label: Well maintained
description: |
Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples.
validations:
required: true
- type: textarea
attributes:
label: Active community
description: |
Please describe your community. Include the size of your community, and links to community resources.
validations:
required: true
- type: textarea
attributes:
label: Clear onboarding
description: |
Please describe how a user can install your framework with React. Include links to any relevant documentation.
validations:
required: true
- type: textarea
attributes:
label: Ecosystem compatibility
description: |
Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework.
validations:
required: true
- type: textarea
attributes:
label: Self-hosting option
description: |
Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework.
validations:
required: true
- type: textarea
attributes:
label: Developer Experience
description: |
Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh.
validations:
required: true
- type: textarea
attributes:
label: User Experience
description: |
Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR.
validations:
required: true
- type: textarea
attributes:
label: Compatible with our future vision for React
description: |
Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components.
validations:
required: true
5 changes: 5 additions & 0 deletions src/components/Layout/HomeContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -265,8 +265,13 @@ export function HomeContent() {
<CTA
color="gray"
icon="framework"
<<<<<<< HEAD
href="/learn/start-a-new-react-project">
使用框架开始一个新项目
=======
href="/learn/creating-a-react-app">
Get started with a framework
>>>>>>> 27576f10bdfd57fa30977818b641c7b6c9d032ec
</CTA>
</div>
</Center>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ RSC 将面向服务器的多页面应用程序的简单“请求/响应”思维

现在我们已经相当好地解决了数据提取的问题,我们正在探索另一个方向:从客户端向服务器发送数据,以便可以执行数据库变更和实现表单。我们通过在服务器/客户端边界传递 Server Action 函数来实现这一点。客户端可以调用该函数,提供无缝 RPC。而在 JavaScript 加载之前,Server Action 还可以提供逐步增强的表单。

<<<<<<< HEAD
RSC 已经在 [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router) 中发布,展示了一个真正深度集成的路由器,它使用了 RSC 并将其作为 primitive。但这不是构建 RSC 兼容的路由器和框架的唯一方法。RSC 规范和实现提供了特定功能的明确分离,旨在成为适用于兼容 React 框架的组件规范。
=======
React Server Components has shipped in [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks.
>>>>>>> 27576f10bdfd57fa30977818b641c7b6c9d032ec

我们通常建议使用现有的框架,但你仍然可以构建自定义框架。由于需要深度集成 bundler,构建自定义 RSC 兼容的框架并不像想象中那么容易。当前的若代 bundler 非常适合在客户端使用,但它们并没有专门为将单个模块图分割为服务器和客户端提供一流的支持而设计。因此我们选择直接与 bundler 开发人员合作,以将内置 RSC 作为 primitive。

Expand Down Expand Up @@ -92,7 +96,11 @@ React 的核心思想是开发人员将其 UI 定义为当前状态的函数。

## 追踪 Transition {/*transition-tracing*/}

<<<<<<< HEAD
追踪 Transition 的 API 可以检测 [React Transition](/reference/react/useTransition) 变慢的原因,并调查为什么会变慢。在上次更新后,我们完成了 API 的初始设计,并发布了一个 [RFC](https://github.com/reactjs/rfcs/pull/238),基本功能也已经实现。该项目目前处于暂停状态。我们欢迎对 RFC 进行反馈,并期待恢复其开发,为 React 提供更好的性能测量工具。这将特别对基于 React Transition 构建的路由非常有用,例如 [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router)。
=======
The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router).
>>>>>>> 27576f10bdfd57fa30977818b641c7b6c9d032ec

* * *
除了这个更新,我们的团队最近还在社区播客和直播中客串,更多地讲述我们的工作并回答问题。
Expand Down
4 changes: 4 additions & 0 deletions src/content/blog/2024/12/05/react-19.md
Original file line number Diff line number Diff line change
Expand Up @@ -355,7 +355,11 @@ For more information, see [React DOM Static APIs](/reference/react-dom/static).

服务器组件是一种新的选项,允许在打包前提前渲染组件,在与你的客户端应用程序或 SSR 服务器不同的环境中。这个独立的环境就是 React 服务器组件中的 "服务器"。服务器组件可以在你的 CI 服务器上在构建时运行一次,或者可以在每次请求时使用 web 服务器运行。

<<<<<<< HEAD
React 19 包含了所有从 Canary 渠道引入的 React 服务器组件功能。这意味着,现在可以将 React 19 作为 peer 依赖项来发布带有服务器组件的库,使用 `react-server` [导出条件](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) 用于支持 [全栈 React 架构](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision) 的框架。
=======
React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).
>>>>>>> 27576f10bdfd57fa30977818b641c7b6c9d032ec


<Note>
Expand Down
10 changes: 10 additions & 0 deletions src/content/learn/add-react-to-an-existing-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,15 @@ title: 将 React 添加到现有项目中

以下是推荐的配置方式:

<<<<<<< HEAD
1. 使用一个 [基于 React 的框架](/learn/start-a-new-react-project) 构建 **应用的 React 部分**。
2. **在框架配置中将 `/some-app` 指定为基本路径**(这里有 [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath) 与 [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/) 的配置样例)。
3. **配置服务器或代理**,以便所有位于 `/some-app/` 下的请求都由 React 应用处理。
=======
1. **Build the React part of your app** using one of the [React-based frameworks](/learn/creating-a-react-app).
2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
>>>>>>> 27576f10bdfd57fa30977818b641c7b6c9d032ec

这可以确保应用的 React 部分可以受益于这些框架中内置的 [最佳实践](/learn/build-a-react-app-from-scratch#consider-using-a-framework)。

Expand Down Expand Up @@ -149,7 +155,11 @@ root.render(<NavigationBar />);

请注意 `index.html` 中的原始 HTML 内容是如何保留的,但现在你自己的 `NavigationBar` React 组件出现在 HTML 的 `<nav id="navigation">` 中。阅读 [`createRoot` 用法文档](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) 以了解如何在现有 HTML 页面中渲染 React 组件。

<<<<<<< HEAD
当在现有项目中采用 React 时,通常会从小型交互式组件(例如按钮)开始,然后逐渐“向上移动”,直到最终整个页面都由 React 构建。到那个时候,我们建议立即迁移到 [一个 React 框架](/learn/start-a-new-react-project),以充分利用 React 的优势。
=======
When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/creating-a-react-app) right after to get the most out of React.
>>>>>>> 27576f10bdfd57fa30977818b641c7b6c9d032ec

## 在现有的原生移动应用中使用 React Native {/*using-react-native-in-an-existing-native-mobile-app*/}

Expand Down
5 changes: 5 additions & 0 deletions src/content/learn/synchronizing-with-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -732,8 +732,13 @@ function TodoList() {

这些弊端并不仅限于 React。任何库在组件挂载时进行数据获取都会遇到这些问题。与路由处理一样,要做好数据获取并非易事,因此我们推荐以下方法:

<<<<<<< HEAD
- **如果你正在使用 [框架](/learn/start-a-new-react-project#full-stack-frameworks) ,请使用其内置的数据获取机制**。现代 React 框架集成了高效的数据获取机制,不会出现上述问题。
- **否则,请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [TanStack Query](https://tanstack.com/query/latest)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以自己构建解决方案:在底层使用 Effect,但添加对请求的去重、缓存响应以及避免网络瀑布(通过预加载数据或将数据请求提升到路由层次)的逻辑。
=======
- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
>>>>>>> 27576f10bdfd57fa30977818b641c7b6c9d032ec

如果这些方法都不适合你,你可以继续直接在 Effect 中获取数据。

Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@ TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。Typ

## 安装 {/*installation*/}

<<<<<<< HEAD
所有的 [生产级 React 框架](/learn/start-a-new-react-project#full-stack-frameworks) 都支持使用 TypeScript。请按照框架特定的指南进行安装:
=======
All [production-grade React frameworks](/learn/creating-a-react-app#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
>>>>>>> 27576f10bdfd57fa30977818b641c7b6c9d032ec

- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
Expand Down
Loading
Loading