[[oktatas:telefon:react_native|< React Native]]

====== JSX ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 =====

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


===== 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 =====

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