JSX

JSX permets d'intégrer des balises à l'intérieur même du JavaScript et d'encapsuler les responsabilités via les components

• Un seul élément à la racine, sinon utiliser un div ou un fragment <> ... </>
• JSX n'est pas exactement du HTML, il faut absolument fermer toutes les balises ,
  , etc.
• Les attributs/propriétés CSS utilisent la nomenclature camelCase className, onClick, backgroundColor, etc.

Un component est défini par une fonction qui retourne du JSX

function ButtonIcon() {
    return (
        <button>
            <img src="image.jpg" />
            Click here!
        </button>
    );
}

La fonction peut appliquer une logique pour modifier le contenu retourné

function ButtonIcon() {

    if (isLoading) {
        return (
            <button>
                <img src="image.jpg" />
                Click here!
            </button>
        );
    } else {
        return (
            <button disabled>
                <img src="spinner.gif" />
                Loading...
            </button>
        );
    }

}

On peut également intégrer la logique à l'intérieur du JSX via les accolades { ... }

function ButtonIcon() {
    return (
        <button disabled={ isLoading }>
            <img src={ isLoading ? 'loading.gif' : 'image.jpg' }/>
            { isLoading ? 'Loading...' : 'Click here!' }
        </button>
    );
}

On voit souvent 2 accolades {{ ... }}, qui intègre un objet JavaScript

function Header() {
    return (
        <h1 style={{ color: 'red', textAlign: 'center' }}>...</h1>
    );
}

Les components peuvent recevoir des paramètres via les props

function Header(props) {
    const h1 = () => {
        return <h1 style={{ color: 'red', textAlign: 'center' }}>{ props.title }</h1>
    };

    // Absent, undefined
    if (props.linkable) {
        return (
            <a href={ `#${props.title}` } id={ props.title } >
                { h1() }
            </a>
        );
    } else {
        h1();
    }
}

// Usage

<Header title="Le titre!" />

On peut simplifier l'accès aux props via le destructuring

function Header({ title, linkable }) {
    const h1 = () => {
        return <h1 style={{ color: 'red', textAlign: 'center' }}>{ props.title }</h1>
    };

    if (linkable) {
        return (
            <a href={ `#${title}` } id={ title } >
                { h1() }
            </a>
        );
    } else {
        h1();
    }
}

// Usage

<Header title="Le titre!" linkable={ true } />

📚 Balises JSX

📚 JavaScript JSX

Mise en page

On retrouve la plupart des propriétés CSS en React Native. On utilise 2 unités de mesure les DIP par défaut et les % fontSize: 24, width: '50%'

📚 Styles

📚 Dimensions

On utilise Flexbox qui permets de distribuer des éléments sur un axes et de contrôler leur positionnement via plusieurs propriétés CSS.

📚 Flexbox

ℹ️ Aide-mémoire Flexbox

React Native propose un ensemble de components par défaut, mais ils ne répondent pas nécessairement à tous les besoins. Il est commun d'utiliser une librairies de composants pour accélérer et uniformiser la mise en place de l'interface de l'application.

📚 Référence components et attributs

ℹ️ Librairies UI

Icônes

Expo intègre un libraire d'icônes exhaustive et facile d'utilisation

import { FontAwesome5 } from '@expo/vector-icons'; 

// ...

<FontAwesome5 name="smile" size={24} color="black" />

📚 Expo Icons

📚 Liste des icônes