Skip to content

Commit ebc45f5

Browse files
authored
Remove unnecessary backticks breaking markdown highlighting (#6025)
1 parent da93812 commit ebc45f5

11 files changed

+15
-15
lines changed

src/content/learn/removing-effect-dependencies.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -882,7 +882,7 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' };
882882

883883
// These are two different objects!
884884
console.log(Object.is(options1, options2)); // false
885-
````
885+
```
886886
887887
**Object and function dependencies can make your Effect re-synchronize more often than you need.**
888888
@@ -968,7 +968,7 @@ const roomId2 = 'music';
968968

969969
// These two strings are the same!
970970
console.log(Object.is(roomId1, roomId2)); // true
971-
````
971+
```
972972
973973
Thanks to this fix, the chat no longer re-connects if you edit the input:
974974

src/content/learn/separating-events-from-effects.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ function ChatRoom({ roomId, theme }) {
239239
});
240240
connection.connect();
241241
// ...
242-
````
242+
```
243243
244244
However, `theme` is a reactive value (it can change as a result of re-rendering), and [every reactive value read by an Effect must be declared as its dependency.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) Now you have to specify `theme` as a dependency of your Effect:
245245
@@ -256,7 +256,7 @@ function ChatRoom({ roomId, theme }) {
256256
};
257257
}, [roomId, theme]); // ✅ All dependencies declared
258258
// ...
259-
````
259+
```
260260
261261
Play with this example and see if you can spot the problem with this user experience:
262262
@@ -416,7 +416,7 @@ function ChatRoom({ roomId, theme }) {
416416
showNotification('Connected!', theme);
417417
});
418418
// ...
419-
````
419+
```
420420
421421
Here, `onConnected` is called an *Effect Event.* It's a part of your Effect logic, but it behaves a lot more like an event handler. The logic inside it is not reactive, and it always "sees" the latest values of your props and state.
422422

src/content/learn/updating-objects-in-state.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ const nextPosition = {};
184184
nextPosition.x = e.clientX;
185185
nextPosition.y = e.clientY;
186186
setPosition(nextPosition);
187-
````
187+
```
188188

189189
In fact, it is completely equivalent to writing this:
190190

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ import { createRoot } from 'react-dom/client';
133133

134134
const root = createRoot(document.getElementById('root'));
135135
root.render(<App />);
136-
````
136+
```
137137
138138
Usually, you only need to run this code once at startup. It will:
139139
@@ -395,7 +395,7 @@ root.render(App);
395395

396396
// ✅ Correct: <App /> is a component.
397397
root.render(<App />);
398-
````
398+
```
399399
400400
Or if you pass a function to `root.render`, instead of the result of calling it:
401401

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/cl
127127
import { hydrateRoot } from 'react-dom/client';
128128

129129
hydrateRoot(document.getElementById('root'), <App />);
130-
````
130+
```
131131
132132
This will hydrate the server HTML inside the <CodeStep step={1}>browser DOM node</CodeStep> with the <CodeStep step={2}>React component</CodeStep> for your app. Usually, you will do it once at startup. If you use a framework, it might do this behind the scenes for you.
133133

src/content/reference/react-dom/hydrate.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a
6868
import { hydrate } from 'react-dom';
6969

7070
hydrate(<App />, document.getElementById('root'));
71-
````
71+
```
7272
7373
Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
7474

src/content/reference/react-dom/render.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ import { render } from 'react-dom';
7777
import App from './App.js';
7878

7979
render(<App />, document.getElementById('root'));
80-
````
80+
```
8181
8282
### Rendering the root component {/*rendering-the-root-component*/}
8383

src/content/reference/react-dom/unmountComponentAtNode.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ render(<App />, rootNode);
6464

6565
// ...
6666
unmountComponentAtNode(rootNode);
67-
````
67+
```
6868

6969

7070
### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}

src/content/reference/react/cloneElement.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -427,7 +427,7 @@ With this approach, `Row` does not need to receive an `isHighlighted` prop at al
427427
export default function Row({ title }) {
428428
const isHighlighted = useContext(HighlightContext);
429429
// ...
430-
````
430+
```
431431
432432
This allows the calling component to not know or worry about passing `isHighlighted` to `<Row>`:
433433

src/content/reference/react/createContext.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ import { createContext } from 'react';
166166

167167
export const ThemeContext = createContext('light');
168168
export const AuthContext = createContext(null);
169-
````
169+
```
170170

171171
Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement to read or provide this context:
172172

src/content/reference/react/useEffect.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@ function ChatRoom({ roomId }) {
531531
serverUrl: serverUrl
532532
});
533533
// ...
534-
````
534+
```
535535
536536
There are also many excellent custom Hooks for every purpose available in the React ecosystem.
537537

0 commit comments

Comments
 (0)