lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add space in `import` (#5889)

main
이동현 2 years ago
committed by GitHub
parent
a76a5984ec
commit
c9d0cbfccd
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 57 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/content/blog/2022/03/29/react-v18.md
  2. 84
      src/content/learn/extracting-state-logic-into-a-reducer.md
  3. 2
      src/content/learn/manipulating-the-dom-with-refs.md
  4. 4
      src/content/learn/tutorial-tic-tac-toe.md
  5. 8
      src/content/reference/react-dom/hydrate.md
  6. 6
      src/content/reference/react-dom/render.md
  7. 4
      src/content/reference/react-dom/server/renderToPipeableStream.md
  8. 4
      src/content/reference/react-dom/server/renderToReadableStream.md

2
src/content/blog/2022/03/29/react-v18.md
View File

@ -123,7 +123,7 @@ Typically, for the best user experience, a single user input should result in bo
```js ```js
import {startTransition} from 'react'; import { startTransition } from 'react';
// Urgent: Show what was typed // Urgent: Show what was typed
setInputValue(input); setInputValue(input);

84
src/content/learn/extracting-state-logic-into-a-reducer.md
View File

@ -24,7 +24,7 @@ As your components grow in complexity, it can get harder to see at a glance all
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useState} from 'react'; import { useState } from 'react';
import AddTask from './AddTask.js'; import AddTask from './AddTask.js';
import TaskList from './TaskList.js'; import TaskList from './TaskList.js';
@ -80,7 +80,7 @@ const initialTasks = [
``` ```
```js AddTask.js hidden ```js AddTask.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function AddTask({onAddTask}) { export default function AddTask({onAddTask}) {
const [text, setText] = useState(''); const [text, setText] = useState('');
@ -104,7 +104,7 @@ export default function AddTask({onAddTask}) {
``` ```
```js TaskList.js hidden ```js TaskList.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) { export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
return ( return (
@ -462,7 +462,7 @@ You probably won't need to do this yourself, but this is similar to what React d
Finally, you need to hook up the `tasksReducer` to your component. Import the `useReducer` Hook from React: Finally, you need to hook up the `tasksReducer` to your component. Import the `useReducer` Hook from React:
```js ```js
import {useReducer} from 'react'; import { useReducer } from 'react';
``` ```
Then you can replace `useState`: Then you can replace `useState`:
@ -494,7 +494,7 @@ Now it's fully wired up! Here, the reducer is declared at the bottom of the comp
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import AddTask from './AddTask.js'; import AddTask from './AddTask.js';
import TaskList from './TaskList.js'; import TaskList from './TaskList.js';
@ -575,7 +575,7 @@ const initialTasks = [
``` ```
```js AddTask.js hidden ```js AddTask.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function AddTask({onAddTask}) { export default function AddTask({onAddTask}) {
const [text, setText] = useState(''); const [text, setText] = useState('');
@ -599,7 +599,7 @@ export default function AddTask({onAddTask}) {
``` ```
```js TaskList.js hidden ```js TaskList.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) { export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
return ( return (
@ -679,7 +679,7 @@ If you want, you can even move the reducer to a different file:
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import AddTask from './AddTask.js'; import AddTask from './AddTask.js';
import TaskList from './TaskList.js'; import TaskList from './TaskList.js';
import tasksReducer from './tasksReducer.js'; import tasksReducer from './tasksReducer.js';
@ -763,7 +763,7 @@ export default function tasksReducer(tasks, action) {
``` ```
```js AddTask.js hidden ```js AddTask.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function AddTask({onAddTask}) { export default function AddTask({onAddTask}) {
const [text, setText] = useState(''); const [text, setText] = useState('');
@ -787,7 +787,7 @@ export default function AddTask({onAddTask}) {
``` ```
```js TaskList.js hidden ```js TaskList.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) { export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
return ( return (
@ -890,7 +890,7 @@ Just like with [updating objects](/learn/updating-objects-in-state#write-concise
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useImmerReducer} from 'use-immer'; import { useImmerReducer } from 'use-immer';
import AddTask from './AddTask.js'; import AddTask from './AddTask.js';
import TaskList from './TaskList.js'; import TaskList from './TaskList.js';
@ -965,7 +965,7 @@ const initialTasks = [
``` ```
```js AddTask.js hidden ```js AddTask.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function AddTask({onAddTask}) { export default function AddTask({onAddTask}) {
const [text, setText] = useState(''); const [text, setText] = useState('');
@ -989,7 +989,7 @@ export default function AddTask({onAddTask}) {
``` ```
```js TaskList.js hidden ```js TaskList.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) { export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
return ( return (
@ -1127,10 +1127,10 @@ This means that your action object should have a `type: 'changed_selection'`. Yo
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -1210,7 +1210,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js ```js Chat.js
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (
@ -1277,10 +1277,10 @@ Here is the example updated to dispatch the corresponding messages:
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -1363,7 +1363,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js ```js Chat.js
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (
@ -1421,10 +1421,10 @@ Currently, pressing "Send" doesn't do anything. Add an event handler to the "Sen
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -1507,7 +1507,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js active ```js Chat.js active
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (
@ -1560,10 +1560,10 @@ There are a couple of ways you could do it in the "Send" button event handler. O
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -1646,7 +1646,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js active ```js Chat.js active
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (
@ -1708,10 +1708,10 @@ However, _from the user's perspective_, sending a message is a different action
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -1800,7 +1800,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js active ```js Chat.js active
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (
@ -1905,10 +1905,10 @@ The `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -1997,7 +1997,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js ```js Chat.js
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (
@ -2082,10 +2082,10 @@ Here is the complete solution:
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from 'react'; import { useReducer } from 'react';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -2183,7 +2183,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js ```js Chat.js
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (
@ -2270,10 +2270,10 @@ Recall that a reducer function takes two arguments--the current state and the ac
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from './MyReact.js'; import { useReducer } from './MyReact.js';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -2347,7 +2347,7 @@ export function messengerReducer(state, action) {
``` ```
```js MyReact.js active ```js MyReact.js active
import {useState} from 'react'; import { useState } from 'react';
export function useReducer(reducer, initialState) { export function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState); const [state, setState] = useState(initialState);
@ -2383,7 +2383,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js hidden ```js Chat.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (
@ -2444,10 +2444,10 @@ Dispatching an action calls a reducer with the current state and the action, and
<Sandpack> <Sandpack>
```js App.js ```js App.js
import {useReducer} from './MyReact.js'; import { useReducer } from './MyReact.js';
import Chat from './Chat.js'; import Chat from './Chat.js';
import ContactList from './ContactList.js'; import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer'; import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() { export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState); const [state, dispatch] = useReducer(messengerReducer, initialState);
@ -2521,7 +2521,7 @@ export function messengerReducer(state, action) {
``` ```
```js MyReact.js active ```js MyReact.js active
import {useState} from 'react'; import { useState } from 'react';
export function useReducer(reducer, initialState) { export function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState); const [state, setState] = useState(initialState);
@ -2560,7 +2560,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
``` ```
```js Chat.js hidden ```js Chat.js hidden
import {useState} from 'react'; import { useState } from 'react';
export default function Chat({contact, message, dispatch}) { export default function Chat({contact, message, dispatch}) {
return ( return (

2
src/content/learn/manipulating-the-dom-with-refs.md
View File

@ -643,7 +643,7 @@ Try pressing "Toggle with setState" a few times. The message should disappear an
<Sandpack> <Sandpack>
```js ```js
import {useState, useRef} from 'react'; import { useState, useRef } from 'react';
export default function Counter() { export default function Counter() {
const [show, setShow] = useState(true); const [show, setShow] = useState(true);

4
src/content/learn/tutorial-tic-tac-toe.md
View File

@ -330,8 +330,8 @@ Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. Th
Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser. Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser.
```jsx ```jsx
import {StrictMode} from 'react'; import { StrictMode } from 'react';
import {createRoot} from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import './styles.css'; import './styles.css';
import App from './App'; import App from './App';

8
src/content/reference/react-dom/hydrate.md
View File

@ -65,7 +65,7 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>. Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]] ```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
import {hydrate} from 'react-dom'; import { hydrate } from 'react-dom';
hydrate(<App />, document.getElementById('root')); hydrate(<App />, document.getElementById('root'));
```` ````
@ -90,7 +90,7 @@ In apps fully built with React, **you will usually only hydrate one "root", once
```js index.js active ```js index.js active
import './styles.css'; import './styles.css';
import {hydrate} from 'react-dom'; import { hydrate } from 'react-dom';
import App from './App.js'; import App from './App.js';
hydrate(<App />, document.getElementById('root')); hydrate(<App />, document.getElementById('root'));
@ -128,7 +128,7 @@ To silence hydration warnings on an element, add `suppressHydrationWarning={true
```js index.js ```js index.js
import './styles.css'; import './styles.css';
import {hydrate} from 'react-dom'; import { hydrate } from 'react-dom';
import App from './App.js'; import App from './App.js';
hydrate(<App />, document.getElementById('root')); hydrate(<App />, document.getElementById('root'));
@ -166,7 +166,7 @@ If you intentionally need to render something different on the server and the cl
```js index.js ```js index.js
import './styles.css'; import './styles.css';
import {hydrate} from 'react-dom'; import { hydrate } from 'react-dom';
import App from './App.js'; import App from './App.js';
hydrate(<App />, document.getElementById('root')); hydrate(<App />, document.getElementById('root'));

6
src/content/reference/react-dom/render.md
View File

@ -73,7 +73,7 @@ An app fully built with React will usually only have one `render` call with its
Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>. Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]] ```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
import {render} from 'react-dom'; import { render } from 'react-dom';
import App from './App.js'; import App from './App.js';
render(<App />, document.getElementById('root')); render(<App />, document.getElementById('root'));
@ -87,7 +87,7 @@ In apps fully built with React, **you will usually only do this once at startup*
```js index.js active ```js index.js active
import './styles.css'; import './styles.css';
import {render} from 'react-dom'; import { render } from 'react-dom';
import App from './App.js'; import App from './App.js';
render(<App />, document.getElementById('root')); render(<App />, document.getElementById('root'));
@ -188,7 +188,7 @@ You can call `render` more than once on the same DOM node. As long as the compon
<Sandpack> <Sandpack>
```js index.js active ```js index.js active
import {render} from 'react-dom'; import { render } from 'react-dom';
import './styles.css'; import './styles.css';
import App from './App.js'; import App from './App.js';

4
src/content/reference/react-dom/server/renderToPipeableStream.md
View File

@ -127,7 +127,7 @@ React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossar
On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
```js [[1, 4, "<App />"]] ```js [[1, 4, "<App />"]]
import {hydrateRoot} from 'react-dom/client'; import { hydrateRoot } from 'react-dom/client';
import App from './App.js'; import App from './App.js';
hydrateRoot(document, <App />); hydrateRoot(document, <App />);
@ -203,7 +203,7 @@ app.use('/', (request, response) => {
In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`: In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
```js {4} ```js {4}
import {hydrateRoot} from 'react-dom/client'; import { hydrateRoot } from 'react-dom/client';
import App from './App.js'; import App from './App.js';
hydrateRoot(document, <App assetMap={window.assetMap} />); hydrateRoot(document, <App assetMap={window.assetMap} />);

4
src/content/reference/react-dom/server/renderToReadableStream.md
View File

@ -128,7 +128,7 @@ React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossar
On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
```js [[1, 4, "<App />"]] ```js [[1, 4, "<App />"]]
import {hydrateRoot} from 'react-dom/client'; import { hydrateRoot } from 'react-dom/client';
import App from './App.js'; import App from './App.js';
hydrateRoot(document, <App />); hydrateRoot(document, <App />);
@ -201,7 +201,7 @@ async function handler(request) {
In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`: In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
```js {4} ```js {4}
import {hydrateRoot} from 'react-dom/client'; import { hydrateRoot } from 'react-dom/client';
import App from './App.js'; import App from './App.js';
hydrateRoot(document, <App assetMap={window.assetMap} />); hydrateRoot(document, <App assetMap={window.assetMap} />);

Write Preview
Loading…
Cancel
Save