Skip to content

Commit a12ec9d

Browse files
arshadkazmi42arshadkazmi42
authored
Merge pull request #201 from reactjs/sync-707f22d2
Sync with reactjs.org @ 707f22d
2 parents 3736713 + e7be88a commit a12ec9d

File tree

65 files changed

+1197
-2491
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1197
-2491
lines changed

‎beta/public/html/single-file-example.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Hello World</title>
6-
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
7-
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
8-
6+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
8+
99
<!-- Don't use this in production—do this: https://reactjs.org/docs/add-react-to-a-website#add-jsx-to-a-project -->
1010
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
1111
</head>

‎beta/src/pages/apis/reactdom.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ npm install react-dom
2222

2323
```js
2424
// Importing a specific API:
25-
import { render } from 'react-dom';
25+
import { createRoot } from 'react-dom/client';
2626

2727
// Importing all APIs together:
28-
import * as ReactDOM from 'react';
28+
import * as ReactDOMClient from 'react-dom/client';
2929
```
3030

3131
</PackageImport>

‎beta/src/pages/apis/usereducer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const [state, dispatch] = useReducer(reducer, initialArg, init)
3636
Call `useReducer` at the top level of your component to manage state with a [reducer](/learn/extracting-state-logic-into-a-reducer).
3737

3838
```js [[1, 8, "state"], [2, 8, "dispatch"], [4, 8, "reducer"], [3, 8, "{ age: 42 }"]]
39-
import { useState } from 'react';
39+
import { useReducer } from 'react';
4040

4141
function reducer(state, action) {
4242
// ...

‎beta/src/pages/learn/add-react-to-a-website.md

+11-10
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ function LikeButton() {
7979
```js
8080
const domContainer = document.getElementById('कौम्पोनॅन्ट-यहाँ-जाएगा');
8181
ReactDOM.render(React.createElement(LikeButton), domContainer);
82+
root.render(React.createElement(LikeButton));
8283
```
8384

8485
**बधाई हो! आपने अभी-अभी अपनी वेबसाइट पर अपना पहला React कौम्पोनॅन्ट रेंडर किया है!**
@@ -94,15 +95,15 @@ ReactDOM.render(React.createElement(LikeButton), domContainer);
9495
2. **like_button.js** में, नए कंटेनर एलिमेंट के लिए एक और `ReactDOM.render()` ऐड करें:
9596

9697
```js {6,7,8,9}
97-
ReactDOM.render(
98-
React.createElement(LikeButton),
98+
const root1 = ReactDOM.createRoot(
9999
document.getElementById('कौम्पोनॅन्ट-यहाँ-जाएगा')
100100
);
101+
root1.render(React.createElement(LikeButton));
101102

102-
ReactDOM.render(
103-
React.createElement(LikeButton),
103+
const root2 = ReactDOM.createRoot(
104104
document.getElementById('कौम्पोनॅन्ट-यहाँ-भी-जाएगा')
105105
);
106+
root2.render(React.createElement(LikeButton));
106107
```
107108

108109
देखें [एक उदाहरण जो "Like" बटन को तीन बार को डिस्प्ले करता है और उसमें कुछ डेटा भेजता है](https://gist.github.com/rachelnabors/c0ea05cc33fbe75ad9bbf78e9044d7f8)!
@@ -115,8 +116,8 @@ ReactDOM.render(
115116
- **यदि आप अपनी एप्लिकेशन स्क्रिप्ट को पहले ही छोटा कर चुके हैं**, तो आपकी साइट प्रोडक्शन के लिए तैयार हो जाएगी यदि आप सुनिश्चित करते हैं कि डेप्लॉयड HTML React के संस्करणों को `product.min.js` में समाप्त करता है, जैसे:
116117

117118
```html
118-
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
119-
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
119+
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
120+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
120121
```
121122

122123
## JSX के साथ React का प्रयास करें {/*try-react-with-jsx*/}
@@ -144,8 +145,8 @@ return <button onClick={() => setLiked(true)}>Like</button>;
144145
```html {6}
145146
<!-- ... बाकी का <head> टैग ... -->
146147

147-
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
148-
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
148+
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
149+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
149150

150151
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
151152

@@ -157,8 +158,8 @@ return <button onClick={() => setLiked(true)}>Like</button>;
157158

158159
```jsx {1}
159160
<script type="text/babel">
160-
ReactDOM.render(
161-
<h1>Hello, world!</h1>, document.getElementById('root') );
161+
const root = ReactDOM.createRoot(document.getElementById('root'));
162+
root.render(<h1>Hello, world!</h1>);
162163
</script>
163164
```
164165

‎beta/src/pages/learn/choosing-the-state-structure.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2019,7 +2019,7 @@ export default function App() {
20192019
20202020
### Fix a broken packing list {/*fix-a-broken-packing-list*/}
20212021
2022-
This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark a place as completed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
2022+
This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark an item as packed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
20232023
20242024
<Hint>
20252025

‎beta/src/pages/learn/sharing-state-between-components.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ Lifting state up often changes the nature of what you're storing as state.
166166

167167
<img alt="The parent component passes the state setting function to both child components." src="/images/docs/sketches/s_passing-functions-down.png" />
168168

169-
In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use an number as the index of the active `Panel` for the state variable:
169+
In this case, only one panel should be active at a time. This means that the `Accordion` common parent component needs to keep track of *which* panel is the active one. Instead of a `boolean` value, it could use a number as the index of the active `Panel` for the state variable:
170170

171171
```js
172172
const [activeIndex, setActiveIndex] = useState(0);

‎content/authors.yml

+3
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ petehunt:
7676
rachelnabors:
7777
name: Rachel Nabors
7878
url: https://twitter.com/rachelnabors
79+
reactteam:
80+
name: The React Team
81+
url: https://reactjs.org/community/team.html
7982
rickhanlonii:
8083
name: Rick Hanlon
8184
url: https://twitter.com/rickhanlonii

0 commit comments

Comments
 (0)