React-Native by Reactor, my Setup

J'ai un nom de boite à la mode en ce moment. 🙂

J'ai dans mon précédent article abordé mon apprentissage avec React / React Native. Je vais tenter ici de créer from scratch une appli qui s'appelle BreizhTour.

Setup VSCode VSTS

J'utilise Visual Studio Code (VS Code) avec une petite liste d'extension :

J'aime bien Atom One Dark Theme qui ajoute des configurations de couleurs dans le code. Celle par defaut n'est pas assez démarquante sur certaine syntaxe.

J'ai installé l'extension : Visual Studio Team Services qui va me permettre de synchroniser un Git sur Azure.

Il faut configurer VS Code (https://code.visualstudio.com/docs/editor/versioncontrol)

J'ai créé en ligne sur VSTS un repo "BreizhTour" que j'ai cloné en local et ouvert avec VS Code. Vous allez avoir besoin d'un token, cette vidéo va vous aider.

Pour valider le tout j'ai crée un fichier Readme.md avec un peu de texte que je commit et push. Je check online que le fichier est bien la. C'est bon on peut commencer.

Setup React-Native

Si cela n'est pas déjà fait, une petite install de react-native : https://facebook.github.io/react-native/docs/getting-started.html

Une petite commande cli dans mon dossier "Projets" :

> react-native init BreizhTour

Cela va créer mon projet de base :

Setup ESLint

ESLint est un outil qui permet d'améliorer la qualité de notre code javascript. Comme ce language est très permissif, on dérape facilement sur du code dégeux. Eslint permet de structurer le code d'une façon uniforme pour le projet. Tous les développeurs devront alors suivre les règles. Le code en est plus lisible. Et même dans mon cas ou je suis le seul développeur, EsLint m'aide beaucoup à coder propre.

EsLint peut aussi aider à trouver certaines erreur de code, genre des erreurs bêtes de camelCase, des trucs d'humain quoi.

Dans le cours que je suivais, j'utilisais une config en ligne "rallycoding".

npm install eslint-config-rallycoding --save-dev

Ensuite je crée un fichier ".eslinrc" à la racine du projet avec ce contenu :

{
    "extends": "rallycoding",
    "rules" : {
        "arrow-body-style": 0,
        "max-len": 0,
        "import/no-named-as-default-member": 0,
    }
}

Refactoring de base

Le code source de base fournit par React-Native ne me convient pas en l'état, je vais l'améliorer en modifiant quelque peu :

Déjà on va modifier les deux fichiers à la racine que sont index.android.js et index.ios.js avec ce code :

import {
  AppRegistry
} from 'react-native';
import App from './src/App';

AppRegistry.registerComponent('BreizhTour', () => App);

App.js :

import React, { Component } from 'react';
import Router from './Router';

class App extends Component {


  render() {
  
    return (
        <Router />      
    );
  }
}

export default App;

Router.js

import React from 'react';
import { Scene, Router, Actions } from 'react-native-router-flux';
import Main from './components/Main';
const RouterComponent = () => {
  return (
    <Router sceneStyle={{ paddingTop: 65 }}>
      
        <Scene key="main" component={Main} title="Breizh Tour" />
      
    </Router>
  );
};

export default RouterComponent;

Comme vous le voyez le router.js utilise une dépendance qu'il faut installer :

> npm install --save react-native-router-flux

Le router affiche une scène de base que l'on a appelé main. Il faut créer ce premier composant. Pour cela on va créer un répertoire "components" et ajouter notre première "page".

Et on y ajoute un composant Main.js

import React, { Component } from 'react';
import { View } from 'react-native';

class Main extends Component {

  render() {
    return (
      <View />
    );
  }
}

export default Main;

Run

On lance un build et un run dans l’émulateur ou sur le device :

react-native run-android

Et voila ! Normalement on a notre premier écran qui s'affiche.

Conclusion

Ici je vous montre comment je démarre un projet react-native. C'est juste ma façon de faire, yen a plein d'autre et vu mon expérience pour le moment je prétends pas donner la solution universelle.

Mais déjà on a :

• un IDE prêt à coder, avec les outils qui vont bien
• du code versionné avec Git sous VSTS
• une base projet react-native avec un routeur (navigation)

J'oublie pas de faire mon petit commit push. Et en avant Guingamp !