You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/editor-setup.md
-4Lines changed: 0 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,11 +31,7 @@ Baadhi ya vihariri huja na maumbile haya yakiwa yamejengwa ndani, lakini vingine
31
31
32
32
### Linting {/*linting*/}
33
33
34
-
<<<<<<< HEAD
35
34
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.
36
-
=======
37
-
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.
38
-
>>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698
39
35
40
36
*[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/))
41
37
*[Unganisha ESLint katika VSCode na kiendelezi rasmi](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
Copy file name to clipboardExpand all lines: src/content/learn/thinking-in-react.md
-34Lines changed: 0 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -37,15 +37,9 @@ Anza kwa kuchora visanduku kuzunguka kila kijenzi na kijenzi kidogo kwenye kiigi
37
37
38
38
Kulingana na msingi wako, unaweza kufikiria kugawanya muundo katika vijenzi kwa njia tofauti:
39
39
40
-
<<<<<<< HEAD
41
40
***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.
42
41
***CSS**--fikiria ni nini ungetengeneza viteule vya darasa. (Hatahivyo, vijenzi ni vidogo kwa kiasi fulani.)
43
42
***Design**--fikiria jinsi unavyoweza kupanga safu za muundo.
44
-
=======
45
-
***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.
46
-
***CSS**--consider what you would make class selectors for. (However, components are a bit less granular.)
47
-
***Design**--consider how you would organize the design's layers.
48
-
>>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698
49
43
50
44
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.
51
45
@@ -232,19 +226,10 @@ Kilichobaki labda ni hali.
232
226
233
227
Wacha tupitie moja baada ya nyingine tena:
234
228
235
-
<<<<<<< HEAD
236
229
1. Orodha asili ya bidhaa **imepitishwa kama vifaa, kwa hivyo haijabainishwa.**
237
230
2. Maandishi ya utafutaji yanaonekana kuwa ya hali kwani yanabadilika kwa wakati na hayawezi kukokotwa kutoka kwa chochote.
238
231
3. Thamani ya kisanduku cha kuteua inaonekana kuwa hali kwani inabadilika kwa wakati na haiwezi kukokotwa kutoka kwa chochote.
239
232
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.
240
-
=======
241
-
1. The original list of products is **passed in as props, so it's not state.**
242
-
2. The search text seems to be state since it changes over time and can't be computed from anything.
243
-
3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything.
244
-
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.
245
-
246
-
This means only the search text and the value of the checkbox are state! Nicely done!
247
-
>>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698
248
233
249
234
Hii ina maana kwamba ni maandishi ya utafutaji pekee na thamani ya kisanduku cha kuteua ndizo zilizotajwa! Imefanywa vizuri!
250
235
<DeepDive>
@@ -277,23 +262,13 @@ In the previous step, you found two pieces of state in this application: the sea
277
262
278
263
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.
279
264
280
-
<<<<<<< HEAD
281
265
Sasa wacha tupitie mkakati wetu kwao:
282
266
283
267
1.**Tambua vijenzi vinavyotumia hali:**
284
268
*`ProductTable` inahitaji kuchuja orodha ya bidhaa kulingana na hali hiyo (maandishi ya utafutaji na thamani ya kisanduku cha kuteua).
285
269
*`SearchBar` inahitaji kuonyesha hali hiyo (maandishi ya utafutaji na thamani ya kisanduku cha kuteua).
286
270
1.**Tafuta mzazi wao wa kawaida:** Kijenzi mzazi cha kwanza ambacho vijenzi vyote viwili hushiriki ni `FilterableProductTable`.
287
271
2.**Amua mahali pa kuishi**: Tutaweka maandishi ya kichujio na thamani za hali zilizochaguliwa katika `FilterableProductTable`.
288
-
=======
289
-
1.**Identify components that use state:**
290
-
*`ProductTable` needs to filter the product list based on that state (search text and checkbox value).
291
-
*`SearchBar` needs to display that state (search text and checkbox value).
292
-
2.**Find their common parent:** The first parent component both components share is `FilterableProductTable`.
293
-
3.**Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`.
294
-
295
-
So the state values will live in `FilterableProductTable`.
296
-
>>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698
297
272
298
273
Kwa hivyo state thamani zitaishi katika `FilterableProductTable`.
299
274
@@ -481,16 +456,7 @@ function SearchBar({ filterText, inStockOnly }) {
481
456
482
457
Hata hivyo, bado hujaongeza msimbo wowote ili kujibu vitendo vya mtumiaji kama vile kuandika. Hii itakuwa hatua yako ya mwisho.
483
458
484
-
<<<<<<< HEAD
485
459
## Hatua ya 5: Ongeza mtiririko wa data kinyume {/*step-5-add-inverse-data-flow*/}
486
-
=======
487
-
488
-
## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/}
489
-
490
-
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`.
491
-
492
-
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 `<input value={filterText} />`, 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.
493
-
>>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698
494
460
495
461
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`:
Copy file name to clipboardExpand all lines: src/content/learn/tutorial-tic-tac-toe.md
+2-4Lines changed: 2 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -801,7 +801,7 @@ Kwa kuwaita function hii ya `set` kutoka kwa mshughulikaji wa `onClick`, unaiamb
801
801
802
802

803
803
804
-
Kila Square ina hali yake: thamani ya `value` iliyohifadhiwa kwenye kila Square ni huru kabisa kwa nyinginezo. Unapobadilisha hali kwa kuita function ya `set`, React huboresha pia vipengele vya watoto vilivyo ndani.
804
+
Kila Square ina hali yake: thamani ya `value` iliyohifadhiwa kwenye kila Square ni huru kabisa kwa nyinginezo. Unapobadilisha hali kwa kuita function ya `set`, React huboresha pia vipengele vya watoto vilivyo ndani.
805
805
806
806
Baada ya mabadiliko haya, msimbo wako utaonekana hivi:
807
807
@@ -907,8 +907,6 @@ Ili kuchunguza kipengele fulani kwenye skrini, tumia kitufe kilicho kwenye kona
907
907
908
908

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.
913
911
914
912
@@ -2077,7 +2075,7 @@ Unaweza kuona jinsi kanuni yako inavyopaswa kuonekana hapa chini. Kumbuka kwamba
2077
2075
<ConsoleBlock level="warning">
2078
2076
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.
2079
2077
</ConsoleBlock>
2080
-
2078
+
2081
2079
Utarekebisha hitilafu hii katika sehemu inayofuata.
Copy file name to clipboardExpand all lines: src/content/reference/react/use.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -662,7 +662,7 @@ This cache pattern is the foundation for [re-fetching data](#re-fetching-data-in
662
662
663
663
<Pitfall>
664
664
665
-
Don't skip calling `use` based on whether a Promise is already settled.
665
+
##### Don't skip calling `use` based on whether a Promise is already settled. {/*conditional-use*/}
666
666
667
667
Unlike other hooks, `use` can be called inside conditions and loops — but it must always be called for the Promise itself. Never read `promise.status` or `promise.value` directly to bypass `use`; always pass the Promise to `use` and let React handle it.
0 commit comments