« React » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 12 : Ligne 12 :
     npm install -g create-react-native-app
     npm install -g create-react-native-app


Ensuite, dans la versions actuelle, pour créer un nouveau projet appelé AwesomeProject, il suffit d'entrer ces lignes :  
Ensuite, dans la version actuelle, pour créer un nouveau projet appelé AwesomeProject, il suffit d'entrer ces lignes :  


     create-react-native-app AwesomeProject
     create-react-native-app AwesomeProject

Version du 30 janvier 2018 à 18:39

Introduction

React qui peut être appelé aussi React.js ou ReactJS est une librairie JavaScript.

Cela permet de développer des application web qui peuvent être rechargée 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 librairie a été mis en place par un ingénieur de Facebook en 2011, utilisé pour développer Instragam en 2012 et rendu libre de droits en 2013.

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.


Utilisations

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


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)