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> ) }