Drop Writing Markup with JSX translation (already claimed by @kazz54)

Restores the English original for this page to avoid duplicating
@kazz54's claimed work on the sw.react.dev progress issue (#1).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: DENNIS-CODES

src/content/learn/writing-markup-with-jsx.md

@@ -1,24 +1,24 @@
 ---
-title: Kuandika Markup kwa JSX
+title: Writing Markup with JSX
 ---
 
 <Intro>
 
-*JSX* ni kiendelezi cha sintaksia cha JavaScript kinachokuwezesha kuandika markup inayofanana na HTML ndani ya faili ya JavaScript. Ingawa kuna njia nyingine za kuandika components (vipengele), watengenezaji wengi wa React hupendelea ufupi wa JSX, na misingi mingi ya msimbo huitumia.
+*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
 
 </Intro>
 
 <YouWillLearn>
 
-* Kwa nini React huchanganya markup na mantiki ya ku-render
-* Jinsi JSX inavyotofautiana na HTML
-* Jinsi ya kuonyesha taarifa kwa JSX
+* Why React mixes markup with rendering logic
+* How JSX is different from HTML
+* How to display information with JSX
 
 </YouWillLearn>
 
-## JSX: Kuweka markup ndani ya JavaScript {/*jsx-putting-markup-into-javascript*/}
+## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/}
 
-Wavuti imejengwa juu ya HTML, CSS, na JavaScript. Kwa miaka mingi, watengenezaji wa wavuti waliweka maudhui katika HTML, muundo katika CSS, na mantiki katika JavaScript—mara nyingi katika faili tofauti! Maudhui yaliwekewa markup ndani ya HTML huku mantiki ya ukurasa ikikaa kando katika JavaScript:
+The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
 
 <DiagramGroup>
 
@@ -36,7 +36,7 @@ JavaScript
 
 </DiagramGroup>
 
-Lakini kadri Wavuti ilivyozidi kuwa na mwingiliano, mantiki ilizidi kuamua maudhui. JavaScript ilikuwa msimamizi wa HTML! Ndiyo maana **katika React, mantiki ya ku-render na markup hukaa pamoja mahali pamoja—components.**
+But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
 
 <DiagramGroup>
 
@@ -54,19 +54,19 @@ Lakini kadri Wavuti ilivyozidi kuwa na mwingiliano, mantiki ilizidi kuamua maudh
 
 </DiagramGroup>
 
-Kuweka mantiki ya ku-render ya kitufe na markup yake pamoja kunahakikisha vinabaki kupatana kila wakati unapofanya mabadiliko. Kinyume chake, mambo yasiyohusiana, kama vile markup ya kitufe na markup ya sidebar, hutengwa mbali na kila kimoja, jambo linalofanya kuwa salama zaidi kubadilisha chochote kati yao peke yake.
+Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
 
-Kila React component ni function ya JavaScript ambayo huenda ikawa na markup fulani ambayo React huii-render kwenye kivinjari. Components za React hutumia kiendelezi cha sintaksia kiitwacho JSX kuwakilisha markup hiyo. JSX inafanana sana na HTML, lakini ni kali kidogo zaidi na inaweza kuonyesha taarifa zinazobadilika. Njia bora ya kuelewa hili ni kubadilisha markup fulani ya HTML kuwa markup ya 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. The best way to understand this is to convert some HTML markup to JSX markup.
 
 <Note>
 
-JSX na React ni vitu viwili tofauti. Mara nyingi hutumika pamoja, lakini *unaweza* [kuvitumia kwa kujitegemea](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) kila kimoja. JSX ni kiendelezi cha sintaksia, ilhali React ni maktaba ya JavaScript.
+JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library.
 
 </Note>
 
-## Kubadilisha HTML kuwa JSX {/*converting-html-to-jsx*/}
+## Converting HTML to JSX {/*converting-html-to-jsx*/}
 
-Tuseme una HTML fulani (halali kabisa):
+Suppose that you have some (perfectly valid) HTML:
 
 ```html
 <h1>Hedy Lamarr's Todos</h1>
@@ -82,7 +82,7 @@ Tuseme una HTML fulani (halali kabisa):
 </ul>
 ```
 
-Na unataka kuiweka ndani ya component yako:
+And you want to put it into your component:
 
 ```js
 export default function TodoList() {
@@ -92,15 +92,15 @@ export default function TodoList() {
 }
 ```
 
-Ukiinakili na kuibandika kama ilivyo, haitafanya kazi:
+If you copy and paste it as is, it will not work:
 
 
 <Sandpack>
 
 ```js
 export default function TodoList() {
   return (
-    // Hii haifanyi kazi vizuri!
+    // This doesn't quite work!
     <h1>Hedy Lamarr's Todos</h1>
     <img 
       src="https://i.imgur.com/yXOvdOSs.jpg" 
@@ -122,21 +122,21 @@ img { height: 90px }
 
 </Sandpack>
 
-Hii ni kwa sababu JSX ni kali zaidi na ina kanuni chache zaidi kuliko HTML! Ukisoma ujumbe wa hitilafu ulio hapo juu, utakuongoza kurekebisha markup, au unaweza kufuata mwongozo ulio hapa chini.
+This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
 
 <Note>
 
-Mara nyingi, ujumbe wa hitilafu wa React unaoonekana kwenye skrini utakusaidia kupata mahali tatizo lilipo. Uupe usomaji kama umekwama!
+Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
 
 </Note>
 
-## Kanuni za JSX {/*the-rules-of-jsx*/}
+## The Rules of JSX {/*the-rules-of-jsx*/}
 
-### 1. Rudisha elementi moja ya mzizi {/*1-return-a-single-root-element*/}
+### 1. Return a single root element {/*1-return-a-single-root-element*/}
 
-Ili kurudisha elementi nyingi kutoka kwenye component, **zifunge kwa tagi moja ya mzazi.**
+To return multiple elements from a component, **wrap them with a single parent tag.**
 
-Kwa mfano, unaweza kutumia `<div>`:
+For example, you can use a `<div>`:
 
 ```js {1,11}
 <div>
@@ -153,7 +153,7 @@ Kwa mfano, unaweza kutumia `<div>`:
 ```
 
 
-Kama hutaki kuongeza `<div>` ya ziada kwenye markup yako, unaweza kuandika `<>` na `</>` badala yake:
+If you don't want to add an extra `<div>` to your markup, you can write `<>` and `</>` instead:
 
 ```js {1,11}
 <>
@@ -169,21 +169,21 @@ Kama hutaki kuongeza `<div>` ya ziada kwenye markup yako, unaweza kuandika `<>`
 </>
 ```
 
-Tagi hii tupu inaitwa *[Fragment.](/reference/react/Fragment)* Fragments zinakuwezesha kuweka vitu katika kundi bila kuacha alama yoyote katika mti wa HTML wa kivinjari.
+This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
 
 <DeepDive>
 
-#### Kwa nini tagi nyingi za JSX zinahitaji kufungwa? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
+#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
 
-JSX inafanana na HTML, lakini ndani ya pazia hubadilishwa kuwa objects za kawaida za JavaScript. Huwezi kurudisha objects mbili kutoka kwa function bila kuzifunga ndani ya array (safu). Hii inaeleza kwa nini pia huwezi kurudisha tagi mbili za JSX bila kuzifunga ndani ya tagi nyingine au Fragment.
+JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
 
 </DeepDive>
 
-### 2. Funga tagi zote {/*2-close-all-the-tags*/}
+### 2. Close all the tags {/*2-close-all-the-tags*/}
 
-JSX inahitaji tagi zifungwe waziwazi: tagi zinazojifunga zenyewe kama `<img>` lazima ziwe `<img />`, na tagi zinazofunga kama `<li>oranges` lazima ziandikwe kama `<li>oranges</li>`.
+JSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
 
-Hivi ndivyo picha ya Hedy Lamarr na vipengele vya orodha vinavyoonekana vikiwa vimefungwa:
+This is how Hedy Lamarr's image and list items look closed:
 
 ```js {2-6,8-10}
 <>
@@ -200,11 +200,11 @@ Hivi ndivyo picha ya Hedy Lamarr na vipengele vya orodha vinavyoonekana vikiwa v
 </>
 ```
 
-### 3. camelCase <s>vitu vyote</s> vingi vya vitu! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. camelCase <s>all</s> most of the things! {/*3-camelcase-salls-most-of-the-things*/}
 
-JSX hugeuka kuwa JavaScript na sifa zilizoandikwa katika JSX huwa keys za objects za JavaScript. Katika components zako mwenyewe, mara nyingi utataka kusoma sifa hizo ndani ya vigezo. Lakini JavaScript ina vikwazo kwenye majina ya vigezo. Kwa mfano, majina yao hayawezi kuwa na mistari-tandavu au kuwa maneno yaliyohifadhiwa kama `class`.
+JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
 
-Ndiyo maana, katika React, sifa nyingi za HTML na SVG huandikwa kwa camelCase. Kwa mfano, badala ya `stroke-width` unatumia `strokeWidth`. Kwa kuwa `class` ni neno lililohifadhiwa, katika React unaandika `className` badala yake, lililopewa jina kutokana na [sifa inayolingana ya DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
 
 ```js {4}
 <img 
@@ -214,19 +214,19 @@ Ndiyo maana, katika React, sifa nyingi za HTML na SVG huandikwa kwa camelCase. K
 />
 ```
 
-Unaweza [kuzipata sifa hizi zote katika orodha ya props za DOM components.](/reference/react-dom/components/common) Ukikosea moja, usijali—React itachapisha ujumbe wenye marekebisho yanayowezekana kwenye [console ya kivinjari.](https://developer.mozilla.org/docs/Tools/Browser_Console)
+You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
 
 <Pitfall>
 
-Kwa sababu za kihistoria, sifa za [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) na [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) huandikwa kama zilivyo katika HTML kwa mistari-tandavu.
+For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
 
 </Pitfall>
 
-### Kidokezo cha kitaalamu: Tumia Kigeuzi cha JSX {/*pro-tip-use-a-jsx-converter*/}
+### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
 
-Kubadilisha sifa hizi zote katika markup iliyopo kunaweza kuchosha! Tunapendekeza kutumia [kigeuzi](https://transform.tools/html-to-jsx) kutafsiri HTML na SVG yako iliyopo kuwa JSX. Vigeuzi vina manufaa makubwa katika matumizi halisi, lakini bado ni muhimu kuelewa kinachoendelea ili uweze kuandika JSX kwa raha mwenyewe.
+Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
 
-Hapa kuna matokeo yako ya mwisho:
+Here is your final result:
 
 <Sandpack>
 
@@ -258,21 +258,21 @@ img { height: 90px }
 
 <Recap>
 
-Sasa unajua kwa nini JSX ipo na jinsi ya kuitumia katika components:
+Now you know why JSX exists and how to use it in components:
 
-* Components za React huweka mantiki ya ku-render pamoja na markup kwa sababu vinahusiana.
-* JSX inafanana na HTML, kwa tofauti chache. Unaweza kutumia [kigeuzi](https://transform.tools/html-to-jsx) kama unahitaji.
-* Ujumbe wa hitilafu mara nyingi utakuelekeza katika njia sahihi ya kurekebisha markup yako.
+* React components group rendering logic together with markup because they are related.
+* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
+* Error messages will often point you in the right direction to fixing your markup.
 
 </Recap>
 
 
 
 <Challenges>
 
-#### Badilisha HTML fulani kuwa JSX {/*convert-some-html-to-jsx*/}
+#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
 
-HTML hii ilibandikwa ndani ya component, lakini si JSX halali. Irekebishe:
+This HTML was pasted into a component, but it's not valid JSX. Fix it:
 
 <Sandpack>
 
@@ -308,7 +308,7 @@ export default function Bio() {
 
 </Sandpack>
 
-Kuifanya kwa mkono au kwa kutumia kigeuzi ni juu yako!
+Whether to do it by hand or using the converter is up to you!
 
 <Solution>