« React » : différence entre les versions
(→Avantage / Désavantage : relecture + correction) |
m (Ajout intro) |
||
Ligne 1 : | Ligne 1 : | ||
== Introduction == | == Introduction == | ||
React | React (aussi appelé React.js ou ReactJS) est une bibliothèque (library) [[JavaScript]], permettant de développer des applications web qui peuvent être rechargées sans recompiler. React met en oeuvre uniquement les User Interfaces, ce qui correspond dans le pattern [[Modèle-Vue-Contrôleur (MVC)]] à la partie "Vue". | ||
Cette bibliothèque JavaScript propose une nouvelle façon de générer les pages web, en les rendant plus naturelles. Les interactions utilisateur sont également plus fluides. React a été conçue pour la simplicité, rapidité et flexibilité (scalibility). | |||
Cette bibliothèque | Cette bibliothèque a été créée par Jordan Walke, un ingénieur de Facebook, en 2011 pour une utilisation interne, puis a été utilisée pour développer Instagram en 2012 et rendue libre de droits en 2013. C'est une des bibliothèques les plus populaires, utilisée entre autres par Netflix, Facebook, Airbnb, Yahoo, Instagram ou WhatsApp. Ses principales "concurrentes" sont Vue et Angular. | ||
L'utilisation de bibliothèque externe pour la gestion des données est obligatoire. React crée uniquement la structure. Redux est une bibliothèque destinée à être le conteneur d'état de l'application. | |||
Ses principales caractéristiques sont : | |||
* une approche '''déclarative''' : le développeur crée uniquement les vues pour chaque état de l'application et React se charge du rendering et de la mise à jour des bons composants | |||
* une approche ''' component-based''' : les composants sont de petites unités qui intègrent les comportements de l'application et sont appelés au besoin. | |||
* agnostique à la technology stack : Une tech stack représente les éléments sous-jacents à une application, comme le langage ou les frameworks. React fonctionne bien avec tout type de tech stack. | |||
== Installation == | == Installation == | ||
Ligne 27 : | Ligne 28 : | ||
Il existe également des simulateurs pour lancer ces deux plateformes sur son ordinateur. | Il existe également des simulateurs pour lancer ces deux plateformes sur son ordinateur. | ||
== == | |||
Flux | |||
Redux | |||
== Avantage / Désavantage == | == Avantage / Désavantage == |
Version du 23 août 2020 à 11:13
Introduction
React (aussi appelé React.js ou ReactJS) est une bibliothèque (library) JavaScript, permettant de développer des applications web qui peuvent être rechargées sans recompiler. React met en oeuvre uniquement les User Interfaces, ce qui correspond dans le pattern Modèle-Vue-Contrôleur (MVC) à la partie "Vue".
Cette bibliothèque JavaScript propose une nouvelle façon de générer les pages web, en les rendant plus naturelles. Les interactions utilisateur sont également plus fluides. React a été conçue pour la simplicité, rapidité et flexibilité (scalibility).
Cette bibliothèque a été créée par Jordan Walke, un ingénieur de Facebook, en 2011 pour une utilisation interne, puis a été utilisée pour développer Instagram en 2012 et rendue libre de droits en 2013. C'est une des bibliothèques les plus populaires, utilisée entre autres par Netflix, Facebook, Airbnb, Yahoo, Instagram ou WhatsApp. Ses principales "concurrentes" sont Vue et Angular.
L'utilisation de bibliothèque externe pour la gestion des données est obligatoire. React crée uniquement la structure. Redux est une bibliothèque destinée à être le conteneur d'état de l'application.
Ses principales caractéristiques sont :
- une approche déclarative : le développeur crée uniquement les vues pour chaque état de l'application et React se charge du rendering et de la mise à jour des bons composants
- une approche component-based : les composants sont de petites unités qui intègrent les comportements de l'application et sont appelés au besoin.
- agnostique à la technology stack : Une tech stack représente les éléments sous-jacents à une application, comme le langage ou les frameworks. React fonctionne bien avec tout type de tech stack.
Installation
Pour installer React, il est nécessaire d'avoir, en préambule, Node.js et entrer cette ligne dans la ligne de commande :
npm install -g create-react-native-app
Ensuite, dans la version actuelle, pour créer un nouveau projet appelé AwesomeProject, il suffit d'entrer ces lignes :
create-react-native-app AwesomeProject cd AwesomeProject npm start
Pour utiliser son application sur son terminal mobile, il est conseillé d'installer Expo sur son téléphone portable (iOS ou Android)
Il existe également des simulateurs pour lancer ces deux plateformes sur son ordinateur.
Flux Redux
Avantage / Désavantage
Avantage
- La DOM est plus rapide que le modèle de rafraîchissement conventionnel
- Il est possible de réutiliser les composants, ce qui implique un gain de temps
- Le référencement est amélioré du fait de la génération complète de vos pages, du serveur au navigateur
- La vitesse de débogage est améliorée et facilite le travail du développeur
- Il est facilement lisible et a une structure simple à apprendre comparer à d'autre framework
- L'utilisation des avancées dans le langage Java et son écosystème
React Native
React Native
Les développeurs de Facebook ont annoncé en 2015 le lancement de React Native qui permet de développer des applications natives sur iOS, Android et UWP.
La différence entre React et React Native est que le second ne manipule pas directement le DOM mais plutôt des éléments natifs et interprète directement JavaScript sur le terminal en question.
Hello World
Voici, selon le site officiel de React Native, comment générer Hello World affiché sur son écran de portable :
import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; export default class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); } } // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);
Différence entre React et React-Native
React est un framework qui permet de construire des applications web utilisant du JavaScript.
React Native est une plate-forme de développement permettant de créer des applications mobiles multiplateformes natives.
Bibliographie
1 https://facebook.github.io/react-native/ [Facebook React Native] (01/2018)
2 https://en.wikipedia.org/wiki/React_(JavaScript_library) [Wikipedia] (01/2018)
3 https://fr.wikipedia.org/wiki/React_(JavaScript) [Wikipedia] (01/2019)
4 https://www.ambient-it.net/quelle-sont-les-differences-entre-react-native-et-reactjs/ [Ambient] (01/2019)