From 18745ebf74d37f287f375cee6bacd6e135552741 Mon Sep 17 00:00:00 2001 From: dennis-codes Date: Tue, 11 Aug 2026 16:44:09 +0300 Subject: [PATCH 1/3] Translate Describing the UI chapter to Swahili Swahili translation of the Describing the UI Learn chapter (9 pages) plus a TRANSLATION.md glossary/style guide for consistent terminology. Excludes Writing Markup with JSX (already claimed by @kazz54). Refs #1 --- TRANSLATION.md | 99 ++++++++ src/content/learn/conditional-rendering.md | 228 +++++++++--------- src/content/learn/describing-the-ui.md | 158 ++++++------ .../importing-and-exporting-components.md | 127 +++++----- .../javascript-in-jsx-with-curly-braces.md | 112 ++++----- src/content/learn/keeping-components-pure.md | 192 +++++++-------- .../learn/passing-props-to-a-component.md | 210 ++++++++-------- src/content/learn/rendering-lists.md | 188 ++++++++------- .../learn/understanding-your-ui-as-a-tree.md | 94 ++++---- src/content/learn/your-first-component.md | 152 ++++++------ 10 files changed, 831 insertions(+), 729 deletions(-) create mode 100644 TRANSLATION.md diff --git a/TRANSLATION.md b/TRANSLATION.md new file mode 100644 index 000000000..fe3c341c1 --- /dev/null +++ b/TRANSLATION.md @@ -0,0 +1,99 @@ +# Mwongozo wa Tafsiri / Translation Style Guide (Swahili · `sw`) + +This guide keeps the Swahili translation of react.dev **consistent** across pages and +contributors. Read it before translating, and follow the glossary so every page uses the +same word for the same React concept. Consistency is what makes the docs great to learn from. + +Before starting a page, **claim it** on the progress issue +([#1](https://github.com/reactjs/sw.react.dev/issues/1)) so we don't duplicate work. One page +per pull request keeps reviews small. + +--- + +## Golden rules + +1. **Translate prose, not code.** Translate the explanatory text. In code blocks, translate + only `// comments` and clearly user-facing display strings (e.g. button labels, headings + shown on screen). **Never** rename variables, functions, `props`, imports, or object keys — + that would break the examples. +2. **Keep heading anchors in English.** A heading like `## Your first component {/*your-first-component*/}` + becomes `## Component yako ya kwanza {/*your-first-component*/}`. Translate the visible title; + **leave the `{/*...*/}` slug exactly as-is** — it is the URL anchor and cross-page links depend on it. +3. **Keep MDX components and their props untouched:** ``, ``, ``, + ``, ``, ``, ``, ``, ``, ``, etc. + Translate the text *inside* them; never translate the tag names or attributes like `path=` / `name=`. +4. **Keep core API terms in English**, with a short Swahili gloss in parentheses on first use per + page — e.g. *component (kipengele)*, *state (hali)*. Developers need to recognize the real API + names. After the first mention on a page, the English term alone is fine. +5. **Don't translate:** JSX/HTML tags and attributes, file paths, URLs, package names, keywords + (`import`, `export`, `return`, `const`), `console.log` output that code depends on, and proper + nouns (React, JavaScript, DOM, JSON). +6. **Tone:** clear, friendly, and direct — the same encouraging teaching voice as the English docs. + Address the reader as *wewe* ("you"). Prefer plain, widely-understood Swahili over rare coinages. + +--- + +## Glossary (Kamusi) + +| English | Swahili convention | Notes | +|--------------------|-------------------------------------------|-------| +| component | **component** *(kipengele)* on first use | Keep English; homepage/Quick Start use *kipengele* for the gloss. | +| props | **props** | Keep as-is. | +| state | **state** *(hali)* on first use | Keep English; existing pages use *hali*. | +| Hook | **Hook** | Keep, capitalized. | +| render (verb) | **ku-render** / kuonyesha | Keep "render" as the technical verb; *kuonyesha* (to display) in plain prose. | +| markup | **markup** | Keep as-is. | +| JSX / HTML / CSS / DOM / UI | keep as-is | Acronyms stay in English. | +| function | function *(kitendaji)* | Keep English; gloss once if helpful. | +| variable | kigezo | | +| value | thamani | | +| array | array *(safu)* | | +| object | object | Keep as-is. | +| attribute / property | sifa | | +| nested / to nest | kupachika / kuweka ndani | | +| reusable | inayoweza kutumika tena | | +| parent / child (component) | mzazi / mtoto | | +| tree | mti *(tree)* | | +| root | mzizi *(root)* | | +| bug | hitilafu *(bug)* | | +| pure function | pure function *(function safi)* | | +| import / export | keep as JS keywords in code; in prose *kuingiza / kutoa* | | +| browser | kivinjari | | +| library | maktaba | | +| user interface | kiolesura cha mtumiaji (UI) | | +| to build (an app) | kuunda / kujenga | | +| to declare | kutangaza | | +| expression | usemi | | +| operator | opereta | Prefer *opereta* (not *operesheni*). | +| statement | kauli | e.g. *kauli ya `if`*. | +| converter | kigeuzi | | +| module | module | Keep as-is. | +| node | nodi | Tree/graph node. | +| bundle / bundler | bundle / bundler | Keep as-is. | +| render tree | render tree | Keep English; gloss *(mti wa ku-render)* if needed. | +| module dependency tree | module dependency tree | Keep English. | +| snapshot | picha ya mnepo *(snapshot)* | | +| side effect | side effect *(athari za pembeni)* | Keep English term. | +| mutation / to mutate | mutation *(mabadiliko ya ndani)* / kubadili | Keep English noun. | +| purity / pure | pure *(safi)* | Keep English. | +| to configure | kusanidi | | +| to encapsulate | kufungasha | | +| to refactor | kuboresha muundo | | +| separator | kitenganishi | | +| suffix / prefix | kiambishi tamati / kiambishi awali | | +| expression / templating | usemi / lugha ya templeti | | + +When you introduce a term not in this table, add it here in the same PR so the next contributor +stays consistent. + +--- + +## Frontmatter + +Translate the `title:` value. Leave any other frontmatter keys (e.g. `canary`) untouched. + +```md +--- +title: Component yako ya kwanza +--- +``` diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 95be5d2e0..125c6d5a7 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -1,24 +1,24 @@ --- -title: Conditional Rendering +title: Ku-render kwa Masharti --- -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +Components (vipengele) zako mara nyingi zitahitaji kuonyesha vitu tofauti kutegemea masharti tofauti. Katika React, unaweza ku-render JSX kwa masharti ukitumia sintaksia ya JavaScript kama kauli za `if`, na opereta za `&&`, na `? :`. -* How to return different JSX depending on a condition -* How to conditionally include or exclude a piece of JSX -* Common conditional syntax shortcuts you’ll encounter in React codebases +* Jinsi ya kurudisha JSX tofauti kutegemea sharti +* Jinsi ya kujumuisha au kutojumuisha kipande cha JSX kwa masharti +* Njia mkato za kawaida za masharti utakazokutana nazo katika misimbo ya React -## Conditionally returning JSX {/*conditionally-returning-jsx*/} +## Kurudisha JSX kwa masharti {/*conditionally-returning-jsx*/} -Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not: +Tuseme una component ya `PackingList` inayo-render `Item` kadhaa, ambazo zinaweza kuwekewa alama kuwa zimepakiwa au la: @@ -30,19 +30,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
-

Sally Ride's Packing List

+

Orodha ya kupakia ya Sally Ride

@@ -52,9 +52,9 @@ export default function PackingList() { -Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`. +Angalia kuwa baadhi ya components za `Item` zina prop yao ya `isPacked` iliyowekwa kuwa `true` badala ya `false`. Unataka kuongeza alama ya kupe (✅) kwenye vitu vilivyopakiwa kama `isPacked={true}`. -You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so: +Unaweza kuandika hili kama [kauli ya `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) kama hivi: ```js if (isPacked) { @@ -63,7 +63,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end: +Kama prop ya `isPacked` ni `true`, msimbo huu **hurudisha mti tofauti wa JSX.** Kwa mabadiliko haya, baadhi ya vitu hupata alama ya kupe mwishoni: @@ -78,19 +78,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -100,13 +100,13 @@ export default function PackingList() {     -Try editing what gets returned in either case, and see how the result changes! +Jaribu kuhariri kinachorudishwa katika kila hali, na uone jinsi matokeo yanavyobadilika! -Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript. +Angalia jinsi unavyounda mantiki ya matawi kwa kutumia kauli za `if` na `return` za JavaScript. Katika React, mtiririko wa udhibiti (kama masharti) hushughulikiwa na JavaScript. -### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/} +### Kurudisha bila kitu kwa masharti kwa kutumia `null` {/*conditionally-returning-nothing-with-null*/} -In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`: +Katika baadhi ya hali, hautataka ku-render chochote kabisa. Kwa mfano, tuseme hautaki kuonyesha vitu vilivyopakiwa hata kidogo. Component lazima irudishe kitu fulani. Katika hali hii, unaweza kurudisha `null`: ```js if (isPacked) { @@ -115,7 +115,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render. +Kama `isPacked` ni true, component itarudisha bila kitu, `null`. Vinginevyo, itarudisha JSX ya ku-render. @@ -130,19 +130,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -152,23 +152,23 @@ export default function PackingList() {     -In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that! +Kwa vitendo, kurudisha `null` kutoka kwa component si jambo la kawaida kwa sababu linaweza kumshangaza mtengenezaji anayejaribu kuii-render. Mara nyingi zaidi, ungejumuisha au kutojumuisha component kwa masharti katika JSX ya component-mzazi. Hivi ndivyo ya kufanya hivyo! -## Conditionally including JSX {/*conditionally-including-jsx*/} +## Kujumuisha JSX kwa masharti {/*conditionally-including-jsx*/} -In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output: +Katika mfano uliopita, ulidhibiti ni mti gani wa JSX (kama upo!) ungerudishwa na component. Huenda tayari umeona urudufu fulani katika matokeo ya render: ```js
  • {name} ✅
    • ``` -is very similar to +unafanana sana na ```js
  • {name}
    • ``` -Both of the conditional branches return `
  • ...
    • `: +Matawi yote mawili ya masharti hurudisha `
  • ...
    • `: ```js if (isPacked) { @@ -177,13 +177,13 @@ if (isPacked) { return
  • {name}
    • ; ``` -While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) +Ingawa urudufu huu si wenye madhara, unaweza kufanya msimbo wako kuwa mgumu zaidi kuutunza. Vipi kama unataka kubadilisha `className`? Ungelazimika kufanya hivyo katika sehemu mbili za msimbo wako! Katika hali kama hii, ungeweza kujumuisha JSX kidogo kwa masharti ili kufanya msimbo wako uwe [DRY zaidi.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) -### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/} +### Opereta ya masharti (ternary) (`? :`) {/*conditional-ternary-operator--*/} -JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator". +JavaScript ina sintaksia fupi ya kuandika usemi wa masharti -- [opereta ya masharti](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) au "opereta ya ternary". -Instead of this: +Badala ya hii: ```js if (isPacked) { @@ -192,7 +192,7 @@ if (isPacked) { return
  • {name}
    • ; ``` -You can write this: +Unaweza kuandika hii: ```js return ( @@ -202,17 +202,17 @@ return ( ); ``` -You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*. +Unaweza kuisoma kama *"kama `isPacked` ni true, basi (`?`) render `name + ' ✅'`, vinginevyo (`:`) render `name`"*. -#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/} +#### Je, mifano hii miwili inalingana kabisa? {/*are-these-two-examples-fully-equivalent*/} -If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `
  • `. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works. +Kama unatoka kwenye msingi wa programu inayoegemea object (object-oriented programming), unaweza kudhani kuwa mifano miwili hapo juu ina tofauti ndogo kwa sababu mmoja wao unaweza kuunda "instances" mbili tofauti za `
  • `. Lakini elementi za JSX si "instances" kwa sababu hazishikilii state (hali) yoyote ya ndani na si nodi halisi za DOM. Ni maelezo mepesi, kama ramani za ujenzi. Hivyo mifano hii miwili, kwa hakika, *inalingana* kabisa. [Kuhifadhi na Kuweka Upya State](/learn/preserving-and-resetting-state) inaeleza kwa kina jinsi hili linavyofanya kazi. -Now let's say you want to wrap the completed item's text into another HTML tag, like `` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases: +Sasa tuseme unataka kufunga maandishi ya kitu kilichokamilika ndani ya tagi nyingine ya HTML, kama `` ili kuyakata. Unaweza kuongeza mistari mipya na mabano zaidi ili iwe rahisi kupachika JSX zaidi katika kila hali: @@ -234,19 +234,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -256,11 +256,11 @@ export default function PackingList() {     -This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions. +Mtindo huu hufanya kazi vizuri kwa masharti rahisi, lakini utumie kwa kiasi. Kama components zako zinakuwa na msongamano kwa markup nyingi sana ya masharti iliyopachikwa, fikiria kutoa components-watoto ili kusafisha mambo. Katika React, markup ni sehemu ya msimbo wako, hivyo unaweza kutumia zana kama vigezo na functions kuratibu semi zenye utata. -### Logical AND operator (`&&`) {/*logical-and-operator-*/} +### Opereta ya kimantiki ya AND (`&&`) {/*logical-and-operator-*/} -Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`: +Njia mkato nyingine ya kawaida utakayokutana nayo ni [opereta ya kimantiki ya AND (`&&`) ya JavaScript.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Ndani ya components za React, mara nyingi hujitokeza wakati unataka ku-render JSX fulani wakati sharti ni true, **au render bila kitu vinginevyo.** Kwa `&&`, ungeweza ku-render alama ya kupe kwa masharti tu kama `isPacked` ni `true`: ```js return ( @@ -270,9 +270,9 @@ return ( ); ``` -You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*. +Unaweza kuisoma kama *"kama `isPacked`, basi (`&&`) render alama ya kupe, vinginevyo, render bila kitu"*. -Here it is in action: +Hii hapa ikifanya kazi: @@ -288,19 +288,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -310,30 +310,30 @@ export default function PackingList() {     -A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place. +[Usemi wa && wa JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) hurudisha thamani ya upande wake wa kulia (katika hali yetu, alama ya kupe) kama upande wa kushoto (sharti letu) ni `true`. Lakini kama sharti ni `false`, usemi mzima unakuwa `false`. React huchukulia `false` kama "shimo" katika mti wa JSX, kama tu `null` au `undefined`, na hairenderi chochote mahali pake. -**Don't put numbers on the left side of `&&`.** +**Usiweke namba upande wa kushoto wa `&&`.** -To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing. +Ili kupima sharti, JavaScript hubadilisha upande wa kushoto kuwa boolean kiotomatiki. Hata hivyo, kama upande wa kushoto ni `0`, basi usemi mzima unapata thamani hiyo (`0`), na React itaenda mbele kwa furaha ku-render `0` badala ya bila kitu. -For example, a common mistake is to write code like `messageCount &&

    New messages

    `. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself! +Kwa mfano, kosa la kawaida ni kuandika msimbo kama `messageCount &&

    New messages

    `. Ni rahisi kudhani kuwa hairenderi chochote wakati `messageCount` ni `0`, lakini kwa hakika inarender `0` yenyewe! -To fix it, make the left side a boolean: `messageCount > 0 &&

    New messages

    `. +Ili kurekebisha hilo, fanya upande wa kushoto kuwa boolean: `messageCount > 0 &&

    New messages

    `.     -### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/} +### Kukabidhi JSX kwa kigezo kwa masharti {/*conditionally-assigning-jsx-to-a-variable*/} -When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name: +Wakati njia mkato zinakwamisha kuandika msimbo wa kawaida, jaribu kutumia kauli ya `if` na kigezo. Unaweza kukabidhi upya vigezo vilivyofafanuliwa kwa [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), hivyo anza kwa kutoa maudhui chaguo-msingi unayotaka kuonyesha, jina: ```js let itemContent = name; ``` -Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`: +Tumia kauli ya `if` kukabidhi upya usemi wa JSX kwa `itemContent` kama `isPacked` ni `true`: ```js if (isPacked) { @@ -341,7 +341,7 @@ if (isPacked) { } ``` -[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX: +[Mabano ya curly hufungua "dirisha la kuingia JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Pachika kigezo kwa mabano ya curly katika mti wa JSX unaorudishwa, ukipachika usemi uliokokotolewa awali ndani ya JSX: ```js
  • @@ -349,7 +349,7 @@ if (isPacked) {
    • ``` -This style is the most verbose, but it's also the most flexible. Here it is in action: +Mtindo huu ni wenye maneno mengi zaidi, lakini pia ni unaonyumbulika zaidi. Hii hapa ikifanya kazi: @@ -369,19 +369,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -391,7 +391,7 @@ export default function PackingList() {     -Like before, this works not only for text, but for arbitrary JSX too: +Kama ilivyokuwa awali, hii hufanya kazi si tu kwa maandishi, bali pia kwa JSX yoyote ile: @@ -415,19 +415,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -437,16 +437,16 @@ export default function PackingList() {     -If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work. +Kama hufahamu JavaScript vizuri, aina hii mbalimbali ya mitindo inaweza kuonekana kuwa nyingi mno mwanzoni. Hata hivyo, kuzijifunza kutakusaidia kusoma na kuandika msimbo wowote wa JavaScript -- na si components za React tu! Chagua ule unaoupendelea kwa kuanzia, kisha rejea kwenye rejeleo hili tena kama utasahau jinsi zile nyingine zinavyofanya kazi. -* In React, you control branching logic with JavaScript. -* You can return a JSX expression conditionally with an `if` statement. -* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces. -* In JSX, `{cond ? : }` means *"if `cond`, render ``, otherwise ``"*. -* In JSX, `{cond && }` means *"if `cond`, render ``, otherwise nothing"*. -* The shortcuts are common, but you don't have to use them if you prefer plain `if`. +* Katika React, unadhibiti mantiki ya matawi kwa JavaScript. +* Unaweza kurudisha usemi wa JSX kwa masharti kwa kauli ya `if`. +* Unaweza kuhifadhi JSX fulani kwa kigezo kwa masharti kisha kuijumuisha ndani ya JSX nyingine kwa kutumia mabano ya curly. +* Katika JSX, `{cond ? : }` inamaanisha *"kama `cond`, render ``, vinginevyo ``"*. +* Katika JSX, `{cond && }` inamaanisha *"kama `cond`, render ``, vinginevyo bila kitu"*. +* Njia mkato ni za kawaida, lakini si lazima uzitumie kama unapendelea `if` ya kawaida. @@ -454,9 +454,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh -#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/} +#### Onyesha aikoni kwa vitu visivyokamilika kwa `? :` {/*show-an-icon-for-incomplete-items-with--*/} -Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`. +Tumia opereta ya masharti (`cond ? a : b`) ku-render ❌ kama `isPacked` si `true`. @@ -472,19 +472,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -510,19 +510,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -534,15 +534,15 @@ export default function PackingList() { -#### Show the item importance with `&&` {/*show-the-item-importance-with-*/} +#### Onyesha umuhimu wa kitu kwa `&&` {/*show-the-item-importance-with-*/} -In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this: +Katika mfano huu, kila `Item` hupokea prop ya kinamba ya `importance`. Tumia opereta ya `&&` ku-render "_(Umuhimu: X)_" kwa italiki, lakini kwa vitu vyenye umuhimu usio sifuri tu. Orodha yako ya vitu inapaswa kuishia kuonekana hivi: -* Space suit _(Importance: 9)_ -* Helmet with a golden leaf -* Photo of Tam _(Importance: 6)_ +* Suti ya angani _(Umuhimu: 9)_ +* Kofia yenye jani la dhahabu +* Picha ya Tam _(Umuhimu: 6)_ -Don't forget to add a space between the two labels! +Usisahau kuongeza nafasi kati ya lebo mbili! @@ -558,19 +558,19 @@ function Item({ name, importance }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -582,7 +582,7 @@ export default function PackingList() { -This should do the trick: +Hii inapaswa kufanya kazi: @@ -593,7 +593,7 @@ function Item({ name, importance }) { {name} {importance > 0 && ' '} {importance > 0 && - (Importance: {importance}) + (Umuhimu: {importance}) } ); @@ -602,19 +602,19 @@ function Item({ name, importance }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -624,15 +624,15 @@ export default function PackingList() {     -Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result! +Zingatia kuwa lazima uandike `importance > 0 && ...` badala ya `importance && ...` ili kama `importance` ni `0`, `0` isirenderiwe kama matokeo! -In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a Fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`. +Katika suluhisho hili, masharti mawili tofauti yanatumika kuingiza nafasi kati ya jina na lebo ya umuhimu. Vinginevyo, ungeweza kutumia Fragment yenye nafasi mwanzoni: `importance > 0 && <> ...` au kuongeza nafasi mara moja ndani ya ``: `importance > 0 && ...`.     -#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/} +#### Boresha msururu wa `? :` kuwa `if` na vigezo {/*refactor-a-series-of---to-if-and-variables*/} -This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions. +Component hii ya `Drink` inatumia msururu wa masharti ya `? :` kuonyesha taarifa tofauti kutegemea kama prop ya `name` ni `"tea"` au `"coffee"`. Tatizo ni kwamba taarifa kuhusu kila kinywaji zimetawanyika katika masharti mengi. Boresha msimbo huu utumie kauli moja ya `if` badala ya masharti matatu ya `? :`. @@ -665,11 +665,11 @@ export default function DrinkList() { -Once you've refactored the code to use `if`, do you have further ideas on how to simplify it? +Mara tu utakapoboresha msimbo utumie `if`, je, una mawazo zaidi ya jinsi ya kuurahisisha? -There are multiple ways you could go about this, but here is one starting point: +Kuna njia nyingi ungeweza kufuata, lakini hapa kuna mahali pa kuanzia: @@ -712,9 +712,9 @@ export default function DrinkList() { -Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future. +Hapa taarifa kuhusu kila kinywaji zimewekwa pamoja badala ya kutawanyika katika masharti mengi. Hili hurahisisha kuongeza vinywaji zaidi siku zijazo. -Another solution would be to remove the condition altogether by moving the information into objects: +Suluhisho jingine lingekuwa kuondoa sharti kabisa kwa kuhamisha taarifa ndani ya objects: diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 339f04223..33c04b50c 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -1,30 +1,30 @@ --- -title: Describing the UI +title: Kuelezea UI --- -React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components. +React ni maktaba ya JavaScript ya ku-render violesura vya mtumiaji (UI). UI hujengwa kutokana na vipande vidogo kama vitufe, maandishi, na picha. React hukuruhusu kuviunganisha kuwa *components (vipengele)* vinavyoweza kutumika tena na kupachikwa ndani ya vingine. Kuanzia tovuti hadi programu za simu, kila kitu kwenye skrini kinaweza kugawanywa kuwa components. Katika sura hii, utajifunza kuunda, kubinafsisha, na kuonyesha components za React kwa masharti. -* [How to write your first React component](/learn/your-first-component) -* [When and how to create multi-component files](/learn/importing-and-exporting-components) -* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx) -* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces) -* [How to configure components with props](/learn/passing-props-to-a-component) -* [How to conditionally render components](/learn/conditional-rendering) -* [How to render multiple components at a time](/learn/rendering-lists) -* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure) -* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree) +* [Jinsi ya kuandika component yako ya kwanza ya React](/learn/your-first-component) +* [Wakati na jinsi ya kuunda faili zenye components nyingi](/learn/importing-and-exporting-components) +* [Jinsi ya kuongeza markup kwenye JavaScript kwa kutumia JSX](/learn/writing-markup-with-jsx) +* [Jinsi ya kutumia mabano ya vishazi (curly braces) na JSX kufikia utendaji wa JavaScript kutoka kwa components zako](/learn/javascript-in-jsx-with-curly-braces) +* [Jinsi ya kusanidi components kwa kutumia props](/learn/passing-props-to-a-component) +* [Jinsi ya ku-render components kwa masharti](/learn/conditional-rendering) +* [Jinsi ya ku-render components nyingi kwa wakati mmoja](/learn/rendering-lists) +* [Jinsi ya kuepuka hitilafu (bugs) zenye kutatanisha kwa kuweka components zikiwa pure](/learn/keeping-components-pure) +* [Kwa nini kuelewa UI yako kama miti (trees) ni jambo la manufaa](/learn/understanding-your-ui-as-a-tree) -## Your first component {/*your-first-component*/} +## Component yako ya kwanza {/*your-first-component*/} -React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components: +Programu za React hujengwa kutokana na vipande vilivyotengwa vya UI vinavyoitwa *components (vipengele)*. Component ya React ni function ya JavaScript ambayo unaweza kuinyunyizia markup. Components zinaweza kuwa ndogo kama kitufe, au kubwa kama ukurasa mzima. Hapa kuna component ya `Gallery` inayo-render components tatu za `Profile`: @@ -41,7 +41,7 @@ function Profile() { export default function Gallery() { return (
    -

    Amazing scientists

    +

    Wanasayansi wa ajabu

    @@ -58,13 +58,13 @@ img { margin: 0 10px 10px 0; height: 90px; } -Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components. +Soma **[Component Yako ya Kwanza](/learn/your-first-component)** ili ujifunze jinsi ya kutangaza na kutumia components za React. -## Importing and exporting components {/*importing-and-exporting-components*/} +## Kuingiza na kutoa components {/*importing-and-exporting-components*/} -You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file: +Unaweza kutangaza components nyingi katika faili moja, lakini faili kubwa zinaweza kuwa ngumu kuzipitia. Ili kutatua hili, unaweza *export* component kwenye faili yake yenyewe, kisha *import* component hiyo kutoka faili nyingine: @@ -85,7 +85,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
    -

    Amazing scientists

    +

    Wanasayansi wa ajabu

    @@ -113,32 +113,32 @@ img { margin: 0 10px 10px 0; } -Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files. +Soma **[Kuingiza na Kutoa Components](/learn/importing-and-exporting-components)** ili ujifunze jinsi ya kugawanya components kwenye faili zao wenyewe. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Kuandika markup kwa JSX {/*writing-markup-with-jsx*/} -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. +Kila component ya React ni function ya JavaScript ambayo inaweza kuwa na markup fulani ambayo React hui-render kwenye kivinjari. Components za React hutumia kiendelezi cha sintaksia kinachoitwa JSX kuwakilisha markup hiyo. JSX inafanana sana na HTML, lakini ina masharti zaidi kidogo na inaweza kuonyesha taarifa zinazobadilika. -If we paste existing HTML markup into a React component, it won't always work: +Tukibandika markup ya HTML iliyopo kwenye component ya React, haitafanya kazi kila wakati: ```js export default function TodoList() { return ( - // This doesn't quite work! -

    Hedy Lamarr's Todos

    + // Hii haifanyi kazi vizuri! +

    Mambo ya kufanya ya Hedy Lamarr

    Hedy Lamarr
      -
    • Invent new traffic lights -
    • Rehearse a movie scene -
    • Improve spectrum technology +
    • Buni taa mpya za barabarani +
    • Fanya mazoezi ya onyesho la filamu +
    • Boresha teknolojia ya spektramu
    ); } @@ -150,7 +150,7 @@ img { height: 90px; }     -If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx): +Ikiwa una HTML iliyopo kama hii, unaweza kuirekebisha kwa kutumia [kigeuzi (converter)](https://transform.tools/html-to-jsx): @@ -158,16 +158,16 @@ If you have existing HTML like this, you can fix it using a [converter](https:// export default function TodoList() { return ( <> -

    Hedy Lamarr's Todos

    +

    Mambo ya kufanya ya Hedy Lamarr

    Hedy Lamarr
      -
    • Invent new traffic lights
      • -
    • Rehearse a movie scene
      • -
    • Improve spectrum technology
      • +
    • Buni taa mpya za barabarani
      • +
    • Fanya mazoezi ya onyesho la filamu
      • +
    • Boresha teknolojia ya spektramu
    ); @@ -182,13 +182,13 @@ img { height: 90px; } -Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX. +Soma **[Kuandika Markup kwa JSX](/learn/writing-markup-with-jsx)** ili ujifunze jinsi ya kuandika JSX halali. -## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/} +## JavaScript ndani ya JSX kwa mabano ya vishazi {/*javascript-in-jsx-with-curly-braces*/} -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript: +JSX hukuruhusu kuandika markup inayofanana na HTML ndani ya faili ya JavaScript, ikiweka mantiki ya ku-render na maudhui mahali pamoja. Wakati mwingine utataka kuongeza mantiki kidogo ya JavaScript au kurejelea sifa inayobadilika ndani ya markup hiyo. Katika hali hii, unaweza kutumia mabano ya vishazi (curly braces) katika JSX yako ili "kufungua dirisha" kuelekea JavaScript: @@ -204,16 +204,16 @@ const person = { export default function TodoList() { return (
    -

    {person.name}'s Todos

    +

    Mambo ya kufanya ya {person.name}

    Gregorio Y. Zara
      -
    • Improve the videophone
      • -
    • Prepare aeronautics lectures
      • -
    • Work on the alcohol-fuelled engine
      • +
    • Boresha simu ya video
      • +
    • Andaa mihadhara ya anga
      • +
    • Fanya kazi kwenye injini inayotumia alkoholi
    ); @@ -230,13 +230,13 @@ body > div > div { padding: 20px; } -Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX. +Soma **[JavaScript ndani ya JSX kwa Mabano ya Vishazi](/learn/javascript-in-jsx-with-curly-braces)** ili ujifunze jinsi ya kufikia data ya JavaScript kutoka JSX. -## Passing props to a component {/*passing-props-to-a-component*/} +## Kupitisha props kwa component {/*passing-props-to-a-component*/} -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX! +Components za React hutumia *props* kuwasiliana kati yao. Kila component-mzazi inaweza kupitisha taarifa fulani kwa components-watoto wake kwa kuwapa props. Props zinaweza kukukumbusha sifa za HTML, lakini unaweza kupitisha thamani yoyote ya JavaScript kupitia kwao, ikiwa ni pamoja na objects, arrays, functions, na hata JSX! @@ -311,15 +311,15 @@ export function getImageUrl(person, size = 's') { -Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props. +Soma **[Kupitisha Props kwa Component](/learn/passing-props-to-a-component)** ili ujifunze jinsi ya kupitisha na kusoma props. -## Conditional rendering {/*conditional-rendering*/} +## Ku-render kwa masharti {/*conditional-rendering*/} -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +Mara nyingi components zako zitahitaji kuonyesha vitu tofauti kulingana na masharti tofauti. Katika React, unaweza ku-render JSX kwa masharti kwa kutumia sintaksia ya JavaScript kama vile kauli za `if`, `&&`, na opereta za `? :`. -In this example, the JavaScript `&&` operator is used to conditionally render a checkmark: +Katika mfano huu, opereta ya `&&` ya JavaScript inatumika ku-render alama ya tiki kwa masharti: @@ -335,19 +335,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
    -

    Sally Ride's Packing List

    +

    Orodha ya kupakia ya Sally Ride

    @@ -359,15 +359,15 @@ export default function PackingList() { -Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally. +Soma **[Ku-render kwa Masharti](/learn/conditional-rendering)** ili ujifunze njia tofauti za ku-render maudhui kwa masharti. -## Rendering lists {/*rendering-lists*/} +## Ku-render orodha {/*rendering-lists*/} -You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components. +Mara nyingi utataka kuonyesha components nyingi zinazofanana kutoka kwenye mkusanyiko wa data. Unaweza kutumia `filter()` na `map()` za JavaScript pamoja na React kuchuja na kubadilisha array yako ya data kuwa array ya components. -For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes. +Kwa kila kipengee cha array, utahitaji kubainisha `key`. Kwa kawaida, utataka kutumia ID kutoka kwenye hifadhidata kama `key`. Keys huruhusu React kufuatilia nafasi ya kila kipengee kwenye orodha hata kama orodha itabadilika. @@ -385,13 +385,13 @@ export default function List() {

    {person.name}: {' ' + person.profession + ' '} - known for {person.accomplishment} + maarufu kwa {person.accomplishment}

    ); return (
    -

    Scientists

    +

    Wanasayansi

      {listItems}
    ); @@ -459,18 +459,18 @@ h2 { font-size: 20px; } -Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key. +Soma **[Ku-render Orodha](/learn/rendering-lists)** ili ujifunze jinsi ya ku-render orodha ya components, na jinsi ya kuchagua key. -## Keeping components pure {/*keeping-components-pure*/} +## Kuweka components zikiwa pure {/*keeping-components-pure*/} -Some JavaScript functions are *pure.* A pure function: +Baadhi ya functions za JavaScript ni *pure (safi).* Function iliyo pure: -* **Minds its own business.** It does not change any objects or variables that existed before it was called. -* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. +* **Hujishughulisha na mambo yake yenyewe.** Haibadilishi objects au vigezo vyovyote vilivyokuwepo kabla haijaitwa. +* **Ingizo sawa, matokeo sawa.** Ikipewa maingizo sawa, function iliyo pure inapaswa kurudisha matokeo yaleyale kila wakati. -By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component: +Kwa kuandika components zako kama functions pure pekee, unaweza kuepuka kundi zima la hitilafu (bugs) zenye kutatanisha na tabia zisizotabirika kadri msimbo wako unavyokua. Hapa kuna mfano wa component isiyo pure: @@ -478,9 +478,9 @@ By strictly only writing your components as pure functions, you can avoid an ent let guest = 0; function Cup() { - // Bad: changing a preexisting variable! + // Baya: kubadilisha kigezo kilichokuwepo awali! guest = guest + 1; - return

    Tea cup for guest #{guest}

    ; + return

    Kikombe cha chai kwa mgeni #{guest}

    ; } export default function TeaSet() { @@ -496,13 +496,13 @@ export default function TeaSet() {     -You can make this component pure by passing a prop instead of modifying a preexisting variable: +Unaweza kuifanya component hii kuwa pure kwa kupitisha prop badala ya kurekebisha kigezo kilichokuwepo awali: ```js function Cup({ guest }) { - return

    Tea cup for guest #{guest}

    ; + return

    Kikombe cha chai kwa mgeni #{guest}

    ; } export default function TeaSet() { @@ -520,43 +520,43 @@ export default function TeaSet() { -Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions. +Soma **[Kuweka Components Zikiwa Pure](/learn/keeping-components-pure)** ili ujifunze jinsi ya kuandika components kama functions pure, zinazotabirika. -## Your UI as a tree {/*your-ui-as-a-tree*/} +## UI yako kama mti {/*your-ui-as-a-tree*/} -React uses trees to model the relationships between components and modules. +React hutumia miti (trees) kuiga uhusiano kati ya components na modules. -A React render tree is a representation of the parent and child relationship between components. +Render tree ya React ni uwakilishi wa uhusiano wa mzazi na mtoto kati ya components. -An example React render tree. +Mfano wa render tree ya React. -Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance. +Components zilizo karibu na kilele cha mti, karibu na component-mzizi (root), huchukuliwa kama components za ngazi ya juu. Components zisizo na components-watoto ni components za majani (leaf). Uainishaji huu wa components ni wa manufaa kwa kuelewa mtiririko wa data na utendaji wa ku-render. -Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. +Kuiga uhusiano kati ya modules za JavaScript ni njia nyingine ya manufaa ya kuelewa programu yako. Tunauita mti wa utegemezi wa modules (module dependency tree). -An example module dependency tree. +Mfano wa mti wa utegemezi wa modules. -A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. +Mti wa utegemezi mara nyingi hutumiwa na zana za kujenga (build tools) kuunganisha msimbo wote muhimu wa JavaScript ili mteja aupakue na kuu-render. Ukubwa mkubwa wa bundle hudhoofisha uzoefu wa mtumiaji kwa programu za React. Kuelewa mti wa utegemezi wa modules ni jambo la manufaa kutatua hitilafu za aina hiyo. -Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance. +Soma **[UI Yako kama Mti](/learn/understanding-your-ui-as-a-tree)** ili ujifunze jinsi ya kuunda render tree na module dependency tree kwa programu ya React na jinsi zinavyokuwa mifano bora ya kifikra ya kuboresha uzoefu wa mtumiaji na utendaji. -## What's next? {/*whats-next*/} +## Kinachofuata? {/*whats-next*/} -Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page! +Elekea kwenye [Component Yako ya Kwanza](/learn/your-first-component) ili uanze kusoma sura hii ukurasa baada ya ukurasa! -Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)? +Au, ikiwa tayari unazifahamu mada hizi, kwa nini usisome kuhusu [Kuongeza Mwingiliano](/learn/adding-interactivity)? diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index b458ef402..cf3f6d4f3 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -1,26 +1,26 @@ --- -title: Importing and Exporting Components +title: Kuingiza na Kutoa Components --- -The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places. +Uchawi wa components (vipengele) upo katika uwezo wao wa kutumika tena: unaweza kutengeneza components zinazoundwa na components nyingine. Lakini kadri unavyopachika components nyingi zaidi na zaidi, mara nyingi inakuwa jambo la busara kuanza kuzigawanya katika faili tofauti. Hili hukuwezesha kuweka faili zako rahisi kuchunguza na kutumia tena components katika sehemu nyingi zaidi. -* What a root component file is -* How to import and export a component -* When to use default and named imports and exports -* How to import and export multiple components from one file -* How to split components into multiple files +* Faili ya component-mzizi ni nini +* Jinsi ya ku-import na ku-export component +* Ni lini utumie default na named imports na exports +* Jinsi ya ku-import na ku-export components nyingi kutoka faili moja +* Jinsi ya kugawanya components katika faili nyingi -## The root component file {/*the-root-component-file*/} +## Faili ya component-mzizi {/*the-root-component-file*/} -In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it: +Katika [Component Yako ya Kwanza](/learn/your-first-component), ulitengeneza component ya `Profile` na component ya `Gallery` inayoi-render: @@ -37,7 +37,7 @@ function Profile() { export default function Gallery() { return (
    -

    Amazing scientists

    +

    Wanasayansi wa ajabu

    @@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; } -These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. +Kwa sasa hizi zinaishi katika **faili ya component-mzizi,** iitwayo `App.js` katika mfano huu. Kutegemeana na usanidi wako, component-mzizi wako anaweza kuwa katika faili nyingine, hata hivyo. Kama unatumia framework yenye uelekezaji unaotegemea faili (file-based routing), kama Next.js, component-mzizi wako atakuwa tofauti kwa kila ukurasa. -## Exporting and importing a component {/*exporting-and-importing-a-component*/} +## Kutoa na kuingiza component {/*exporting-and-importing-a-component*/} -What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: +Je, iwapo utataka kubadilisha skrini ya kutua (landing screen) baadaye na kuweka orodha ya vitabu vya sayansi hapo? Au kuweka profaili zote sehemu nyingine? Ni jambo la busara kuhamisha `Gallery` na `Profile` nje ya faili ya component-mzizi. Hili litazifanya kuwa za kimoduli zaidi na zinazoweza kutumika tena katika faili nyingine. Unaweza kuhamisha component kwa hatua tatu: -1. **Make** a new JS file to put the components in. -2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports). -3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports). +1. **Tengeneza** faili mpya ya JS ya kuweka components ndani yake. +2. **Toa (Export)** function component yako kutoka faili hiyo (ukitumia ama exports za [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) au za [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)). +3. **Ingiza (Import)** katika faili ambapo utaitumia component (ukitumia mbinu inayolingana ya ku-import exports za [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) au za [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)). -Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`: +Hapa `Profile` na `Gallery` zote zimehamishwa nje ya `App.js` na kuwekwa katika faili mpya iitwayo `Gallery.js`. Sasa unaweza kubadilisha `App.js` ili ii-import `Gallery` kutoka `Gallery.js`: @@ -89,7 +89,7 @@ function Profile() { export default function Gallery() { return (
    -

    Amazing scientists

    +

    Wanasayansi wa ajabu

    @@ -104,60 +104,60 @@ img { margin: 0 10px 10px 0; height: 90px; } -Notice how this example is broken down into two component files now: +Angalia jinsi mfano huu sasa umegawanywa katika faili mbili za component: 1. `Gallery.js`: - - Defines the `Profile` component which is only used within the same file and is not exported. - - Exports the `Gallery` component as a **default export.** + - Hufafanua component ya `Profile` ambayo hutumika tu ndani ya faili ileile na haija-export. + - Hutoa component ya `Gallery` kama **default export.** 2. `App.js`: - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + - Huingiza `Gallery` kama **default import** kutoka `Gallery.js`. + - Hutoa component-mzizi wa `App` kama **default export.** -You may encounter files that leave off the `.js` file extension like so: +Unaweza kukutana na faili zinazoacha kiendelezi cha faili `.js` kama hivi: ```js import Gallery from './Gallery'; ``` -Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work. +Ama `'./Gallery.js'` au `'./Gallery'` zote zitafanya kazi na React, ingawa ile ya kwanza iko karibu zaidi na jinsi [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) zinavyofanya kazi. -#### Default vs named exports {/*default-vs-named-exports*/} +#### Default dhidi ya named exports {/*default-vs-named-exports*/} -There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.** +Kuna njia kuu mbili za ku-export thamani kwa JavaScript: default exports na named exports. Hadi sasa, mifano yetu imetumia default exports pekee. Lakini unaweza kutumia mojawapo au zote mbili katika faili ileile. **Faili haiwezi kuwa na zaidi ya _default_ export moja, lakini inaweza kuwa na _named_ exports nyingi kadri upendavyo.** ![Default and named exports](/images/docs/illustrations/i_import-export.svg) -How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track: +Jinsi unavyo-export component yako huamua jinsi lazima uii-import. Utapata hitilafu kama utajaribu ku-import default export kwa njia ileile ungeenda kui-import named export! Chati hii inaweza kukusaidia kufuatilia: -| Syntax | Export statement | Import statement | +| Sintaksia | Kauli ya export | Kauli ya import | | ----------- | ----------- | ----------- | | Default | `export default function Button() {}` | `import Button from './Button.js';` | | Named | `export function Button() {}` | `import { Button } from './Button.js';` | -When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports! +Unapoandika _default_ import, unaweza kuweka jina lolote upendalo baada ya `import`. Kwa mfano, ungeweza kuandika `import Banana from './Button.js'` badala yake na bado ingekupatia default export ileile. Kinyume chake, kwa named imports, jina lazima lilingane pande zote mbili. Ndiyo sababu zinaitwa _named_ imports! -**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder. +**Watu mara nyingi hutumia default exports kama faili hii-export component moja tu, na hutumia named exports kama itatoa components na thamani nyingi.** Bila kujali mtindo wa uandishi upendao, kila wakati toa majina yenye maana kwa function za component zako na faili zinazozibeba. Components zisizo na majina, kama `export default () => {}`, hazipendekezwi kwa sababu zinafanya utatuzi wa hitilafu (debugging) kuwa mgumu zaidi. -## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/} +## Kutoa na kuingiza components nyingi kutoka faili ileile {/*exporting-and-importing-multiple-components-from-the-same-file*/} -What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!** +Je, iwapo utataka kuonyesha `Profile` moja tu badala ya gallery? Unaweza ku-export component ya `Profile`, pia. Lakini `Gallery.js` tayari ina *default* export, na huwezi kuwa na default exports _mbili_. Ungeweza kutengeneza faili mpya yenye default export, au ungeweza kuongeza *named* export kwa `Profile`. **Faili inaweza kuwa na default export moja tu, lakini inaweza kuwa na named exports nyingi mno!** -To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you! +Ili kupunguza mkanganyiko unaowezekana kati ya default na named exports, baadhi ya timu huchagua kushikilia mtindo mmoja tu (default au named), au kuepuka kuzichanganya katika faili moja. Fanya kile kinachokufaa zaidi! -First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword): +Kwanza, **export** `Profile` kutoka `Gallery.js` ukitumia named export (bila neno kuu `default`): ```js export function Profile() { @@ -165,13 +165,13 @@ export function Profile() { } ``` -Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces): +Kisha, **import** `Profile` kutoka `Gallery.js` hadi `App.js` ukitumia named import (na mabano ya curly): ```js import { Profile } from './Gallery.js'; ``` -Finally, **render** `` from the `App` component: +Hatimaye, **render** `` kutoka component ya `App`: ```js export default function App() { @@ -179,7 +179,7 @@ export default function App() { } ``` -Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `` to `` and back in this example: +Sasa `Gallery.js` ina exports mbili: default `Gallery` export, na named `Profile` export. `App.js` huzi-import zote mbili. Jaribu kuhariri `` kuwa `` na kurudi katika mfano huu: @@ -207,7 +207,7 @@ export function Profile() { export default function Gallery() { return (
    -

    Amazing scientists

    +

    Wanasayansi wa ajabu

    @@ -222,24 +222,24 @@ img { margin: 0 10px 10px 0; height: 90px; } -Now you're using a mix of default and named exports: +Sasa unatumia mchanganyiko wa default na named exports: * `Gallery.js`: - - Exports the `Profile` component as a **named export called `Profile`.** - - Exports the `Gallery` component as a **default export.** + - Hutoa component ya `Profile` kama **named export iitwayo `Profile`.** + - Hutoa component ya `Gallery` kama **default export.** * `App.js`: - - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`. - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + - Huingiza `Profile` kama **named import iitwayo `Profile`** kutoka `Gallery.js`. + - Huingiza `Gallery` kama **default import** kutoka `Gallery.js`. + - Hutoa component-mzizi wa `App` kama **default export.** -On this page you learned: +Katika ukurasa huu ulijifunza: -* What a root component file is -* How to import and export a component -* When and how to use default and named imports and exports -* How to export multiple components from the same file +* Faili ya component-mzizi ni nini +* Jinsi ya ku-import na ku-export component +* Ni lini na jinsi ya kutumia default na named imports na exports +* Jinsi ya ku-export components nyingi kutoka faili ileile @@ -247,22 +247,22 @@ On this page you learned: -#### Split the components further {/*split-the-components-further*/} +#### Gawanya components zaidi {/*split-the-components-further*/} -Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing. +Kwa sasa, `Gallery.js` hu-export `Profile` na `Gallery` zote mbili, jambo ambalo linachanganya kidogo. -Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `` and `` one after another. +Hamisha component ya `Profile` kwenye `Profile.js` yake mwenyewe, kisha badilisha component ya `App` ii-render zote mbili `` na `` moja baada ya nyingine. -You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above: +Unaweza kutumia ama default au named export kwa `Profile`, lakini hakikisha unatumia sintaksia inayolingana ya import katika `App.js` na `Gallery.js` zote mbili! Unaweza kurejelea jedwali kutoka deep dive iliyo hapo juu: -| Syntax | Export statement | Import statement | +| Sintaksia | Kauli ya export | Kauli ya import | | ----------- | ----------- | ----------- | | Default | `export default function Button() {}` | `import Button from './Button.js';` | | Named | `export function Button() {}` | `import { Button } from './Button.js';` | -Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too? +Usisahau ku-import components zako pale zinapoitwa. Je, `Gallery` haitumii `Profile`, pia? @@ -282,7 +282,8 @@ export default function App() { ``` ```js src/Gallery.js active -// Move me to Profile.js! + q +// Nihamishe kwenye Profile.js! export function Profile() { return ( -

    Amazing scientists

    +

    Wanasayansi wa ajabu

    @@ -313,11 +314,11 @@ img { margin: 0 10px 10px 0; height: 90px; } -After you get it working with one kind of exports, make it work with the other kind. +Baada ya kuifanya ifanye kazi na aina moja ya exports, ifanye ifanye kazi na aina nyingine. -This is the solution with named exports: +Hili ndilo suluhisho lenye named exports: @@ -341,7 +342,7 @@ import { Profile } from './Profile.js'; export default function Gallery() { return (
    -

    Amazing scientists

    +

    Wanasayansi wa ajabu

    @@ -367,7 +368,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -This is the solution with default exports: +Hili ndilo suluhisho lenye default exports: @@ -391,7 +392,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
    -

    Amazing scientists

    +

    Wanasayansi wa ajabu

    diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 736065b03..433ce8923 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -1,25 +1,25 @@ --- -title: JavaScript in JSX with Curly Braces +title: JavaScript ndani ya JSX kwa Mabano ya Curly --- -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript. +JSX hukuruhusu kuandika markup inayofanana na HTML ndani ya faili ya JavaScript, ikiweka mantiki ya ku-render na maudhui mahali pamoja. Wakati mwingine utahitaji kuongeza mantiki kidogo ya JavaScript au kurejelea sifa inayobadilika ndani ya markup hiyo. Katika hali hii, unaweza kutumia mabano ya curly ndani ya JSX yako kufungua dirisha kuelekea JavaScript. -* How to pass strings with quotes -* How to reference a JavaScript variable inside JSX with curly braces -* How to call a JavaScript function inside JSX with curly braces -* How to use a JavaScript object inside JSX with curly braces +* Jinsi ya kupitisha strings zenye alama za nukuu +* Jinsi ya kurejelea kigezo cha JavaScript ndani ya JSX kwa mabano ya curly +* Jinsi ya kuita function ya JavaScript ndani ya JSX kwa mabano ya curly +* Jinsi ya kutumia object ya JavaScript ndani ya JSX kwa mabano ya curly -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## Kupitisha strings zenye alama za nukuu {/*passing-strings-with-quotes*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +Unapotaka kupitisha sifa ya string kwa JSX, unaiweka ndani ya alama za nukuu moja au mbili: @@ -41,9 +41,9 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +Hapa, `"https://i.imgur.com/7vQD0fPs.jpg"` na `"Gregorio Y. Zara"` zinapitishwa kama strings. -But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**: +Lakini itakuwaje kama unataka kubainisha `src` au maandishi ya `alt` kwa njia inayobadilika? Unaweza **kutumia thamani kutoka JavaScript kwa kubadilisha `"` na `"` kuwa `{` na `}`**: @@ -67,11 +67,11 @@ export default function Avatar() { -Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup! +Angalia tofauti kati ya `className="avatar"`, inayobainisha jina la class ya CSS `"avatar"` linalofanya picha kuwa duara, na `src={avatar}` inayosoma thamani ya kigezo cha JavaScript kiitwacho `avatar`. Hii ni kwa sababu mabano ya curly hukuruhusu kufanya kazi na JavaScript hapo hapo ndani ya markup yako! -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## Kutumia mabano ya curly: Dirisha kuelekea dunia ya JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

    `: +JSX ni njia maalum ya kuandika JavaScript. Hilo linamaanisha inawezekana kutumia JavaScript ndani yake—kwa mabano ya curly `{ }`. Mfano ulio hapa chini kwanza hutangaza jina la mwanasayansi, `name`, kisha huipachika kwa mabano ya curly ndani ya `

    `: @@ -86,9 +86,9 @@ export default function TodoList() { -Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes? +Jaribu kubadilisha thamani ya `name` kutoka `'Gregorio Y. Zara'` kuwa `'Hedy Lamarr'`. Ona jinsi kichwa cha orodha kinavyobadilika? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +Usemi wowote wa JavaScript utafanya kazi kati ya mabano ya curly, ikijumuisha miito ya function kama `formatDate()`: @@ -111,18 +111,18 @@ export default function TodoList() { -### Where to use curly braces {/*where-to-use-curly-braces*/} +### Wapi pa kutumia mabano ya curly {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX: +Unaweza kutumia mabano ya curly kwa njia mbili tu ndani ya JSX: -1. **As text** directly inside a JSX tag: `

    {name}'s To Do List

    ` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. -2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`. +1. **Kama maandishi** moja kwa moja ndani ya tagi ya JSX: `

    {name}'s To Do List

    ` hufanya kazi, lakini `<{tag}>Gregorio Y. Zara's To Do List` haitafanya kazi. +2. **Kama sifa** mara tu baada ya alama ya `=`: `src={avatar}` itasoma kigezo `avatar`, lakini `src="{avatar}"` itapitisha string `"{avatar}"`. -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +## Kutumia "curly mbili": CSS na objects nyingine ndani ya JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} -In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. +Mbali na strings, namba, na semi nyingine za JavaScript, unaweza hata kupitisha objects ndani ya JSX. Objects pia zinaonyeshwa kwa mabano ya curly, kama `{ name: "Hedy Lamarr", inventions: 5 }`. Kwa hivyo, ili kupitisha object ya JS ndani ya JSX, lazima uifunge object ndani ya jozi nyingine ya mabano ya curly: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. -You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute: +Unaweza kuona hili kwa mitindo ya CSS ya ndani (inline) katika JSX. React haikulazimishi kutumia mitindo ya ndani (classes za CSS zinafanya kazi vizuri kwa hali nyingi). Lakini unapohitaji mtindo wa ndani, unapitisha object kwa sifa ya `style`: @@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; } -Try changing the values of `backgroundColor` and `color`. +Jaribu kubadilisha thamani za `backgroundColor` na `color`. -You can really see the JavaScript object inside the curly braces when you write it like this: +Unaweza kweli kuiona object ya JavaScript ndani ya mabano ya curly unapoiandika hivi: ```js {2-5}
      ``` -The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies! +Wakati ujao utakapoona `{{` na `}}` katika JSX, tambua kuwa si kitu zaidi ya object iliyowekwa ndani ya mabano ya curly ya JSX! -Inline `style` properties are written in camelCase. For example, HTML `
        ` would be written as `
          ` in your component. +Sifa za `style` za ndani (inline) huandikwa kwa mtindo wa camelCase. Kwa mfano, HTML `
            ` ingeandikwa kama `
              ` katika component yako. -## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/} +## Furaha zaidi na objects za JavaScript na mabano ya curly {/*more-fun-with-javascript-objects-and-curly-braces*/} -You can move several expressions into one object, and reference them in your JSX inside curly braces: +Unaweza kuhamisha semi kadhaa ndani ya object moja, na kuzirejelea katika JSX yako ndani ya mabano ya curly: @@ -211,7 +211,7 @@ body > div > div { padding: 20px; } -In this example, the `person` JavaScript object contains a `name` string and a `theme` object: +Katika mfano huu, object ya JavaScript `person` ina string ya `name` na object ya `theme`: ```js const person = { @@ -223,31 +223,31 @@ const person = { }; ``` -The component can use these values from `person` like so: +Component inaweza kutumia thamani hizi kutoka `person` hivi: ```js

              {person.name}'s Todos

              ``` -JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript. +JSX ni ndogo sana kama lugha ya templeti kwa sababu hukuruhusu kupanga data na mantiki kwa kutumia JavaScript. -Now you know almost everything about JSX: +Sasa unajua karibu kila kitu kuhusu JSX: -* JSX attributes inside quotes are passed as strings. -* Curly braces let you bring JavaScript logic and variables into your markup. -* They work inside the JSX tag content or immediately after `=` in attributes. -* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces. +* Sifa za JSX zilizo ndani ya alama za nukuu hupitishwa kama strings. +* Mabano ya curly hukuruhusu kuleta mantiki na vigezo vya JavaScript ndani ya markup yako. +* Zinafanya kazi ndani ya maudhui ya tagi ya JSX au mara tu baada ya `=` katika sifa. +* `{{` na `}}` si sintaksia maalum: ni object ya JavaScript iliyowekwa ndani ya mabano ya curly ya JSX. -#### Fix the mistake {/*fix-the-mistake*/} +#### Rekebisha kosa {/*fix-the-mistake*/} -This code crashes with an error saying `Objects are not valid as a React child`: +Msimbo huu unaanguka kwa hitilafu inayosema `Objects are not valid as a React child`: @@ -287,15 +287,15 @@ body > div > div { padding: 20px; } -Can you find the problem? +Je, unaweza kupata tatizo? -Look for what's inside the curly braces. Are we putting the right thing there? +Tafuta kilicho ndani ya mabano ya curly. Je, tunaweka kitu sahihi hapo? -This is happening because this example renders *an object itself* into the markup rather than a string: `

              {person}'s Todos

              ` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them. +Hili linatokea kwa sababu mfano huu una-render *object yenyewe* ndani ya markup badala ya string: `

              {person}'s Todos

              ` inajaribu ku-render object nzima ya `person`! Kujumuisha objects ghafi kama maudhui ya maandishi husababisha hitilafu kwa sababu React haijui unavyotaka kuzionyesha. -To fix it, replace `

              {person}'s Todos

              ` with `

              {person.name}'s Todos

              `: +Ili kurekebisha, badilisha `

              {person}'s Todos

              ` kuwa `

              {person.name}'s Todos

              `: @@ -337,9 +337,9 @@ body > div > div { padding: 20px; }               -#### Extract information into an object {/*extract-information-into-an-object*/} +#### Toa taarifa ndani ya object {/*extract-information-into-an-object*/} -Extract the image URL into the `person` object. +Toa URL ya picha na uiweke ndani ya object ya `person`. @@ -381,7 +381,7 @@ body > div > div { padding: 20px; } -Move the image URL into a property called `person.imageUrl` and read it from the `` tag using the curlies: +Hamisha URL ya picha ndani ya sifa iitwayo `person.imageUrl` na uisome kutoka kwa tagi ya `` kwa kutumia mabano ya curly: @@ -424,13 +424,13 @@ body > div > div { padding: 20px; } -#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/} +#### Andika usemi ndani ya mabano ya curly ya JSX {/*write-an-expression-inside-jsx-curly-braces*/} -In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension. +Katika object iliyo hapa chini, URL kamili ya picha imegawanywa katika sehemu nne: URL msingi, `imageId`, `imageSize`, na kiendelezi cha faili. -We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `` tag specifies its `src`. +Tunataka URL ya picha iunganishe sifa hizi pamoja: URL msingi (daima `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), na kiendelezi cha faili (daima `'.jpg'`). Hata hivyo, kuna kitu hakiko sawa kuhusu jinsi tagi ya `` inavyobainisha `src` yake. -Can you fix it? +Je, unaweza kuirekebisha? @@ -474,15 +474,15 @@ body > div > div { padding: 20px; } -To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit. +Ili kuthibitisha kuwa marekebisho yako yamefanya kazi, jaribu kubadilisha thamani ya `imageSize` kuwa `'b'`. Picha inapaswa kubadilika ukubwa baada ya uhariri wako. -You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`. +Unaweza kuiandika kama `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`. -1. `{` opens the JavaScript expression -2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string -3. `}` closes the JavaScript expression +1. `{` hufungua usemi wa JavaScript +2. `baseUrl + person.imageId + person.imageSize + '.jpg'` huzalisha string sahihi ya URL +3. `}` hufunga usemi wa JavaScript @@ -525,7 +525,7 @@ body > div > div { padding: 20px; } -You can also move this expression into a separate function like `getImageUrl` below: +Unaweza pia kuhamisha usemi huu ndani ya function tofauti kama `getImageUrl` iliyo hapa chini: @@ -580,7 +580,7 @@ body > div > div { padding: 20px; } -Variables and functions can help you keep the markup simple! +Vigezo na functions vinaweza kukusaidia kuweka markup rahisi! diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index fafd488e3..fc14dfa2a 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -1,41 +1,41 @@ --- -title: Keeping Components Pure +title: Kuweka Components Zikiwa Pure --- -Some JavaScript functions are *pure.* Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow. +Baadhi ya functions za JavaScript ni *pure (safi).* Pure functions hufanya hesabu tu na si zaidi ya hilo. Kwa kuandika components zako kwa kufuata kikamilifu kanuni za pure functions, unaweza kuepuka aina nzima ya bugs zinazochanganya na tabia isiyotabirika kadri msimbo wako unavyokua. Ili kupata manufaa haya, hata hivyo, kuna kanuni chache lazima uzifuate. -* What purity is and how it helps you avoid bugs -* How to keep components pure by keeping changes out of the render phase -* How to use Strict Mode to find mistakes in your components +* Purity ni nini na jinsi inavyokusaidia kuepuka bugs +* Jinsi ya kuweka components zikiwa pure kwa kuweka mabadiliko nje ya awamu ya render +* Jinsi ya kutumia Strict Mode kupata makosa katika components zako -## Purity: Components as formulas {/*purity-components-as-formulas*/} +## Purity: Components kama fomula {/*purity-components-as-formulas*/} -In computer science (and especially the world of functional programming), [a pure function](https://wikipedia.org/wiki/Pure_function) is a function with the following characteristics: +Katika sayansi ya kompyuta (na hasa ulimwengu wa functional programming), [pure function](https://wikipedia.org/wiki/Pure_function) ni function yenye sifa zifuatazo: -* **It minds its own business.** It does not change any objects or variables that existed before it was called. -* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. +* **Inashughulikia mambo yake yenyewe.** Haibadilishi objects au vigezo vyovyote vilivyokuwepo kabla haijaitwa. +* **Ingizo lilelile, matokeo yaleyale.** Ikipewa maingizo yaleyale, pure function inapaswa kurudisha matokeo yaleyale kila mara. -You might already be familiar with one example of pure functions: formulas in math. +Huenda tayari umeshajua mfano mmoja wa pure functions: fomula katika hisabati. -Consider this math formula: y = 2x. +Fikiria fomula hii ya hisabati: y = 2x. -If x = 2 then y = 4. Always. +Kama x = 2 basi y = 4. Kila mara. -If x = 3 then y = 6. Always. +Kama x = 3 basi y = 6. Kila mara. -If x = 3, y won't sometimes be 9 or –1 or 2.5 depending on the time of day or the state of the stock market. +Kama x = 3, y haitakuwa mara nyingine 9 au –1 au 2.5 kutegemea saa ya siku au hali ya soko la hisa. -If y = 2x and x = 3, y will _always_ be 6. +Kama y = 2x na x = 3, y _kila mara_ itakuwa 6. -If we made this into a JavaScript function, it would look like this: +Kama tungeigeuza hii kuwa function ya JavaScript, ingeonekana hivi: ```js function double(number) { @@ -43,9 +43,9 @@ function double(number) { } ``` -In the above example, `double` is a **pure function.** If you pass it `3`, it will return `6`. Always. +Katika mfano ulio hapo juu, `double` ni **pure function.** Ukiipitisha `3`, itarudisha `6`. Kila mara. -React is designed around this concept. **React assumes that every component you write is a pure function.** This means that React components you write must always return the same JSX given the same inputs: +React imeundwa kuzunguka dhana hii. **React inadhani kuwa kila component unayoiandika ni pure function.** Hii inamaanisha kuwa components za React unazoandika lazima kila mara zirudishe JSX ileile ikipewa maingizo yaleyale: @@ -53,9 +53,9 @@ React is designed around this concept. **React assumes that every component you function Recipe({ drinkers }) { return (
                -
              1. Boil {drinkers} cups of water.
                2. -
              2. Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
                3. -
              3. Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
                4. +
              4. Chemsha vikombe {drinkers} vya maji.
                5. +
              5. Ongeza vijiko {drinkers} vya chai na vijiko {0.5 * drinkers} vya viungo.
                6. +
              6. Ongeza vikombe {0.5 * drinkers} vya maziwa vichemke na sukari kwa ladha.
              ); } @@ -63,10 +63,10 @@ function Recipe({ drinkers }) { export default function App() { return (
              -

              Spiced Chai Recipe

              -

              For two

              +

              Kichocheo cha Chai ya Viungo

              +

              Kwa wawili

              -

              For a gathering

              +

              Kwa kusanyiko

              ); @@ -75,21 +75,21 @@ export default function App() {               -When you pass `drinkers={2}` to `Recipe`, it will return JSX containing `2 cups of water`. Always. +Unapopitisha `drinkers={2}` kwa `Recipe`, itarudisha JSX yenye `vikombe 2 vya maji`. Kila mara. -If you pass `drinkers={4}`, it will return JSX containing `4 cups of water`. Always. +Ukipitisha `drinkers={4}`, itarudisha JSX yenye `vikombe 4 vya maji`. Kila mara. -Just like a math formula. +Kama fomula ya hisabati tu. -You could think of your components as recipes: if you follow them and don't introduce new ingredients during the cooking process, you will get the same dish every time. That "dish" is the JSX that the component serves to React to [render.](/learn/render-and-commit) +Ungeweza kufikiria components zako kama vichocheo (mapishi): ukivifuata na usiongeze viambato vipya wakati wa upishi, utapata sahani ileile kila mara. "Sahani" hiyo ni JSX ambayo component huitolea React ili [i-render.](/learn/render-and-commit) -## Side Effects: (un)intended consequences {/*side-effects-unintended-consequences*/} +## Side Effects: matokeo (yasiyo)kusudiwa {/*side-effects-unintended-consequences*/} -React's rendering process must always be pure. Components should only *return* their JSX, and not *change* any objects or variables that existed before rendering—that would make them impure! +Mchakato wa ku-render wa React lazima kila mara uwe pure. Components zinapaswa *kurudisha* JSX yao tu, na si *kubadilisha* objects au vigezo vyovyote vilivyokuwepo kabla ya ku-render—hilo lingezifanya kuwa impure! -Here is a component that breaks this rule: +Hapa kuna component inayovunja kanuni hii: @@ -97,9 +97,9 @@ Here is a component that breaks this rule: let guest = 0; function Cup() { - // Bad: changing a preexisting variable! + // Baya: kubadilisha kigezo kilichokuwepo tayari! guest = guest + 1; - return

              Tea cup for guest #{guest}

              ; + return

              Kikombe cha chai kwa mgeni #{guest}

              ; } export default function TeaSet() { @@ -115,17 +115,17 @@ export default function TeaSet() {               -This component is reading and writing a `guest` variable declared outside of it. This means that **calling this component multiple times will produce different JSX!** And what's more, if _other_ components read `guest`, they will produce different JSX, too, depending on when they were rendered! That's not predictable. +Component hii inasoma na kuandika kigezo cha `guest` kilichotangazwa nje yake. Hii inamaanisha kuwa **kuita component hii mara nyingi kutazalisha JSX tofauti!** Na zaidi ya hayo, kama components _nyingine_ zitasoma `guest`, zitazalisha JSX tofauti pia, kutegemea zilipo-render lini! Hilo halitabiriki. -Going back to our formula y = 2x, now even if x = 2, we cannot trust that y = 4. Our tests could fail, our users would be baffled, planes would fall out of the sky—you can see how this would lead to confusing bugs! +Tukirudi kwenye fomula yetu y = 2x, sasa hata kama x = 2, hatuwezi kuamini kuwa y = 4. Vipimo vyetu vingeweza kufeli, watumiaji wetu wangechanganyikiwa, ndege zingeanguka kutoka angani—unaweza kuona jinsi hili lingeweza kusababisha bugs zinazochanganya! -You can fix this component by [passing `guest` as a prop instead](/learn/passing-props-to-a-component): +Unaweza kurekebisha component hii kwa [kupitisha `guest` kama prop badala yake](/learn/passing-props-to-a-component): ```js function Cup({ guest }) { - return

              Tea cup for guest #{guest}

              ; + return

              Kikombe cha chai kwa mgeni #{guest}

              ; } export default function TeaSet() { @@ -141,37 +141,37 @@ export default function TeaSet() {               -Now your component is pure, as the JSX it returns only depends on the `guest` prop. +Sasa component yako ni pure, kwa kuwa JSX inayorudisha inategemea prop ya `guest` pekee. -In general, you should not expect your components to be rendered in any particular order. It doesn't matter if you call y = 2x before or after y = 5x: both formulas will resolve independently of each other. In the same way, each component should only "think for itself", and not attempt to coordinate with or depend upon others during rendering. Rendering is like a school exam: each component should calculate JSX on their own! +Kwa ujumla, hupaswi kutarajia components zako zi-render kwa mpangilio wowote maalum. Haijalishi kama unaita y = 2x kabla au baada ya y = 5x: fomula zote mbili zitatatuliwa bila kutegemeana. Kwa njia ileile, kila component inapaswa "kufikiri yenyewe tu", na isijaribu kuratibu na au kutegemea nyingine wakati wa ku-render. Ku-render ni kama mtihani wa shule: kila component inapaswa kuhesabu JSX yenyewe! -#### Detecting impure calculations with StrictMode {/*detecting-impure-calculations-with-strict-mode*/} +#### Kugundua hesabu impure kwa StrictMode {/*detecting-impure-calculations-with-strict-mode*/} -Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only. +Ingawa huenda bado hujazitumia zote, katika React kuna aina tatu za maingizo unayoweza kusoma wakati wa ku-render: [props](/learn/passing-props-to-a-component), [state (hali)](/learn/state-a-components-memory), na [context.](/learn/passing-data-deeply-with-context) Unapaswa kila mara kuyachukulia maingizo haya kama ya kusoma-tu. -When you want to *change* something in response to user input, you should [set state](/learn/state-a-components-memory) instead of writing to a variable. You should never change preexisting variables or objects while your component is rendering. +Unapotaka *kubadilisha* kitu kwa kujibu ingizo la mtumiaji, unapaswa [kuweka state](/learn/state-a-components-memory) badala ya kuandika kwenye kigezo. Kamwe usibadilishe vigezo au objects vilivyokuwepo tayari wakati component yako inapo-render. -React offers a "Strict Mode" in which it calls each component's function twice during development. **By calling the component functions twice, Strict Mode helps find components that break these rules.** +React inatoa "Strict Mode" ambamo inaita function ya kila component mara mbili wakati wa uendelezaji. **Kwa kuita functions za components mara mbili, Strict Mode husaidia kupata components zinazovunja kanuni hizi.** -Notice how the original example displayed "Guest #2", "Guest #4", and "Guest #6" instead of "Guest #1", "Guest #2", and "Guest #3". The original function was impure, so calling it twice broke it. But the fixed pure version works even if the function is called twice every time. **Pure functions only calculate, so calling them twice won't change anything**--just like calling `double(2)` twice doesn't change what's returned, and solving y = 2x twice doesn't change what y is. Same inputs, same outputs. Always. +Angalia jinsi mfano wa awali ulivyoonyesha "Guest #2", "Guest #4", na "Guest #6" badala ya "Guest #1", "Guest #2", na "Guest #3". Function ya awali ilikuwa impure, kwa hivyo kuiita mara mbili kuliivunja. Lakini toleo lililorekebishwa lililo pure hufanya kazi hata kama function itaitwa mara mbili kila wakati. **Pure functions huhesabu tu, kwa hivyo kuziita mara mbili hakutabadilisha chochote**--kama vile kuita `double(2)` mara mbili hakubadilishi kinachorudishwa, na kutatua y = 2x mara mbili hakubadilishi y ilivyo. Maingizo yaleyale, matokeo yaleyale. Kila mara. -Strict Mode has no effect in production, so it won't slow down the app for your users. To opt into Strict Mode, you can wrap your root component into ``. Some frameworks do this by default. +Strict Mode haina athari katika production, kwa hivyo haitapunguza kasi ya programu kwa watumiaji wako. Ili kuchagua kutumia Strict Mode, unaweza kufunga component yako ya mzizi ndani ya ``. Baadhi ya frameworks hufanya hivi kwa chaguo-msingi. -### Local mutation: Your component's little secret {/*local-mutation-your-components-little-secret*/} +### Mabadiliko ya ndani: Siri ndogo ya component yako {/*local-mutation-your-components-little-secret*/} -In the above example, the problem was that the component changed a *preexisting* variable while rendering. This is often called a **"mutation"** to make it sound a bit scarier. Pure functions don't mutate variables outside of the function's scope or objects that were created before the call—that makes them impure! +Katika mfano ulio hapo juu, tatizo lilikuwa kwamba component ilibadilisha kigezo *kilichokuwepo tayari* wakati wa ku-render. Hili mara nyingi huitwa **"mutation"** ili lisikike la kutisha kidogo zaidi. Pure functions hazibadilishi vigezo vilivyo nje ya wigo wa function au objects vilivyoundwa kabla ya wito—hilo huzifanya kuwa impure! -However, **it's completely fine to change variables and objects that you've *just* created while rendering.** In this example, you create an `[]` array, assign it to a `cups` variable, and then `push` a dozen cups into it: +Hata hivyo, **ni sawa kabisa kubadilisha vigezo na objects ambavyo _umeviunda_ hivi punde wakati wa ku-render.** Katika mfano huu, unaunda array ya `[]`, unaiweka kwenye kigezo cha `cups`, kisha una-`push` vikombe kadhaa ndani yake: ```js function Cup({ guest }) { - return

              Tea cup for guest #{guest}

              ; + return

              Kikombe cha chai kwa mgeni #{guest}

              ; } export default function TeaGathering() { @@ -185,43 +185,43 @@ export default function TeaGathering() {               -If the `cups` variable or the `[]` array were created outside the `TeaGathering` function, this would be a huge problem! You would be changing a *preexisting* object by pushing items into that array. +Kama kigezo cha `cups` au array ya `[]` vingeundwa nje ya function ya `TeaGathering`, hili lingekuwa tatizo kubwa! Ungekuwa unabadilisha object *iliyokuwepo tayari* kwa kusukuma vitu ndani ya array hiyo. -However, it's fine because you've created them *during the same render*, inside `TeaGathering`. No code outside of `TeaGathering` will ever know that this happened. This is called **"local mutation"**—it's like your component's little secret. +Hata hivyo, ni sawa kwa sababu umeviunda *wakati wa render ileile*, ndani ya `TeaGathering`. Hakuna msimbo nje ya `TeaGathering` utakaowahi kujua kuwa hili lilitokea. Hili huitwa **"local mutation"** (mabadiliko ya ndani)—ni kama siri ndogo ya component yako. -## Where you _can_ cause side effects {/*where-you-_can_-cause-side-effects*/} +## Wapi _unaweza_ kusababisha side effects {/*where-you-_can_-cause-side-effects*/} -While functional programming relies heavily on purity, at some point, somewhere, _something_ has to change. That's kind of the point of programming! These changes—updating the screen, starting an animation, changing the data—are called **side effects.** They're things that happen _"on the side"_, not during rendering. +Ingawa functional programming inategemea sana purity, wakati fulani, mahali fulani, _kitu fulani_ lazima kibadilike. Hilo ndilo lengo la programming kwa namna fulani! Mabadiliko haya—kusasisha skrini, kuanzisha animation, kubadilisha data—huitwa **side effects.** Ni mambo yanayotokea _"pembeni"_, si wakati wa ku-render. -In React, **side effects usually belong inside [event handlers.](/learn/responding-to-events)** Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined *inside* your component, they don't run *during* rendering! **So event handlers don't need to be pure.** +Katika React, **side effects kwa kawaida hukaa ndani ya [event handlers.](/learn/responding-to-events)** Event handlers ni functions ambazo React huziendesha unapofanya kitendo fulani—kwa mfano, unapobonyeza kitufe. Ingawa event handlers hufafanuliwa *ndani* ya component yako, hazi-endeshi *wakati* wa ku-render! **Kwa hivyo event handlers hazihitaji kuwa pure.** -If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a [`useEffect`](/reference/react/useEffect) call in your component. This tells React to execute it later, after rendering, when side effects are allowed. **However, this approach should be your last resort.** +Kama umeisha chaguo nyingine zote na huwezi kupata event handler sahihi kwa side effect yako, bado unaweza kuiambatanisha na JSX yako inayorudishwa kwa wito wa [`useEffect`](/reference/react/useEffect) katika component yako. Hili huiambia React iitekeleze baadaye, baada ya ku-render, wakati side effects zinaporuhusiwa. **Hata hivyo, njia hii inapaswa kuwa suluhisho lako la mwisho.** -When possible, try to express your logic with rendering alone. You'll be surprised how far this can take you! +Inapowezekana, jaribu kuelezea mantiki yako kwa ku-render pekee. Utashangaa jinsi hili linavyoweza kukupeleka mbali! -#### Why does React care about purity? {/*why-does-react-care-about-purity*/} +#### Kwa nini React inajali kuhusu purity? {/*why-does-react-care-about-purity*/} -Writing pure functions takes some habit and discipline. But it also unlocks marvelous opportunities: +Kuandika pure functions kunahitaji mazoea na nidhamu fulani. Lakini pia kunafungua fursa za ajabu: -* Your components could run in a different environment—for example, on the server! Since they return the same result for the same inputs, one component can serve many user requests. -* You can improve performance by [skipping rendering](/reference/react/memo) components whose inputs have not changed. This is safe because pure functions always return the same results, so they are safe to cache. -* If some data changes in the middle of rendering a deep component tree, React can restart rendering without wasting time to finish the outdated render. Purity makes it safe to stop calculating at any time. +* Components zako zingeweza kuendeshwa katika mazingira tofauti—kwa mfano, kwenye seva! Kwa kuwa zinarudisha matokeo yaleyale kwa maingizo yaleyale, component moja inaweza kuhudumia maombi mengi ya watumiaji. +* Unaweza kuboresha utendaji kwa [kuruka ku-render](/reference/react/memo) components ambazo maingizo yao hayajabadilika. Hili ni salama kwa sababu pure functions kila mara hurudisha matokeo yaleyale, kwa hivyo ni salama kuzihifadhi kwenye cache. +* Kama data fulani ikibadilika katikati ya ku-render mti wa component wa kina, React inaweza kuanzisha upya ku-render bila kupoteza muda kumalizia render iliyopitwa na wakati. Purity huifanya kuwa salama kusimamisha kuhesabu wakati wowote. -Every new React feature we're building takes advantage of purity. From data fetching to animations to performance, keeping components pure unlocks the power of the React paradigm. +Kila kipengele kipya cha React tunachojenga hunufaika na purity. Kutoka kwenye kupata data hadi animations hadi utendaji, kuweka components zikiwa pure hufungua nguvu ya paradaimu ya React. -* A component must be pure, meaning: - * **It minds its own business.** It should not change any objects or variables that existed before rendering. - * **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. -* Rendering can happen at any time, so components should not depend on each others' rendering sequence. -* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects. -* Strive to express your component's logic in the JSX you return. When you need to "change things", you'll usually want to do it in an event handler. As a last resort, you can `useEffect`. -* Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm. +* Component lazima iwe pure, ikimaanisha: + * **Inashughulikia mambo yake yenyewe.** Haipaswi kubadilisha objects au vigezo vyovyote vilivyokuwepo kabla ya ku-render. + * **Ingizo lilelile, matokeo yaleyale.** Ikipewa maingizo yaleyale, component inapaswa kila mara kurudisha JSX ileile. +* Ku-render kunaweza kutokea wakati wowote, kwa hivyo components hazipaswi kutegemea mpangilio wa ku-render wa kila mmoja. +* Hupaswi kubadilisha (mutate) maingizo yoyote ambayo components zako zinatumia kwa ku-render. Hilo linajumuisha props, state, na context. Ili kusasisha skrini, ["weka" state](/learn/state-a-components-memory) badala ya kubadilisha objects zilizokuwepo tayari. +* Jitahidi kuelezea mantiki ya component yako katika JSX unayorudisha. Unapohitaji "kubadilisha mambo", kwa kawaida utataka kufanya hivyo katika event handler. Kama suluhisho la mwisho, unaweza kutumia `useEffect`. +* Kuandika pure functions kunahitaji mazoezi kidogo, lakini kunafungua nguvu ya paradaimu ya React. @@ -229,15 +229,15 @@ Every new React feature we're building takes advantage of purity. From data fetc -#### Fix a broken clock {/*fix-a-broken-clock*/} +#### Rekebisha saa iliyoharibika {/*fix-a-broken-clock*/} -This component tries to set the `

              `'s CSS class to `"night"` during the time from midnight to six hours in the morning, and `"day"` at all other times. However, it doesn't work. Can you fix this component? +Component hii inajaribu kuweka klasi ya CSS ya `

              ` kuwa `"night"` wakati wa saa kutoka usiku wa manane hadi saa sita asubuhi, na `"day"` nyakati nyingine zote. Hata hivyo, haifanyi kazi. Je, unaweza kurekebisha component hii? -You can verify whether your solution works by temporarily changing the computer's timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors! +Unaweza kuthibitisha kama suluhisho lako linafanya kazi kwa kubadilisha kwa muda eneo la saa la kompyuta. Wakati saa ya sasa iko kati ya usiku wa manane na saa sita asubuhi, saa inapaswa kuwa na rangi zilizogeuzwa! -Rendering is a *calculation*, it shouldn't try to "do" things. Can you express the same idea differently? +Ku-render ni *hesabu*, hakupaswi kujaribu "kufanya" mambo. Je, unaweza kuelezea wazo lilelile kwa namna tofauti? @@ -301,7 +301,7 @@ body > * { -You can fix this component by calculating the `className` and including it in the render output: +Unaweza kurekebisha component hii kwa kuhesabu `className` na kuijumuisha katika matokeo ya render: @@ -362,19 +362,19 @@ body > * { -In this example, the side effect (modifying the DOM) was not necessary at all. You only needed to return JSX. +Katika mfano huu, side effect (kurekebisha DOM) haikuwa ya lazima hata kidogo. Ulihitaji tu kurudisha JSX. -#### Fix a broken profile {/*fix-a-broken-profile*/} +#### Rekebisha wasifu uliovunjika {/*fix-a-broken-profile*/} -Two `Profile` components are rendered side by side with different data. Press "Collapse" on the first profile, and then "Expand" it. You'll notice that both profiles now show the same person. This is a bug. +Components mbili za `Profile` zime-render kando kwa kando zikiwa na data tofauti. Bonyeza "Collapse" kwenye wasifu wa kwanza, kisha "Expand". Utagundua kuwa wasifu zote mbili sasa zinaonyesha mtu yuleyule. Hii ni bug. -Find the cause of the bug and fix it. +Tafuta chanzo cha bug na urekebishe. -The buggy code is in `Profile.js`. Make sure you read it all from top to bottom! +Msimbo wenye bug uko katika `Profile.js`. Hakikisha unausoma wote kutoka juu hadi chini! @@ -475,9 +475,9 @@ h1 { margin: 5px; font-size: 18px; } -The problem is that the `Profile` component writes to a preexisting variable called `currentPerson`, and the `Header` and `Avatar` components read from it. This makes *all three of them* impure and difficult to predict. +Tatizo ni kwamba component ya `Profile` inaandika kwenye kigezo kilichokuwepo tayari kiitwacho `currentPerson`, na components za `Header` na `Avatar` zinasoma kutoka kwacho. Hili hufanya *zote tatu* kuwa impure na ngumu kutabiri. -To fix the bug, remove the `currentPerson` variable. Instead, pass all information from `Profile` to `Header` and `Avatar` via props. You'll need to add a `person` prop to both components and pass it all the way down. +Ili kurekebisha bug, ondoa kigezo cha `currentPerson`. Badala yake, pitisha taarifa zote kutoka `Profile` kwenda `Header` na `Avatar` kupitia props. Utahitaji kuongeza prop ya `person` kwa components zote mbili na kuipitisha hadi chini kabisa. @@ -571,15 +571,15 @@ h1 { margin: 5px; font-size: 18px; } -Remember that React does not guarantee that component functions will execute in any particular order, so you can't communicate between them by setting variables. All communication must happen through props. +Kumbuka kwamba React haihakikishi kuwa functions za components zitatekelezwa kwa mpangilio wowote maalum, kwa hivyo huwezi kuwasiliana kati yao kwa kuweka vigezo. Mawasiliano yote lazima yatokee kupitia props. -#### Fix a broken story tray {/*fix-a-broken-story-tray*/} +#### Rekebisha tray ya hadithi iliyovunjika {/*fix-a-broken-story-tray*/} -The CEO of your company is asking you to add "stories" to your online clock app, and you can't say no. You've written a `StoryTray` component that accepts a list of `stories`, followed by a "Create Story" placeholder. +Mkurugenzi Mkuu (CEO) wa kampuni yako anakuomba uongeze "hadithi" kwenye programu yako ya saa ya mtandaoni, na huwezi kukataa. Umeandika component ya `StoryTray` inayokubali orodha ya `stories`, ikifuatiwa na kishika-nafasi cha "Create Story". -You implemented the "Create Story" placeholder by pushing one more fake story at the end of the `stories` array that you receive as a prop. But for some reason, "Create Story" appears more than once. Fix the issue. +Ulitekeleza kishika-nafasi cha "Create Story" kwa kusukuma hadithi bandia moja zaidi mwishoni mwa array ya `stories` unayoipokea kama prop. Lakini kwa sababu fulani, "Create Story" inaonekana zaidi ya mara moja. Rekebisha tatizo hili. @@ -629,7 +629,7 @@ export default function App() { textAlign: 'center', }} > -

              It is {time.toLocaleTimeString()} now.

              +

              Sasa ni saa {time.toLocaleTimeString()}.

              ); @@ -675,11 +675,11 @@ li { -Notice how whenever the clock updates, "Create Story" is added *twice*. This serves as a hint that we have a mutation during rendering--Strict Mode calls components twice to make these issues more noticeable. +Angalia jinsi kila saa inaposasishwa, "Create Story" inaongezwa *mara mbili*. Hii inatoa dokezo kwamba tuna mutation wakati wa ku-render--Strict Mode inaita components mara mbili ili kufanya matatizo haya yaonekane zaidi. -`StoryTray` function is not pure. By calling `push` on the received `stories` array (a prop!), it is mutating an object that was created *before* `StoryTray` started rendering. This makes it buggy and very difficult to predict. +Function ya `StoryTray` si pure. Kwa kuita `push` kwenye array ya `stories` iliyopokelewa (prop!), inabadilisha object iliyoundwa *kabla* `StoryTray` haijaanza ku-render. Hili huifanya kuwa na bug na ngumu sana kutabiri. -The simplest fix is to not touch the array at all, and render "Create Story" separately: +Njia rahisi zaidi ya kurekebisha ni kutogusa array kabisa, na ku-render "Create Story" kando: @@ -725,7 +725,7 @@ export default function App() { textAlign: 'center', }} > -

              It is {time.toLocaleTimeString()} now.

              +

              Sasa ni saa {time.toLocaleTimeString()}.

              ); @@ -763,16 +763,16 @@ li {               -Alternatively, you could create a _new_ array (by copying the existing one) before you push an item into it: +Vinginevyo, ungeweza kuunda array _mpya_ (kwa kunakili iliyopo) kabla ya kusukuma kitu ndani yake: ```js src/StoryTray.js active export default function StoryTray({ stories }) { - // Copy the array! + // Nakili array! const storiesToDisplay = stories.slice(); - // Does not affect the original array: + // Haiathiri array ya awali: storiesToDisplay.push({ id: 'create', label: 'Create Story' @@ -817,7 +817,7 @@ export default function App() { textAlign: 'center', }} > -

              It is {time.toLocaleTimeString()} now.

              +

              Sasa ni saa {time.toLocaleTimeString()}.

              ); @@ -855,9 +855,9 @@ li {               -This keeps your mutation local and your rendering function pure. However, you still need to be careful: for example, if you tried to change any of the array's existing items, you'd have to clone those items too. +Hili huweka mutation yako ikiwa ya ndani na function yako ya ku-render ikiwa pure. Hata hivyo, bado unahitaji kuwa makini: kwa mfano, kama ungejaribu kubadilisha kimojawapo cha vitu vilivyopo kwenye array, ungehitaji kuvinakili vitu hivyo pia. -It is useful to remember which operations on arrays mutate them, and which don't. For example, `push`, `pop`, `reverse`, and `sort` will mutate the original array, but `slice`, `filter`, and `map` will create a new one. +Ni muhimu kukumbuka ni operesheni gani kwenye arrays zinazozibadilisha, na zipi hazibadilishi. Kwa mfano, `push`, `pop`, `reverse`, na `sort` zitabadilisha array ya awali, lakini `slice`, `filter`, na `map` zitaunda mpya.               diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index aae682d14..b84442319 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -1,26 +1,26 @@ --- -title: Passing Props to a Component +title: Kupitisha Props kwa Component --- -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions. +Components (vipengele) za React hutumia *props* kuwasiliana na kila mmoja. Kila component-mzazi inaweza kupitisha taarifa fulani kwa components zake za mtoto kwa kuzipa props. Props zinaweza kukukumbusha sifa za HTML, lakini unaweza kupitisha thamani yoyote ya JavaScript kupitia kwao, ikijumuisha objects, arrays (safu), na functions. -* How to pass props to a component -* How to read props from a component -* How to specify default values for props -* How to pass some JSX to a component -* How props change over time +* Jinsi ya kupitisha props kwa component +* Jinsi ya kusoma props kutoka kwa component +* Jinsi ya kubainisha thamani chaguo-msingi kwa props +* Jinsi ya kupitisha JSX fulani kwa component +* Jinsi props zinavyobadilika baada ya muda -## Familiar props {/*familiar-props*/} +## Props zinazofahamika {/*familiar-props*/} -Props are the information that you pass to a JSX tag. For example, `className`, `src`, `alt`, `width`, and `height` are some of the props you can pass to an ``: +Props ni taarifa unazopitisha kwa tagi ya JSX. Kwa mfano, `className`, `src`, `alt`, `width`, na `height` ni baadhi ya props unazoweza kupitisha kwa ``: @@ -51,11 +51,11 @@ body { min-height: 120px; } -The props you can pass to an `` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as ``, to customize them. Here's how! +Props unazoweza kupitisha kwa tagi ya `` zimebainishwa mapema (ReactDOM inafuata [kiwango cha HTML](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). Lakini unaweza kupitisha props zozote kwa *components zako mwenyewe*, kama vile ``, ili kuzibinafsisha. Hivi ndivyo unavyofanya! -## Passing props to a component {/*passing-props-to-a-component*/} +## Kupitisha props kwa component {/*passing-props-to-a-component*/} -In this code, the `Profile` component isn't passing any props to its child component, `Avatar`: +Katika msimbo huu, component ya `Profile` haipitishi props zozote kwa component yake ya mtoto, `Avatar`: ```js export default function Profile() { @@ -65,11 +65,11 @@ export default function Profile() { } ``` -You can give `Avatar` some props in two steps. +Unaweza kuipa `Avatar` props fulani kwa hatua mbili. -### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/} +### Hatua ya 1: Pitisha props kwa component-mtoto {/*step-1-pass-props-to-the-child-component*/} -First, pass some props to `Avatar`. For example, let's pass two props: `person` (an object), and `size` (a number): +Kwanza, pitisha props fulani kwa `Avatar`. Kwa mfano, hebu tupitishe props mbili: `person` (object), na `size` (namba): ```js export default function Profile() { @@ -84,25 +84,25 @@ export default function Profile() { -If double curly braces after `person=` confuse you, recall [they're merely an object](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) inside the JSX curlies. +Kama mabano-viungo mawili baada ya `person=` yanakuchanganya, kumbuka kuwa [ni object tu](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) ndani ya mabano-viungo ya JSX. -Now you can read these props inside the `Avatar` component. +Sasa unaweza kusoma props hizi ndani ya component ya `Avatar`. -### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/} +### Hatua ya 2: Soma props ndani ya component-mtoto {/*step-2-read-props-inside-the-child-component*/} -You can read these props by listing their names `person, size` separated by the commas inside `({` and `})` directly after `function Avatar`. This lets you use them inside the `Avatar` code, like you would with a variable. +Unaweza kusoma props hizi kwa kuorodhesha majina yao `person, size` yakitenganishwa na koma ndani ya `({` na `})` mara tu baada ya `function Avatar`. Hili hukuruhusu kuzitumia ndani ya msimbo wa `Avatar`, kama ambavyo ungefanya na kigezo. ```js function Avatar({ person, size }) { - // person and size are available here + // person na size zinapatikana hapa } ``` -Add some logic to `Avatar` that uses the `person` and `size` props for rendering, and you're done. +Ongeza mantiki fulani kwa `Avatar` inayotumia props za `person` na `size` kwa ku-render, nawe umemaliza. -Now you can configure `Avatar` to render in many different ways with different props. Try tweaking the values! +Sasa unaweza kusanidi `Avatar` ili i-render kwa njia nyingi tofauti kwa props tofauti. Jaribu kubadilisha thamani! @@ -168,9 +168,9 @@ body { min-height: 120px; } -Props let you think about parent and child components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`. +Props hukuruhusu kufikiria kuhusu components za mzazi na mtoto kwa kujitegemea. Kwa mfano, unaweza kubadilisha props za `person` au `size` ndani ya `Profile` bila kulazimika kufikiria jinsi `Avatar` inavyozitumia. Vivyo hivyo, unaweza kubadilisha jinsi `Avatar` inavyotumia props hizi, bila kuangalia `Profile`. -You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your component! React component functions accept a single argument, a `props` object: +Unaweza kufikiria props kama "vifundo" (knobs) unavyoweza kurekebisha. Hutimiza jukumu lilelile ambalo hoja (arguments) hutimiza kwa functions—kwa hakika, props _ndicho_ pekee kilicho hoja kwa component yako! Functions za components za React hukubali hoja moja tu, object ya `props`: ```js function Avatar(props) { @@ -180,11 +180,11 @@ function Avatar(props) { } ``` -Usually you don't need the whole `props` object itself, so you destructure it into individual props. +Kwa kawaida hauhitaji object nzima ya `props` yenyewe, hivyo unaipasua (destructure) kuwa props mahususi. -**Don't miss the pair of `{` and `}` curlies** inside of `(` and `)` when declaring props: +**Usisahau jozi ya mabano-viungo `{` na `}`** ndani ya `(` na `)` unapotangaza props: ```js function Avatar({ person, size }) { @@ -192,7 +192,7 @@ function Avatar({ person, size }) { } ``` -This syntax is called ["destructuring"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) and is equivalent to reading properties from a function parameter: +Sintaksia hii inaitwa ["destructuring"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) na inalingana na kusoma sifa kutoka kwa kigezo cha function: ```js function Avatar(props) { @@ -204,9 +204,9 @@ function Avatar(props) { -## Specifying a default value for a prop {/*specifying-a-default-value-for-a-prop*/} +## Kubainisha thamani chaguo-msingi kwa prop {/*specifying-a-default-value-for-a-prop*/} -If you want to give a prop a default value to fall back on when no value is specified, you can do it with the destructuring by putting `=` and the default value right after the parameter: +Kama unataka kuipa prop thamani chaguo-msingi ya kurejea pale ambapo hakuna thamani iliyobainishwa, unaweza kufanya hivyo kwa destructuring kwa kuweka `=` na thamani chaguo-msingi mara tu baada ya kigezo: ```js function Avatar({ person, size = 100 }) { @@ -214,13 +214,13 @@ function Avatar({ person, size = 100 }) { } ``` -Now, if `` is rendered with no `size` prop, the `size` will be set to `100`. +Sasa, kama `` ita-render bila prop ya `size`, `size` itawekwa kuwa `100`. -The default value is only used if the `size` prop is missing or if you pass `size={undefined}`. But if you pass `size={null}` or `size={0}`, the default value will **not** be used. +Thamani chaguo-msingi hutumika tu kama prop ya `size` haipo au kama unapitisha `size={undefined}`. Lakini kama unapitisha `size={null}` au `size={0}`, thamani chaguo-msingi **haitatumika**. -## Forwarding props with the JSX spread syntax {/*forwarding-props-with-the-jsx-spread-syntax*/} +## Kupeleka props kwa sintaksia ya JSX spread {/*forwarding-props-with-the-jsx-spread-syntax*/} -Sometimes, passing props gets very repetitive: +Wakati mwingine, kupitisha props kunakuwa na marudio mengi sana: ```js function Profile({ person, size, isSepia, thickBorder }) { @@ -237,7 +237,7 @@ function Profile({ person, size, isSepia, thickBorder }) { } ``` -There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax: +Hakuna ubaya wowote kwa msimbo wenye marudio—unaweza kuwa unaosomeka zaidi. Lakini wakati mwingine unaweza kuthamini ufupi. Baadhi ya components hupeleka props zao zote kwa watoto wao, kama ambavyo `Profile` hii inavyofanya na `Avatar`. Kwa sababu hazitumii yoyote kati ya props zao moja kwa moja, inaweza kuwa na maana kutumia sintaksia fupi zaidi ya "spread": ```js function Profile(props) { @@ -249,13 +249,13 @@ function Profile(props) { } ``` -This forwards all of `Profile`'s props to the `Avatar` without listing each of their names. +Hili hupeleka props zote za `Profile` kwa `Avatar` bila kuorodhesha kila jina lao. -**Use spread syntax with restraint.** If you're using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next! +**Tumia sintaksia ya spread kwa kiasi.** Kama unaitumia kwenye kila component nyingine, kuna kitu hakiko sawa. Mara nyingi, hili huashiria kuwa unapaswa kugawanya components zako na kupitisha children kama JSX. Zaidi kuhusu hilo baadaye! -## Passing JSX as children {/*passing-jsx-as-children*/} +## Kupitisha JSX kama children {/*passing-jsx-as-children*/} -It is common to nest built-in browser tags: +Ni jambo la kawaida kupachika tagi za kivinjari zilizojengwa ndani: ```js
              @@ -263,7 +263,7 @@ It is common to nest built-in browser tags:
              ``` -Sometimes you'll want to nest your own components the same way: +Wakati mwingine utataka kupachika components zako mwenyewe kwa njia ileile: ```js @@ -271,7 +271,7 @@ Sometimes you'll want to nest your own components the same way: ``` -When you nest content inside a JSX tag, the parent component will receive that content in a prop called `children`. For example, the `Card` component below will receive a `children` prop set to `` and render it in a wrapper div: +Unapopachika maudhui ndani ya tagi ya JSX, component-mzazi itapokea maudhui hayo katika prop iitwayo `children`. Kwa mfano, component ya `Card` iliyo hapa chini itapokea prop ya `children` iliyowekwa kuwa `` na kui-render ndani ya div ya kufunika: @@ -347,17 +347,17 @@ export function getImageUrl(person, size = 's') { -Try replacing the `` inside `` with some text to see how the `Card` component can wrap any nested content. It doesn't need to "know" what's being rendered inside of it. You will see this flexible pattern in many places. +Jaribu kubadilisha `` iliyo ndani ya `` na maandishi fulani ili kuona jinsi component ya `Card` inavyoweza kufunika maudhui yoyote yaliyopachikwa. Haihitaji "kujua" kile kinachо-render ndani yake. Utaona mpangilio huu unaonyumbulika katika sehemu nyingi. -You can think of a component with a `children` prop as having a "hole" that can be "filled in" by its parent components with arbitrary JSX. You will often use the `children` prop for visual wrappers: panels, grids, etc. +Unaweza kufikiria component yenye prop ya `children` kama iliyo na "shimo" linaloweza "kujazwa" na components zake za mzazi kwa JSX yoyote. Mara nyingi utatumia prop ya `children` kwa vifuniko vya kuonekana: paneli, gridi, n.k. -## How props change over time {/*how-props-change-over-time*/} +## Jinsi props zinavyobadilika baada ya muda {/*how-props-change-over-time*/} -The `Clock` component below receives two props from its parent component: `color` and `time`. (The parent component's code is omitted because it uses [state](/learn/state-a-components-memory), which we won't dive into just yet.) +Component ya `Clock` iliyo hapa chini hupokea props mbili kutoka kwa component yake ya mzazi: `color` na `time`. (Msimbo wa component-mzazi umeachwa kwa sababu unatumia [state (hali)](/learn/state-a-components-memory), ambayo hatutaingia ndani yake bado.) -Try changing the color in the select box below: +Jaribu kubadilisha rangi kwenye sanduku la kuchagua lililo hapa chini: @@ -392,7 +392,7 @@ export default function App() { return (

              - Pick a color:{' '} + Chagua rangi:{' '}