amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-22 11:52:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add space in import (#5889)

Browse Source
This commit is contained in:
이동현
2023-04-06 22:43:21 +09:00
committed by GitHub
parent a76a5984ec
commit c9d0cbfccd
8 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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
import {startTransition} from 'react';
import { startTransition } from 'react';
// Urgent: Show what was typed
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>
```js App.js
import {useState} from 'react';
import { useState } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -80,7 +80,7 @@ const initialTasks = [
```
```js AddTask.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function AddTask({onAddTask}) {
const [text, setText] = useState('');
@@ -104,7 +104,7 @@ export default function AddTask({onAddTask}) {
```
```js TaskList.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
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:
```js
import {useReducer} from 'react';
import { useReducer } from 'react';
```
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>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -575,7 +575,7 @@ const initialTasks = [
```
```js AddTask.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function AddTask({onAddTask}) {
const [text, setText] = useState('');
@@ -599,7 +599,7 @@ export default function AddTask({onAddTask}) {
```
```js TaskList.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
return (
@@ -679,7 +679,7 @@ If you want, you can even move the reducer to a different file:
<Sandpack>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
import tasksReducer from './tasksReducer.js';
@@ -763,7 +763,7 @@ export default function tasksReducer(tasks, action) {
```
```js AddTask.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function AddTask({onAddTask}) {
const [text, setText] = useState('');
@@ -787,7 +787,7 @@ export default function AddTask({onAddTask}) {
```
```js TaskList.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
return (
@@ -890,7 +890,7 @@ Just like with [updating objects](/learn/updating-objects-in-state#write-concise
<Sandpack>
```js App.js
import {useImmerReducer} from 'use-immer';
import { useImmerReducer } from 'use-immer';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';
@@ -965,7 +965,7 @@ const initialTasks = [
```
```js AddTask.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function AddTask({onAddTask}) {
const [text, setText] = useState('');
@@ -989,7 +989,7 @@ export default function AddTask({onAddTask}) {
```
```js TaskList.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function TaskList({tasks, onChangeTask, onDeleteTask}) {
return (
@@ -1127,10 +1127,10 @@ This means that your action object should have a `type: 'changed_selection'`. Yo
<Sandpack>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -1210,7 +1210,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
return (
@@ -1277,10 +1277,10 @@ Here is the example updated to dispatch the corresponding messages:
<Sandpack>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -1363,7 +1363,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
return (
@@ -1421,10 +1421,10 @@ Currently, pressing "Send" doesn't do anything. Add an event handler to the "Sen
<Sandpack>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -1507,7 +1507,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js active
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
return (
@@ -1560,10 +1560,10 @@ There are a couple of ways you could do it in the "Send" button event handler. O
<Sandpack>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -1646,7 +1646,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js active
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
return (
@@ -1708,10 +1708,10 @@ However, _from the user's perspective_, sending a message is a different action
<Sandpack>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -1800,7 +1800,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js active
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
return (
@@ -1905,10 +1905,10 @@ The `[key]: value` [computed property](https://developer.mozilla.org/en-US/docs/
<Sandpack>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -1997,7 +1997,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
return (
@@ -2082,10 +2082,10 @@ Here is the complete solution:
<Sandpack>
```js App.js
import {useReducer} from 'react';
import { useReducer } from 'react';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -2183,7 +2183,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
return (
@@ -2270,10 +2270,10 @@ Recall that a reducer function takes two arguments--the current state and the ac
<Sandpack>
```js App.js
import {useReducer} from './MyReact.js';
import { useReducer } from './MyReact.js';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -2347,7 +2347,7 @@ export function messengerReducer(state, action) {
```
```js MyReact.js active
import {useState} from 'react';
import { useState } from 'react';
export function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
@@ -2383,7 +2383,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
return (
@@ -2444,10 +2444,10 @@ Dispatching an action calls a reducer with the current state and the action, and
<Sandpack>
```js App.js
import {useReducer} from './MyReact.js';
import { useReducer } from './MyReact.js';
import Chat from './Chat.js';
import ContactList from './ContactList.js';
import {initialState, messengerReducer} from './messengerReducer';
import { initialState, messengerReducer } from './messengerReducer';
export default function Messenger() {
const [state, dispatch] = useReducer(messengerReducer, initialState);
@@ -2521,7 +2521,7 @@ export function messengerReducer(state, action) {
```
```js MyReact.js active
import {useState} from 'react';
import { useState } from 'react';
export function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
@@ -2560,7 +2560,7 @@ export default function ContactList({contacts, selectedId, dispatch}) {
```
```js Chat.js hidden
import {useState} from 'react';
import { useState } from 'react';
export default function Chat({contact, message, dispatch}) {
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>
```js
import {useState, useRef} from 'react';
import { useState, useRef } from 'react';
export default function Counter() {
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.
```jsx
import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
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>.
```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
import {hydrate} from 'react-dom';
import { hydrate } from 'react-dom';
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
import './styles.css';
import {hydrate} from 'react-dom';
import { hydrate } from 'react-dom';
import App from './App.js';
hydrate(<App />, document.getElementById('root'));
@@ -128,7 +128,7 @@ To silence hydration warnings on an element, add `suppressHydrationWarning={true
```js index.js
import './styles.css';
import {hydrate} from 'react-dom';
import { hydrate } from 'react-dom';
import App from './App.js';
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
import './styles.css';
import {hydrate} from 'react-dom';
import { hydrate } from 'react-dom';
import App from './App.js';
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>.
```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
import {render} from 'react-dom';
import { render } from 'react-dom';
import App from './App.js';
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
import './styles.css';
import {render} from 'react-dom';
import { render } from 'react-dom';
import App from './App.js';
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>
```js index.js active
import {render} from 'react-dom';
import { render } from 'react-dom';
import './styles.css';
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)
```js [[1, 4, "<App />"]]
import {hydrateRoot} from 'react-dom/client';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
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`:
```js {4}
import {hydrateRoot} from 'react-dom/client';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
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)
```js [[1, 4, "<App />"]]
import {hydrateRoot} from 'react-dom/client';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
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`:
```js {4}
import {hydrateRoot} from 'react-dom/client';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
hydrateRoot(document, <App assetMap={window.assetMap} />);