diff --git a/public/images/tutorial/codesandbox-devtools.png b/public/images/tutorial/codesandbox-devtools.png deleted file mode 100644 index 1f7ebd500..000000000 Binary files a/public/images/tutorial/codesandbox-devtools.png and /dev/null differ diff --git a/public/images/tutorial/components-tab.png b/public/images/tutorial/components-tab.png new file mode 100644 index 000000000..90ce0770e Binary files /dev/null and b/public/images/tutorial/components-tab.png differ diff --git a/public/images/tutorial/devtools-inspect.gif b/public/images/tutorial/devtools-inspect.gif new file mode 100644 index 000000000..5c623e6a7 Binary files /dev/null and b/public/images/tutorial/devtools-inspect.gif differ diff --git a/public/images/tutorial/devtools-select.gif b/public/images/tutorial/devtools-select.gif deleted file mode 100644 index dd1e1aa61..000000000 Binary files a/public/images/tutorial/devtools-select.gif and /dev/null differ diff --git a/public/images/tutorial/sandbox-new-tab.png b/public/images/tutorial/sandbox-new-tab.png new file mode 100644 index 000000000..093a363fb Binary files /dev/null and b/public/images/tutorial/sandbox-new-tab.png differ diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 024207dd8..f7d643b93 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -31,7 +31,11 @@ Baadhi ya vihariri huja na maumbile haya yakiwa yamejengwa ndani, lakini vingine ### Linting {/*linting*/} +<<<<<<< HEAD Code linters hupata matatizo katika kodi yako unapoandika, zikikusaidia kuyarekebisha mapema. [ESLint](https://eslint.org/) ni linter maarufu ya chanzo wazi (open source) kwa ajili ya JavaScript. +======= +Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. +>>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd * [Sakinisha ESLint kwa mpangilio uliopendekezwa kwa React](https://www.npmjs.com/package/eslint-config-react-app) (hakikisha una [Node imesakinishwa!](https://nodejs.org/en/download/current/)) * [Unganisha ESLint katika VSCode na kiendelezi rasmi](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 7019c18fb..a895ded6e 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -37,9 +37,15 @@ Anza kwa kuchora visanduku kuzunguka kila kijenzi na kijenzi kidogo kwenye kiigi Kulingana na msingi wako, unaweza kufikiria kugawanya muundo katika vijenzi kwa njia tofauti: +<<<<<<< HEAD * **Programming**--tumia mbinu zile zile za kuamua ikiwa unapaswa kuunda kitendaji kipya au object. Mbinu moja kama hiyo ni [kanuni ya uwajibikaji mmoja (single responsibility principle)](https://en.wikipedia.org/wiki/Single_responsibility_principle), yaani, kijenzi kinapaswa kufanya jambo moja tu. Ikiwa kitaishia kukua, inapaswa kigawanywe kiwe vijenzi vidogo. * **CSS**--fikiria ni nini ungetengeneza viteule vya darasa. (Hatahivyo, vijenzi ni vidogo kwa kiasi fulani.) * **Design**--fikiria jinsi unavyoweza kupanga safu za muundo. +======= +* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), that is, a component should ideally only be concerned with one thing. If it ends up growing, it should be decomposed into smaller subcomponents. +* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) +* **Design**--consider how you would organize the design's layers. +>>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd Ikiwa JSON yako imeundwa vizuri, mara nyingi utapata kwamba inaelekeza kwa muundo wa vijenzi vya UI yako. Hiyo ni kwa sababu UI na miundo ya data mara nyingi huwa na usanifu sawa wa habari--yaani, umbo sawa. Tenganisha UI yako katika vijenzi, ambapo kila kijenzi kinalingana na kipande kimoja cha muundo yako wa data. @@ -226,10 +232,19 @@ Kilichobaki labda ni hali. Wacha tupitie moja baada ya nyingine tena: +<<<<<<< HEAD 1. Orodha asili ya bidhaa **imepitishwa kama vifaa, kwa hivyo haijabainishwa.** 2. Maandishi ya utafutaji yanaonekana kuwa ya hali kwani yanabadilika kwa wakati na hayawezi kukokotwa kutoka kwa chochote. 3. Thamani ya kisanduku cha kuteua inaonekana kuwa hali kwani inabadilika kwa wakati na haiwezi kukokotwa kutoka kwa chochote. 4. Orodha iliyochujwa ya bidhaa **haijabainishwa kwa sababu inaweza kukokotwa** kwa kuchukua orodha asili ya bidhaa na kuichuja kulingana na maandishi ya utafutaji na thamani ya kisanduku cha kuteua. +======= +1. The original list of products is **passed in as props, so it's not state.** +2. The search text seems to be state since it changes over time and can't be computed from anything. +3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything. +4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox. + +This means only the search text and the value of the checkbox are state! Nicely done! +>>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd Hii ina maana kwamba ni maandishi ya utafutaji pekee na thamani ya kisanduku cha kuteua ndizo zilizotajwa! Imefanywa vizuri! @@ -262,6 +277,7 @@ In the previous step, you found two pieces of state in this application: the sea Katika hatua ya awali, ulipata vipande viwili vya hali katika programu hii: maandishi ya ingizo ya utafutaji, na thamani ya kisanduku cha kuteua. Katika mfano huu, daima huonekana pamoja, kwa hiyo ni mantiki kuviweka katika sehemu moja. +<<<<<<< HEAD Sasa wacha tupitie mkakati wetu kwao: 1. **Tambua vijenzi vinavyotumia hali:** @@ -269,6 +285,15 @@ Sasa wacha tupitie mkakati wetu kwao: * `SearchBar` inahitaji kuonyesha hali hiyo (maandishi ya utafutaji na thamani ya kisanduku cha kuteua). 1. **Tafuta mzazi wao wa kawaida:** Kijenzi mzazi cha kwanza ambacho vijenzi vyote viwili hushiriki ni `FilterableProductTable`. 2. **Amua mahali pa kuishi**: Tutaweka maandishi ya kichujio na thamani za hali zilizochaguliwa katika `FilterableProductTable`. +======= +1. **Identify components that use state:** + * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). + * `SearchBar` needs to display that state (search text and checkbox value). +2. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. +3. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. + +So the state values will live in `FilterableProductTable`. +>>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd Kwa hivyo state thamani zitaishi katika `FilterableProductTable`. @@ -456,7 +481,16 @@ function SearchBar({ filterText, inStockOnly }) { Hata hivyo, bado hujaongeza msimbo wowote ili kujibu vitendo vya mtumiaji kama vile kuandika. Hii itakuwa hatua yako ya mwisho. +<<<<<<< HEAD ## Hatua ya 5: Ongeza mtiririko wa data kinyume {/*step-5-add-inverse-data-flow*/} +======= + +## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/} + +Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. + +React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing ``, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes. +>>>>>>> 2639f369946f763fff9a2572b0d7c4b9e2f83ebd You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by `FilterableProductTable`, so only it can call `setFilterText` and `setInStockOnly`. To let `SearchBar` update the `FilterableProductTable`'s state, you need to pass these functions down to `SearchBar`: diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index e9634c3e3..8e369b79a 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -337,11 +337,7 @@ import './styles.css'; import App from './App'; ``` -<<<<<<< HEAD Mstari wa 1-5 unaleta vipande vyote muhimu pamoja: -======= -Lines 1-5 bring all the necessary pieces together: ->>>>>>> 152a471aa9ac2f6f0f3e64c04f39da790d40cf61 * React * Maktaba ya React ya kuwasiliana na kivinjari cha wavuti (React DOM) @@ -555,11 +551,7 @@ export default function Board() { } ``` -<<<<<<< HEAD Angalia jinsi, kinyume na `div`s za kivinjari, viungo vyako `Board` na `Square` lazima vianze na herufi kubwa. -======= -Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. ->>>>>>> 152a471aa9ac2f6f0f3e64c04f39da790d40cf61 Hebu tuangalie: @@ -915,11 +907,10 @@ Ili kuchunguza kipengele fulani kwenye skrini, tumia kitufe kilicho kwenye kona ![Kuchagua vipengele kwenye ukurasa na React DevTools](../images/tutorial/devtools-select.gif) - +![components tab](../images/tutorial/components-tab.png) Kwa maendeleo ya ndani (local development), React DevTools inapatikana kama [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), na [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) *browser extension*. Isakinishe, na kichupo cha *Components* kitaonekana kwenye Zana za Watengenezaji wa kivinjari chako kwa tovuti zinazotumia React. - ## Kukamilisha Mchezo {/*completing-the-game*/} @@ -1102,11 +1093,7 @@ function Square({ value, onSquareClick }) { } ``` -<<<<<<< HEAD Sasa utaunganisha kipengele cha `onSquareClick` na function katika sehemu ya `Board` utakayoita `handleClick`. Ili kuunganisha `onSquareClick` na `handleClick`, utapita function kwa kipengele cha `onSquareClick` cha sehemu ya kwanza ya `Square`: -======= -Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component: ->>>>>>> 152a471aa9ac2f6f0f3e64c04f39da790d40cf61 ```js export default function Board() { @@ -2085,22 +2072,13 @@ export default function Game() { } ``` -<<<<<<< HEAD Unaweza kuona jinsi kanuni yako inavyopaswa kuonekana hapa chini. Kumbuka kwamba unapaswa kuona hitilafu katika koni ya zana za mende inayosema: -======= -You can see what your code should look like below. Note that you should see an error in the developer tools console that says: ->>>>>>> 152a471aa9ac2f6f0f3e64c04f39da790d40cf61 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`. -<<<<<<< HEAD Utarekebisha hitilafu hii katika sehemu inayofuata. -======= - -You'll fix this error in the next section. ->>>>>>> 152a471aa9ac2f6f0f3e64c04f39da790d40cf61 diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index b20f723ac..2e4673cab 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -1314,7 +1314,12 @@ function Albums({ albumsPromise }) { ``` ---- +```jsx +function Albums({ albumsPromise }) { + // ✅ Call `use` without try-catch + const albums = use(albumsPromise); + // ... +``` ### I'm getting a warning: "A component was suspended by an uncached promise" {/*uncached-promise-error*/} diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index 02069c363..022277df4 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -826,7 +826,7 @@ const initialTasks = [ ``` ```js src/AddTask.js -import { useState, useContext } from 'react'; +import { useState } from 'react'; import { useTasksDispatch } from './TasksContext.js'; export default function AddTask() { @@ -855,7 +855,7 @@ let nextId = 3; ``` ```js src/TaskList.js -import { useState, useContext } from 'react'; +import { useState } from 'react'; import { useTasks, useTasksDispatch } from './TasksContext.js'; export default function TaskList() { diff --git a/src/content/versions.md b/src/content/versions.md index b48dc364c..8cc54085b 100644 --- a/src/content/versions.md +++ b/src/content/versions.md @@ -54,13 +54,28 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=IBBN-s77YSI) **Releases** -- [v19.2.1 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1922-dec-11-2025) +- [v19.2.7 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1927-june-1-2026) +- [v19.2.6 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1926-may-6-2026) +- [v19.2.5 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1925-march-18-2026) +- [v19.2.4 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1924-jan-26-2026) +- [v19.2.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1923-dec-11-2025) +- [v19.2.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1922-dec-11-2025) - [v19.2.1 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1921-dec-3-2025) - [v19.2.0 (October, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1920-october-1st-2025) +- [v19.1.8 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1918-june-1-2026) +- [v19.1.7 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1917-may-6-2026) +- [v19.1.6 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1916-march-18-2026) +- [v19.1.5 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1915-jan-26-2026) +- [v19.1.4 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1914-dec-11-2025) - [v19.1.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1913-dec-11-2025) - [v19.1.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1912-dec-3-2025) - [v19.1.1 (July, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1911-july-28-2025) - [v19.1.0 (March, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1910-march-28-2025) +- [v19.0.7 (June, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1907-june-1-2026) +- [v19.0.6 (May, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1906-may-6-2026) +- [v19.0.5 (March, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1905-march-18-2026) +- [v19.0.4 (January, 2026)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1904-jan-26-2026) +- [v19.0.3 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1903-dec-11-2025) - [v19.0.2 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1902-dec-11-2025) - [v19.0.1 (December, 2025)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1901-dec-3-2025) - [v19.0.0 (December, 2024)](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024)