Skip to content

Commit 63a96bc

Browse files
fix: conflicts
1 parent e0b4cf3 commit 63a96bc

21 files changed

+28
-28
lines changed

.github/ISSUE_TEMPLATE/3-framework.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ body:
88
value: |
99
## Apply to be included as a recommended React framework
1010
11-
_This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._
11+
_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._
1212
1313
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.
1414
15-
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/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
15+
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).
1616
1717
To be included, frameworks must meet the following criteria:
1818

src/components/Layout/HomeContent.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,8 +263,8 @@ export function HomeContent() {
263263
<CTA
264264
color="gray"
265265
icon="framework"
266-
href="/learn/start-a-new-react-project">
267-
從框架開始
266+
href="/learn/creating-a-react-app">
267+
開始使用框架
268268
</CTA>
269269
</div>
270270
</Center>

src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ The biggest change is that we introduced [`async` / `await`](https://github.com/
3131

3232
Now that we have data fetching pretty well sorted, we're exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We're doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads.
3333

34-
React Server Components has shipped in [Next.js App Router](/learn/start-a-new-react-project#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.
34+
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.
3535

3636
We generally recommend using an existing framework, but if you need to build your own custom framework, it is possible. Building your own RSC-compatible framework is not as easy as we'd like it to be, mainly due to the deep bundler integration needed. The current generation of bundlers are great for use on the client, but they weren't designed with first-class support for splitting a single module graph between the server and the client. This is why we're now partnering directly with bundler developers to get the primitives for RSC built-in.
3737

@@ -92,7 +92,7 @@ Since our last update, we've tested an experimental version of prerendering inte
9292

9393
## Transition Tracing {/*transition-tracing*/}
9494

95-
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/start-a-new-react-project#nextjs-app-router).
95+
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).
9696

9797
* * *
9898
In addition to this update, our team has made recent guest appearances on community podcasts and livestreams to speak more on our work and answer questions.

src/content/blog/2024/12/05/react-19.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ For more information, see [React DOM Static APIs](/reference/react-dom/static).
355355

356356
Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
357357

358-
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/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
358+
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).
359359

360360

361361
<Note>

src/content/learn/add-react-to-an-existing-project.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ title: 將 React 加入到一個現有的專案
2020

2121
以下是我們推薦的設定方式:
2222

23-
1. 使用其中一個[基於 React 的框架]((/learn/start-a-new-react-project))**建構你的應用程式中的 React 部分**
23+
1. 使用其中一個[基於 React 的框架](/learn/creating-a-react-app)**建構你的應用程式中的 React 部分**
2424
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/))。
2525
3. **設定你的伺服器或代理**,讓所有在 `/some-app/` 下的請求都由 React 應用程式處理。
2626

@@ -149,7 +149,7 @@ root.render(<NavigationBar />);
149149

150150
注意原始的 HTML 內容從 `index.html` 被保留下來,但是你自己的 `NavigationBar` React component 現在出現在你 HTML 中的 `<nav id="navigation">` 內。閱讀 [`createRoot` 使用文件](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react)以了解更多關於在現有 HTML 頁面中 render React component 的資訊。
151151

152-
當你在現有的專案中採用 React 時,通常會從小的互動式 component(如按鈕)開始,然後逐漸「向上移動」,直到最終整個頁面都是使用 React 建構的。如果你達到了那裡,我們建議立即遷移到[一個 React 框架](/learn/start-a-new-react-project) ,以充分利用 React 的優勢。
152+
當你在現有的專案中採用 React 時,通常會從小的互動式 component(如按鈕)開始,然後逐漸「向上移動」,直到最終整個頁面都是使用 React 建構的。如果你達到了那裡,我們建議立即遷移到[一個 React 框架](/learn/creating-a-react-app) ,以充分利用 React 的優勢。
153153

154154
## 在現有的原生手機應用程式中使用 React Native {/*using-react-native-in-an-existing-native-mobile-app*/}
155155

src/content/learn/synchronizing-with-effects.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -732,7 +732,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww
732732
733733
This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
734734
735-
- **If you use a [framework](/learn/start-a-new-react-project#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.
735+
- **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.
736736
- **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).
737737
738738
You can continue fetching data directly in Effects if neither of these approaches suit you.

src/content/learn/typescript.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
2020

2121
## Installation {/*installation*/}
2222

23-
All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
23+
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:
2424

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

src/content/learn/you-might-not-need-an-effect.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ There are two common cases in which you don't need Effects:
2626
* **You don't need Effects to transform data for rendering.** For example, let's say you want to filter a list before displaying it. You might feel tempted to write an Effect that updates a state variable when the list changes. However, this is inefficient. When you update the state, React will first call your component functions to calculate what should be on the screen. Then React will ["commit"](/learn/render-and-commit) these changes to the DOM, updating the screen. Then React will run your Effects. If your Effect *also* immediately updates the state, this restarts the whole process from scratch! To avoid the unnecessary render passes, transform all the data at the top level of your components. That code will automatically re-run whenever your props or state change.
2727
* **You don't need Effects to handle user events.** For example, let's say you want to send an `/api/buy` POST request and show a notification when the user buys a product. In the Buy button click event handler, you know exactly what happened. By the time an Effect runs, you don't know *what* the user did (for example, which button was clicked). This is why you'll usually handle user events in the corresponding event handlers.
2828

29-
You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
29+
You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
3030

3131
To help you gain the right intuition, let's look at some common concrete examples!
3232

@@ -757,7 +757,7 @@ This ensures that when your Effect fetches data, all responses except the last r
757757
758758
Handling race conditions is not the only difficulty with implementing data fetching. You might also want to think about caching responses (so that the user can click Back and see the previous screen instantly), how to fetch data on the server (so that the initial server-rendered HTML contains the fetched content instead of a spinner), and how to avoid network waterfalls (so that a child can fetch data without waiting for every parent).
759759
760-
**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
760+
**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
761761
762762
If you don't use a framework (and don't want to build your own) but would like to make data fetching from Effects more ergonomic, consider extracting your fetching logic into a custom Hook like in this example:
763763

src/content/learn/your-first-component.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ function Profile() {
215215

216216
你的 React 應用程式從「root」component 開始。通常,在你啟動一個新專案時,它會自動被建立。例如,如果你使用 [CodeSandbox](https://codesandbox.io/)[Next.js](https://nextjs.org/) 框架,root component 會定義在 pages/index.js 中。在這些例子中,你一直在 export root component。
217217

218-
大多數 React 應用程式只有 component。這意味著你不僅可以將 component 用於具有複用性的部分,例如按鈕,還可以用於更大規模的地方,像是側邊欄、列表以及完成最終的完整頁面!Component 是組織 UI 程式碼與 markup 的一種便捷方式,即便部分的 component 只使用了一次
218+
[基於 React 的框架](/learn/creating-a-react-app)更進一步。它們不使用空的 HTML 檔案,然後讓 React 用 JavaScript「接管」頁面管理,而是**會從你的 React 元件自動生成 HTML。這讓你的應用程式能夠在 JavaScript 程式碼載入之前就顯示一些內容
219219

220220
[基於 React 的框架]((/learn/start-a-new-react-project)) 更進一步。它們不只是使用空的 HTML 檔案並讓 React 通過 JavaScript 管理頁面,它們*還會*自動從你的 React component 中生成 HTML。這使得你的應用程式在 JavaScript 程式碼載入之前就能顯示一些內容。
221221

src/content/reference/react-dom/client/createRoot.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ When your HTML is empty, the user sees a blank page until the app's JavaScript c
209209
<div id="root"></div>
210210
```
211211
212-
This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
212+
This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/creating-a-react-app#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
213213
214214
</Note>
215215

0 commit comments

Comments
 (0)