Ressources

ReactJS

ReactNative

Initialisation du projet

bash

npx create-expo-app demo --template blank

cd demo

# Version Web
npx expo install react-dom react-native-web

# Utilitaire d'affichage appareils mobiles
npx expo install react-native-safe-area-context

Structure du projet

bash

├── App.js    # Composant racine
├── index.js  # Point d'entrée du code, package.json > main: ...
├── app.json  # Metadonnées du projet: nom, version, configurations...
├── assets    # Ressources statiques: images, sons, pdf, etc.
│   ├── icon.png
│   └── splash.png
├── babel.config.js  # Configuration de build
├── .expo            # Fichiers locaux de l'environnement de build Expo
├── .gitignore
├── package.json     # Liste des dépendances JS
└── package-lock.json

JSX

Le langage de templating de React Native

Balises
- { } est la porte d'entrée pour JavaScript
- JavaScript offre: Condition, Boucle, Traitement/Appel de fonction
Attributs → props
Style
- Flexbox
- StyleSheet
SafeAreaView

Code

jsx

copier

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, Switch, Button, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Text style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center' }}>Todoer</Text>

        <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>

          <TextInput
              placeholder='New task'
              style={[styles.input, { height: 48, flexGrow: 1 }]}
          />

          <Switch />

        </View>

        <TextInput
            placeholder='Optional description'
            style={[styles.input, { width: '100%', height: 96, verticalAlign: 'top' }]}
            multiline={ true }
        />

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        {/* Envelopper dans une View pour eviter une largeur de 100% */}

          <Button
              title='Add'
              color='green'
          />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 16,
    padding: 16,
    justifyContent: 'start',
  },
  input: {
    borderWidth: 1,
    borderColor: 'lightgray',
    padding: 8,
  },
  text: {
    fontSize: 18,
  },
});

jsx

copier

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, Switch, Button, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Text style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center' }}>Todoer</Text>

        <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>

          <TextInput
              placeholder='New task'
              style={[styles.input, { height: 48, flexGrow: 1 }]}
          />

          <Switch />

        </View>

        <TextInput
            placeholder='Optional description'
            style={[styles.input, { width: '100%', height: 96, verticalAlign: 'top' }]}
            multiline={ true }
        />

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        {/* Envelopper dans une View pour eviter une largeur de 100% */}

          <Button
              title='Add'
              color='green'
          />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 16,
    padding: 16,
    justifyContent: 'start',
  },
  input: {
    borderWidth: 1,
    borderColor: 'lightgray',
    padding: 8,
  },
  text: {
    fontSize: 18,
  },
});

State

Mécanisme de réactivité de React, suivi des changements et mise à jour/re-render des components

useState
- hooks

jsx

copier

import { useState } from 'react';

const [name, setName] = useState('');
const [completed, setCompleted] = useState(false);

// ...

<TextInput
  placeholder='New task'
  style={[styles.input, { height: 48, flexGrow: 1 }]}
  value={ name }
  onChangeText={ (text) => setName(text) }
/>

<Switch
  value={ completed }
  onValueChange={ (value) => setCompleted(value) }
/>

// ...

<Text>{ JSON.stringify({ name, completed }) }</Text>

Immutabilité
- destructuring!
Événements
- handle...()

jsx

copier

import { useState } from 'react';

const [todos, setTodos] = useState([])

function handleAdd() {
  setTodos([
    ...todos,
    {
      name,
      completed,
    }
  ])

  setName('')
  setCompleted(false)
}

// ...

<Button
  title='Add'
  color='green'

  onPress={ handleAdd }
/>

// ...

<Text>{ JSON.stringify(todos) }</Text>

Code

On favorise le regroupe de states reliés dans un objet!

newTodo

jsx

copier

"import { StatusBar } from 'expo-status-bar';\nimport { StyleSheet, Text, TextInput, Switch, Button, View } from 'react-native';\nimport { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';\nimport { useState } from 'react';\n\nexport default function App() {\n const [newTodo, setNewTodo] = useState({ name: '', completed: false })\n const [todos, setTodos] = useState([])\n\n function handleAdd() {\n setTodos([\n ...todos,\n newTodo\n ])\n\n setNewTodo({ name: '', completed: false })\n }\n\n return (\n \u003cSafeAreaProvider\u003e\n \u003cSafeAreaView style={styles.container}\u003e\n \u003cText style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center' }}\u003eTodoer\u003c/Text\u003e\n\n \u003cView style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}\u003e\n\n \u003cTextInput\n placeholder='New task'\n style={[styles.input, { height: 48, flexGrow: 1 }]}\n value={ newTodo.name }\n onChangeText={ (text) =\u003e setNewTodo({ ...newTodo, name: text}) }\n /\u003e\n\n \u003cSwitch\n value={ newTodo.completed }\n onValueChange={ (value) =\u003e setNewTodo({ ...newTodo, completed: value}) }\n /\u003e\n\n \u003c/View\u003e\n\n \u003cText\u003e{ JSON.stringify(newTodo) }\u003c/Text\u003e\n\n \u003cTextInput\n placeholder='Optional description'\n style={[styles.input, { width: '100%', height: 96, verticalAlign: 'top' }]}\n multiline={ true }\n /\u003e\n\n \u003cView style={{ flexDirection: 'row', justifyContent: 'center' }}\u003e\n {/* Envelopper dans une View pour eviter une largeur de 100% */}\n\n \u003cButton\n title='Add'\n color='green'\n\n onPress={ handleAdd }\n /\u003e\n \u003c/View\u003e\n\n \u003cText\u003e{ JSON.stringify(todos) }\u003c/Text\u003e\n \u003c/SafeAreaView\u003e\n \u003c/SafeAreaProvider\u003e\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n gap: 16,\n padding: 16,\n justifyContent: 'start',\n },\n input: {\n borderWidth: 1,\n borderColor: 'lightgray',\n padding: 8,\n },\n text: {\n fontSize: 18,\n },\n});"

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, Switch, Button, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { useState } from 'react';

export default function App() {
  const [newTodo, setNewTodo] = useState({ name: '', completed: false })
  const [todos, setTodos] = useState([])

  function handleAdd() {
    setTodos([
      ...todos,
      newTodo
    ])

    setNewTodo({ name: '', completed: false })
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Text style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center' }}>Todoer</Text>

        <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>

          <TextInput
              placeholder='New task'
              style={[styles.input, { height: 48, flexGrow: 1 }]}
              value={ newTodo.name }
              onChangeText={ (text) => setNewTodo({ ...newTodo, name: text}) }
          />

          <Switch
            value={ newTodo.completed }
            onValueChange={ (value) => setNewTodo({ ...newTodo, completed: value}) }
          />

        </View>

        <Text>{ JSON.stringify(newTodo) }</Text>

        <TextInput
            placeholder='Optional description'
            style={[styles.input, { width: '100%', height: 96, verticalAlign: 'top' }]}
            multiline={ true }
        />

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        {/* Envelopper dans une View pour eviter une largeur de 100% */}

          <Button
              title='Add'
              color='green'

              onPress={ handleAdd }
          />
        </View>

        <Text>{ JSON.stringify(todos) }</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 16,
    padding: 16,
    justifyContent: 'start',
  },
  input: {
    borderWidth: 1,
    borderColor: 'lightgray',
    padding: 8,
  },
  text: {
    fontSize: 18,
  },
});

On favorise le regroupe de states reliés dans un objet!

newTodo

jsx

copier

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, Switch, Button, View } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { useState } from 'react';

export default function App() {
  const [newTodo, setNewTodo] = useState({ name: '', completed: false })
  const [todos, setTodos] = useState([])

  function handleAdd() {
    setTodos([
      ...todos,
      newTodo
    ])

    setNewTodo({ name: '', completed: false })
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Text style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center' }}>Todoer</Text>

        <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>

          <TextInput
              placeholder='New task'
              style={[styles.input, { height: 48, flexGrow: 1 }]}
              value={ newTodo.name }
              onChangeText={ (text) => setNewTodo({ ...newTodo, name: text}) }
          />

          <Switch
            value={ newTodo.completed }
            onValueChange={ (value) => setNewTodo({ ...newTodo, completed: value}) }
          />

        </View>

        <Text>{ JSON.stringify(newTodo) }</Text>

        <TextInput
            placeholder='Optional description'
            style={[styles.input, { width: '100%', height: 96, verticalAlign: 'top' }]}
            multiline={ true }
        />

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        {/* Envelopper dans une View pour eviter une largeur de 100% */}

          <Button
              title='Add'
              color='green'

              onPress={ handleAdd }
          />
        </View>

        <Text>{ JSON.stringify(todos) }</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 16,
    padding: 16,
    justifyContent: 'start',
  },
  input: {
    borderWidth: 1,
    borderColor: 'lightgray',
    padding: 8,
  },
  text: {
    fontSize: 18,
  },
});

Components

Mécanisme d'encapsulation et de réutilisation

Fonction
Props
Modules, import/export

jsx

Input.js

copier

import { StyleSheet, TextInput } from 'react-native';

export default function Input({style, ...otherProps}) {
    return (
        <TextInput
            style={[styles.input, style]}
            {...otherProps}
        />
    )
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: 'lightgray',
    padding: 8,
  },
});

jsx

App.js

copier

import Input from './Input';

//...
// TextInput -> Input
// Menage des StyleSheet inutiles

Debugging

Les méthodes de trace traditionnelles sont tout à fait pertinentes!

console.log
Affichage dans le JSX, brut ou JSON.stringify

L'utilisation du debugger via l'environnement distant de la machine virtuelle est plutôt ardue, on peut exécuter la version Web et utiliser l'inspecteur du navigateur. L'extension navigateur React Dev Tools peut offrir des informations spécifiques à la hiérarchie de components.

Sinon, en mode local, une version dédiée des outils développeurs est accessible en appuyant sur j dans le terminal du serveur de développement.

Todoer

bash

copier

# Ajouter quelques utilitaires multi-plateformes
npx expo install toastify-react-native @expo/vector-icons react-native-simple-dialogs

Départ

jsx

App.js

copier

"import { useState } from 'react';\nimport { StatusBar } from 'expo-status-bar';\nimport { StyleSheet, View, TouchableHighlight, ScrollView, Switch, Button, Text, TextInput } from 'react-native';\nimport { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';\nimport ToastManager, { Toast } from 'toastify-react-native'\nimport { Dialog } from 'react-native-simple-dialogs';\nimport { Ionicons } from '@expo/vector-icons';\n\n\nfunction TodoItem({ todo, isLast, setToggling }) {\n return (\n \u003cTouchableHighlight onPress={ () =\u003e setToggling(todo) }\u003e\n \u003cView\n style={{\n flexDirection: 'row',\n gap: 8,\n paddingVertical: 16,\n paddingHorizontal: 8,\n backgroundColor: 'white', /* requis pour highlight */\n borderBottomWidth: isLast ? 0 : 1,\n borderBottomColor: 'lightgray'\n }}\n \u003e\n \u003cIonicons name=\"checkmark-circle\" size={22} color={ todo.done ? 'green' : 'lightgray' } /\u003e\n\n \u003cView style={{ flex: 1, flexDirection: 'column' }}\u003e\n \u003cText style={[styles.text, { fontWeight: 'bold' }]}\u003e{ todo.name }\u003c/Text\u003e\n {\n !!todo.description \u0026\u0026\n \u003cText style={ styles.text }\u003e{ todo.description }\u003c/Text\u003e\n }\n \u003c/View\u003e\n \u003c/View\u003e\n \u003c/TouchableHighlight\u003e\n )\n}\n\nexport default function App() {\n\n const EMPTY_TODO = () =\u003e { return {\n name: null,\n done: false,\n description: null\n }}\n\n const SEED_COUNT = 4;\n const SEED = [...Array(SEED_COUNT).keys()].map((item, index, array) =\u003e {\n const name = \u0060Todo \u0024{item}\u0060\n\n return {\n id: Math.random().toString(16).substring(2),\n name: name,\n description: \u0060Description \u0024{name} \u0060.repeat(index),\n done: (index % 3)\n }\n })\n\n const [todos, setTodos] = useState(SEED);\n const [newTodo, setNewTodo] = useState(EMPTY_TODO());\n const [toggling, setToggling] = useState(null)\n\n function handleAdd() {\n if ((newTodo.name?.trim() ?? '') == '') {\n Toast.error('Provide a Todo name', 'bottom')\n } else {\n newTodo.id = Math.random().toString(16).substring(2);\n newTodo.name = newTodo.name.trim()\n\n setTodos([newTodo, ...todos]);\n\n setNewTodo(EMPTY_TODO());\n }\n }\n\n function toggle(id) {\n setTodos(\n todos.map( t =\u003e {\n if (t.id == id) {\n return {\n ...t,\n done : !t.done\n }\n }\n\n return t;\n })\n )\n }\n\n function list() {\n if (todos.length == 0) {\n return (\n \u003cView style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}\u003e\n \u003cText style={{ fontSize: 48, color: 'gray' }}\u003eNo todos...\u003c/Text\u003e\n \u003c/View\u003e\n )\n } else {\n /* Pas la facon ideale pour afficher une liste, simplification pour la demonstration */\n return (\n \u003cScrollView style={{ flexGrow: 1 }}\u003e\n {\n todos.map((todo, index, array) =\u003e {\n return (\n \u003cTodoItem\n key={todo.id}\n todo={ todo }\n isLast={ index + 1 == array.length }\n setToggling={ setToggling }\n /\u003e\n )\n })\n }\n \u003c/ScrollView\u003e\n )\n }\n }\n\n return (\n \u003c\u003e\n \u003cStatusBar style=\"auto\" /\u003e\n \u003cToastManager /\u003e\n\n \u003cSafeAreaProvider\u003e\n \u003cSafeAreaView style={styles.container}\u003e\n\n \u003cText style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center' }}\u003eTodoer Starter\u003c/Text\u003e\n\n \u003cView style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}\u003e\n\n \u003cTextInput\n style={[styles.input, { height: 48, flexGrow: 1 }]}\n placeholder='New task'\n value={ newTodo.name }\n onChangeText={ (text) =\u003e setNewTodo({...newTodo, name: text}) }\n /\u003e\n\n \u003cSwitch\n value={ newTodo.done }\n onValueChange={ checked =\u003e setNewTodo({...newTodo, done: checked}) }\n /\u003e\n\n \u003c/View\u003e\n\n \u003cTextInput\n style={[styles.input, { width: '100%', height: 96, verticalAlign: 'top' }]}\n placeholder='Optional description'\n multiline={ true }\n /\u003e\n\n \u003cView style={{ flexDirection: 'row', justifyContent: 'center' }}\u003e\n {/* Envelopper dans une View pour eviter une largeur de 100% */}\n\n \u003cButton\n title='Add'\n color='green'\n onPress={ handleAdd }\n /\u003e\n\n \u003c/View\u003e\n\n { list() }\n\n \u003cDialog\n title={ toggling?.name }\n visible={ !!toggling }\n onTouchOutside={ () =\u003e setToggling(null) }\n animationType=\"fade\"\n \u003e\n \u003cView style={{ flexDirection: 'row', justifyContent: 'space-between', gap: 32 }}\u003e\n \u003cButton title=\"Cancel\" color=\"gray\" onPress={ () =\u003e setToggling(null) } /\u003e\n \u003cButton title={ toggling?.done ? 'Incomplete' : 'Completed' } onPress={ () =\u003e { setToggling(false); toggle(toggling?.id); } } /\u003e\n \u003c/View\u003e\n \u003c/Dialog\u003e\n\n \u003c/SafeAreaView\u003e\n \u003c/SafeAreaProvider\u003e\n \u003c/\u003e\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n gap: 16,\n justifyContent: 'center',\n padding: 16,\n },\n input: {\n borderWidth: 1,\n borderColor: 'lightgray',\n padding: 8,\n },\n text: {\n fontSize: 18,\n },\n});"

import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View, TouchableHighlight, ScrollView, Switch, Button, Text, TextInput } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import ToastManager, { Toast } from 'toastify-react-native'
import { Dialog } from 'react-native-simple-dialogs';
import { Ionicons } from '@expo/vector-icons';


function TodoItem({ todo, isLast, setToggling }) {
  return (
    <TouchableHighlight onPress={ () => setToggling(todo) }>
        <View
          style={{
            flexDirection: 'row',
            gap: 8,
            paddingVertical: 16,
            paddingHorizontal: 8,
            backgroundColor: 'white', /* requis pour highlight */
            borderBottomWidth: isLast ? 0 : 1,
            borderBottomColor: 'lightgray'
          }}
        >
            <Ionicons name="checkmark-circle" size={22} color={  todo.done ? 'green' : 'lightgray' } />

            <View style={{ flex: 1, flexDirection: 'column' }}>
                <Text style={[styles.text, { fontWeight: 'bold' }]}>{ todo.name }</Text>
                {
                  !!todo.description &&
                    <Text style={ styles.text }>{ todo.description }</Text>
                }
            </View>
        </View>
    </TouchableHighlight>
  )
}

export default function App() {

  const EMPTY_TODO = () => { return {
    name: null,
    done: false,
    description: null
  }}

  const SEED_COUNT = 4;
  const SEED = [...Array(SEED_COUNT).keys()].map((item, index, array) => {
    const name = `Todo ${item}`

    return {
      id: Math.random().toString(16).substring(2),
      name: name,
      description: `Description ${name} `.repeat(index),
      done: (index % 3)
    }
  })

  const [todos, setTodos] = useState(SEED);
  const [newTodo, setNewTodo] = useState(EMPTY_TODO());
  const [toggling, setToggling] = useState(null)

  function handleAdd() {
    if ((newTodo.name?.trim() ?? '') == '') {
        Toast.error('Provide a Todo name', 'bottom')
    } else {
        newTodo.id = Math.random().toString(16).substring(2);
        newTodo.name = newTodo.name.trim()

        setTodos([newTodo, ...todos]);

        setNewTodo(EMPTY_TODO());
    }
  }

  function toggle(id) {
    setTodos(
        todos.map( t => {
            if (t.id == id) {
                return {
                    ...t,
                    done : !t.done
                }
            }

            return t;
        })
    )
  }

  function list() {
    if (todos.length == 0) {
        return (
            <View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 48, color: 'gray' }}>No todos...</Text>
            </View>
        )
    } else {
      /* Pas la facon ideale pour afficher une liste, simplification pour la demonstration */
      return (
          <ScrollView style={{ flexGrow: 1 }}>
          {
            todos.map((todo, index, array) => {
              return (
                <TodoItem
                  key={todo.id}
                  todo={ todo }
                  isLast={ index + 1 == array.length }
                  setToggling={ setToggling }
                />
                )
            })
          }
          </ScrollView>
      )
    }
  }

  return (
    <>
        <StatusBar style="auto" />
        <ToastManager />

        <SafeAreaProvider>
            <SafeAreaView style={styles.container}>

              <Text style={{ fontSize: 28, fontWeight: 'bold', textAlign: 'center' }}>Todoer Starter</Text>

              <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>

                <TextInput
                  style={[styles.input, { height: 48, flexGrow: 1 }]}
                  placeholder='New task'
                  value={ newTodo.name }
                  onChangeText={ (text) => setNewTodo({...newTodo, name: text}) }
                />

                <Switch
                  value={ newTodo.done }
                  onValueChange={ checked => setNewTodo({...newTodo, done: checked}) }
                />

              </View>

              <TextInput
                style={[styles.input, { width: '100%', height: 96, verticalAlign: 'top' }]}
                placeholder='Optional description'
                multiline={ true }
              />

              <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
              {/* Envelopper dans une View pour eviter une largeur de 100% */}

                  <Button
                    title='Add'
                    color='green'
                    onPress={ handleAdd }
                  />

              </View>

              { list() }

              <Dialog
                title={ toggling?.name }
                visible={ !!toggling }
                onTouchOutside={ () => setToggling(null) }
                animationType="fade"
              >
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', gap: 32 }}>
                  <Button title="Cancel" color="gray" onPress={ () => setToggling(null) } />
                  <Button title={ toggling?.done ? 'Incomplete' : 'Completed' } onPress={ () => { setToggling(false); toggle(toggling?.id); } } />
                </View>
              </Dialog>

            </SafeAreaView>
        </SafeAreaProvider>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 16,
    justifyContent: 'center',
    padding: 16,
  },
  input: {
    borderWidth: 1,
    borderColor: 'lightgray',
    padding: 8,
  },
  text: {
    fontSize: 18,
  },
});

Go

Gérer le champs description d'un item
Implémenter la suppression d'un item, en ajoutant un bouton au Dialog
Expérimenter!

James Hoffman

Développement d'applications mobiles

Développement d'applications mobiles

2 - Introduction à React Native

Ressources

Initialisation du projet

Structure du projet

JSX

State

Components

Debugging

Todoer

Départ

Go