From 2348bd8ed7fb66fedf04726eb046065be7f4e23f Mon Sep 17 00:00:00 2001 From: Muhammad Idrees Date: Thu, 27 Oct 2022 16:43:19 +0500 Subject: [PATCH] It's NoteEditor.js instead of NodeEditor.js (#231) --- text/0188-server-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/text/0188-server-components.md b/text/0188-server-components.md index 697fbba5..26e4ab3f 100644 --- a/text/0188-server-components.md +++ b/text/0188-server-components.md @@ -85,12 +85,12 @@ This example illustrates a few key points: * This is “just” a React component -- it takes in props and renders a view. There are some constraints of Server Components - they can’t use state or effects, for example - but overall they work as you’d expect. More details are provided below in [Capabilities & Constraints of Server and Client Components](#capabilities--constraints-of-server-and-client-components). * Server Components can directly access server data sources such as a database, as illustrated in (B). This is implemented via a [generic mechanism that supports arbitrary asynchronous data sources with `async` / `await`.](https://github.com/reactjs/rfcs/pull/229) -* Server Components can hand off rendering to the client by importing and rendering a “client” component, as illustrated in (A1) and (A2) respectively. Client Components contain a [`'use client'` directive at the top of the file](https://github.com/reactjs/rfcs/pull/227). Bundlers will treat these imports similarly to other dynamic imports, potentially splitting them (and all the files they import) into another bundle according to various heuristics. In this example, `NodeEditor.js` would only be loaded on the client if `props.isEditing` was true. +* Server Components can hand off rendering to the client by importing and rendering a “client” component, as illustrated in (A1) and (A2) respectively. Client Components contain a [`'use client'` directive at the top of the file](https://github.com/reactjs/rfcs/pull/227). Bundlers will treat these imports similarly to other dynamic imports, potentially splitting them (and all the files they import) into another bundle according to various heuristics. In this example, `NoteEditor.js` would only be loaded on the client if `props.isEditing` was true. In contrast, Client Components are the typical components you’re already used to. They can access the full range of React features: state, effects, access to the DOM, etc. The name “Client Component” doesn’t mean anything new, it only serves to distinguish these components from Server Components. To continue our example, here’s how we can implement the Note editor: ```javascript -// NodeEditor.js - Client Component +// NoteEditor.js - Client Component 'use client';