< React Native

JSX

Szerző: Sallai András

Copyright © Sallai András, 2021, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A JSX

A JSX a JavaScript Syntax Extension rövidítése, amit néhol JavaScript XML-ként emlegetnek.

A JSX a JavaScript nyelv szintaxisának kiterjesztése.

Szimpla zárójelbe HTML tageket írunk, ezt nevezzük JSX-nek.

Példa

const App = () => { return ( <div> <p>Fejrész</p> <p>Tartalom</p> <p>Lábrész</p> </div> ); }

Szabályok

A HTML-t egyetlen legfelső szintű elembe kell csomagolni.

A JSX kódot tegyük () zárójelek közzé.

A kód legyen többsoros az olvashatóság érdekében.

Ha egynél több gyermekelem van, használjunk tömböt.

A JSX minden címkéje egy függvényhívás, ami létrehoz egy elemet. A háttérben a createElement() függvényhívás történik.

A .tsx

Ha TypeScript forráskód tartalmaz JSX-t, akkor a szokásos kiterjesztés: .tsx

React Native JSX példa

const App = () => { return ( <View> <Text>Fejrész</Text> <Text>Tartalom</Text> <Text>Lábrész</Text> </View> ); }