Tangazo
Zana zote Bila Malipo

Bandika HTML na upate JSX safi ya React — class inakuwa className, sifa zinakuwa camelCase, mfuatano wa style unakuwa vitu na vitambulisho vinajifunga vyenyewe. Hufanya kazi kabisa kwenye kivinjari chako. Bila malipo.

Kila kitu hufanya kazi kwenye kivinjari chako — markup yako haitoki kamwe kwenye kifaa chako.

snippet.html
1
Component.jsx

							
{ } JSX yako itaonekana hapa

Kuhusu Kibadilishi cha HTML hadi JSX

Kibadilishi cha HTML kwenda JSX hubadilisha alama za HTML za kawaida kuwa JSX tayari kwa React papo hapo. Hubadilisha class kuwa className na for kuwa htmlFor, hufanya camelCase kwa kebab-case na sifa za SVG, hubadilisha mifuatano ya style ya inline kuwa objects za style za JSX, na hufunga vipengele visivyo na maudhui (void) kama img na br vyenyewe — hasa marekebisho ambayo ungeyafanya kwa mkono.

Bandika snippet, sehemu kamili ya ukurasa, au alama zilizohamishwa kutoka zana ya usanifu, na paneli ya JSX husasishwa unapoandika ikiwa na syntax highlighting. Kifuniko cha hiari hubadilisha matokeo kuwa function component yenye jina, hivyo matokeo huingia moja kwa moja kwenye mradi wa React bila marekebisho zaidi.

Kibadilishi hiki ni zana ya HTML kwenda JSX inayofanya kazi kabisa upande wa mteja (client-side): alama zako hubadilishwa na JavaScript kwenye kivinjari chako na haziwahi kuondoka kwenye kifaa chako, jambo linalofanya iwe salama kutumika na violezo vya kipekee na kurasa za ndani.

Jinsi ya kutumia Kibadilishi cha HTML hadi JSX

  1. Bandika HTML yako kwenye paneli ya kushoto, au bofya Sample kupakia mfano.
  2. Angalia paneli ya JSX ikisasishwa papo hapo unapoandika au kuhariri.
  3. Washa Wrap in a component na weka jina la component kama unataka function component iliyotayarishwa tayari.
  4. Bofya Copy kuchukua JSX, au Download kuihifadhi kama Component.jsx.
  5. Tumia Clear kurudisha paneli zote mbili kwenye hali ya awali na kubadilisha snippet nyingine.

Maswali yanayoulizwa mara kwa mara

Hubadilisha jina la class kuwa className na for kuwa htmlFor, hufanya camelCase sifa zenye mistari (dashed), ikiwemo sifa za SVG, hubadilisha mifuatano ya style ya inline kuwa objects za style za JSX, na hufunga tagi zisizo na maudhui kama img, br na input, hivyo matokeo yanakuwa JSX halali.

Ndiyo. Washa Wrap in a component na chagua jina la component, na zana itatoa function component kamili inayozunguka alama zilizobadilishwa, tayari kubandikwa kwenye mradi wako au kupakuliwa kama faili ya .jsx.

Ndiyo. Sifa ya style kama style="margin-top: 10px" inakuwa object ya JSX kama style={{marginTop: '10px'}}, huku kila sifa ya CSS ikifanywa camelCase, ikiwemo sifa zenye viambishi vya vendor.

Hapana. Ubadilishaji hufanyika kabisa kwenye kivinjari chako, hivyo alama zako haziondoki kwenye kifaa chako. Unaweza kubadilisha kwa usalama violezo vya ndani na kurasa ambazo hazijatolewa.

Ndiyo, ni bure kabisa. Hakuna hitaji la akaunti, hakuna gharama ya credit na hakuna kikomo cha idadi ya snippets unazobadilisha.

Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.