React Native Découverte

Contenu

Setup (création de l’appli) :

npm install -g create-react-native-app
create-react-native-app MyReactNative

install NodeJS Python Jdk8
npm install -g react-native-cli
npm start

Bootstrap bare react Native CLI App :

$ npm install -g react-native-cli
$ react-native init helloWorldReactNative  
$ cd helloWorldReactNative

Run (much easier than Ionic !!!)

Run instructions for iOS:
     • cd /Users/poste5hookipa/sites/reactnative/helloWorld && npx react-native run-ios
     - or -
     • Open helloWorld/ios/helloWorld.xcworkspace in Xcode or run "xed -b ios"
     • Hit the Run button

Run instructions for Android:

• Have an Android emulator running (quickest way to get started), or a device connected.
• cd /Users/poste5hookipa/sites/reactnative/helloWorld && npx react-native run-android

Architecture de l’application React Native :

Les fichier index.js et App.js quelle différence?

index.js est le fichier d’entrée de node.js, App.js est le fichier qui définit le composant global de l’application React Native <App/> qui contient tous les autres composants, c’est le composant root.

Le CLI originel, toujours en activité et c’est le CLI recommandé car de base.

Liens utiles : Navigation dans React Native avec React Navigation

REACT NATIVE VECTOR ICONS

Installation avec yarn

$ yarn add react-native-vector-icons

ou avec npm

$ npm i --save react-native-vector-icons

link << cette commande ne semble pas marcher…

link sert dans le cas de React Native à lier les dépendences natives, par exemple certaines librairies sont seulement en Javascript, pas besoin de faire un link, mais certaines librairies font appel à des fonctionnalités natives, donc il faut faire un link. Dans les anciennes versions de React Native, il fallait le faire manuellement, mais les récentes versions de React Native n’ont pas besoin de faire cette commande. ( 0.60+)

$ react-native link react-native-vector-icons
donc il est conseillé de le faire manuellement : copier le dossier Font depuis node_modules/react-native-vector-icons

Ouvrir Xcode et aller dans Info.plist (rien que le fait d’ouvrir Xcode normalement devrait faire marcher l’inclusion des icônes)
Néanmoins éditez le fichier info.plist et ajouter une propriété « Fonts provided by application »
Ajouter ensuite :
import Icon from "react-native-vector-icons/Ionicons"; //dans votre fichier

Il faut recompiler le projet pour que ça marche

Si message d’erreur :error Could not find the following native modules: RNVectorIcons. Did you forget to run "pod install"
faire $ pod install

Source : aboutreact.com/react-native-vector-icons/

Autre source officielle: https://github.com/oblador/react-native-vector-icons

React Native Element use the V1.2 because different from 0.19.1 !

Faire attention à la version de la librairie que vous utilisez, vous risquez de tomber dans des anciennes version de tutoriels qui ne marcheront pas pour vous. Exemple FormLabel, FormInput sont enlevés de la version 1.2

Syntaxe plus concise :

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Bonjour</td>
        <td>Monde</td>
      </>
    );
  }
}

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

  • react-native-vector-icons (to unlink run: « react-native unlink react-native-vector-icons »)
    This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via « react-native unlink  » and it will be included in your app automatically. If a library isn’t compatible with autolinking, disregard this message and notify the library maintainers.
    Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

Que fait la commande link?

https://reactnative.dev/docs/linking-libraries-ios << conseillé de le lire

Que fait la commande Pod Install?

(https://medium.com/@scottlydon18/podspecs-podfile-pod-install-what-happens-518af7e6471d)

Problèmes de builds pour IOS

BUILD FOR IOS problems: (https://stackoverflow.com/questions/35449248/failure-to-call-appregistry-registercomponent)
======================

A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.

FUNCTIONAL COMPONENT VS CLASS COMPONENT

ReactJS notes:https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React Hooks, une autre façon de faire par rapport aux classes

Au début, React se travaillait essentiellement avec des classes avec le mot clé class, ce n’est pas une varie classe au sens OOP, mais plutôt un sucre syntaxique. Depuis la version 16.8, les Hooks sont là et permettent de travailler d’une façon plus fonctionnelle (au sens programmation fonctionnelle)

https://medium.com/better-programming/react-hooks-vs-classes-add2676a32f2

Exemple avec class

import React from 'react'

class Counter extends React.Component {
  constructor() {
    super()
    this.state = {
      counter: 0
    }
    this.handleIncrement = this.handleIncrement.bind(this)
  }
  
  handleIncrement() {
    this.setState({
      counter: this.state.counter += 1
    })
  }
  
  render() {
    return (
      <div>
        <div>{this.state.counter}</div>
        <hr />
        <button type="button" onClick={this.handleIncrement}>+</button>
     </div>
    ) 
  }
}

Exemple fonctionnel

import React, {useState} from 'react'

function Counter() {
  const [counter, incrementCounter] = useState(0)
  
  function handleIncrement() {
    incrementCounter(counter + 1)
  }

  return (
    <div>
      <div>{counter}</div>
      <hr />
      <button type="button" onClick={handleIncrement}>+</button>
    </div>
  ) 
}

Retour en haut