# JSX-muotoilija

Muotoile React-komponentit ja muu JSX-koodi tällä JSX-muotoilijalla. Liitä koodisi, niin työkalu jäsentää sen JavaScript-moduulina, jossa JSX on käytössä, tulostaa JavaScript-koodin kahden välilyönnin sisennyksellä ja puolipisteillä sekä asettelee moniriviset JSX-elementit niin, että sisäkkäiset tunnisteet ovat omilla riveillään sulkeiden sisällä. Syntaksivirheistä ilmoitetaan, jotta React-kehittäjät saavat luettavat komponentit tarkistuksia, virheenkorjausta ja dokumentointia varten.

## Usein kysytyt kysymykset

### Miten JSX-muotoilija toimii?

Ensin koodi jäsennetään JavaScript-moduulina, jossa JSX on käytössä, ja tulostetaan yhdenmukaisella tyylillä. JSX-elementit asetellaan sen jälkeen samojen sääntöjen mukaan kuin HTML-muotoilijassa, joten sisäkkäiset lohkotunnisteet saavat omat sisennetyt rivinsä.

### Miten moniriviset JSX-elementit kirjoitetaan?

Kun elementissä on lohkotason lapsielementtejä, kuten div, section, p, ul tai h1, kukin lapsielementti sijoitetaan omalle rivilleen ja koko elementti kääritään sulkeisiin. Yhdelle riville mahtuvat elementit, kuten yksittäinen komponenttitunniste, pysyvät samalla rivillä.

### Tuetaanko fragmentteja ja itsestään sulkeutuvia komponentteja?

Kyllä. Muodossa <> ja </> kirjoitetut fragmentit sekä itsestään sulkeutuvat komponentit, kuten <Item key={1}/>, jäsennetään ja säilytetään. Niiden attribuutit ja aaltosulkeiden sisällä olevat lausekkeet kopioidaan sellaisinaan.

### Mitä tapahtuu syntaksivirheiden yhteydessä?

Jäsennin pysähtyy ja työkalu näyttää virheilmoituksen, esimerkiksi ilmoituksen odottamattomasta tokenista, sen sijaan että palauttaisi puoliksi muotoillun koodin. Korjaa ilmoitettu kohta ja muotoile koodi uudelleen.

### Mitä tyyliä JavaScript-osa käyttää?

Lohkot sisennetään kahdella välilyönnillä, kullakin rivillä on yksi lauseke, operaattoreiden ympärillä on välilyönnit ja lauseet päättyvät puolipisteeseen. Tyylin muuttamiseen ei ole asetuksia.

### Säilyvätkö kommentit?

Kyllä, JavaScript-koodin rivi- ja lohkokommentit säilytetään. JSX-lausekkeiden sisällä olevat kommentit pysyvät aaltosulkeidensa sisällä.

### Tukeeko se TypeScript-koodia TSX-tiedostoissa?

Ei. Tämän työkalun jäsentämä JSX-kielioppi ei sisällä tyyppimerkintöjä, joten tyyppejä sisältävä TSX hylätään syntaksivirheenä. Käytä tyypitettyyn koodiin TypeScript-muotoilijaa.

### Muuttuuko komponenttini renderöinti muotoilun seurauksena?

JavaScript tulostetaan vain uudelleen, ja JSX-asettelu muuttaa lohkoelementtien välisiä tyhjätiloja, jotka React ohittaa, kun elementit ovat eri riveillä. Tarkista tunnisteiden vieressä oleva teksti, jos välilyöntien täsmällisyys on tärkeää.

### Miksi tuloste on javascript-aitauksessa?

JSX on JavaScript-kielen laajennus, joten tulos palautetaan Markdown-koodilohkona, jonka merkintä on javascript. Kopioi aitausten väliset rivit .jsx-tiedostoosi.

### Kuinka suuri komponenttini voi olla?

Enintään 5 MB koodia suoritusta kohden; suurempi syöte hylätään ja siitä näytetään viesti. Tuloste on sama kuin Code Formatterin JSX-vaihtoehdolla.

Mainospaikka vapaana?

[Lähetä meille sähköpostia](mailto:hi@dennn.is?subject=Mainostaminen%20palvelussa%20OneClick%20Pro)

[Mainos Agenteille valmis lisäosa­sarja tuotteelle WordPress.](https://sleekwp.com/?ref=oneclickpro)