060 - Material UI Powaaa

Je ne sais pas pour toi, mais mon application ressemble à ça pour le moment.

Autant dire que c'est rudimentaire !! Tu peux partir sur du CSS/SCSS pour rendre ton application plus propre, à ton goût ou celui de ton client, etc. Mais j'attire l'attention sur le fait que la création d'une interface est un travail à part entière, chronophage et qui demande des affinités sur le graphisme. Le plus judicieux est sans doute de partir de ce que le net t’offre sur un plateau. C'est ici que rentre en jeu Material UI ou ReactStrap.

Material UI est une implémentation pour React de la spécification de Google Material Design. Le Material Design a été popularisé par Google sur son environnement Android et a été largement accepté par l'ensemble des utilisateurs. C'est un bon candidat pour tout projet React. De plus il est mobile first et va très bien convenir pour le développement d'application mobile entre autres avec React Native.

Que tu aimes ou non le Material Design, il reste facilement justifiable auprès d'un client : "si Google l'utilise c'est sans doute que la solution est bonne et éprouvée". D'autres framework existe tel que Bootstrap et qui fonctionne très bien aussi : reactstrap pour React.

Attention au développement de zéro : Certaines personnes ont tendance à toujours vouloir réaliser les choses par eux-mêmes. Pourquoi pas, mais il est difficile de concurrencer Material Design ou BootStrap avec ses propres compétences. La spécification de Material Design a été créée par Google avec les moyens qu'on lui connaît, elle a été testée et éprouvée par des millions (millard ?) d'utilisateurs. Et que son implémentation pour React (Material UI) connaît plus de 700 contributeurs et plus de 7000 commits. Tout ceci montre que la création d'une interface est un projet à part. Ceci étant dit, rien ne t'empêche de modifier M-UI ou BS pour coller au mieux à ce que tu souhaites réaliser. Généralement, un système de theming accompagne les frameworks.

Objectifs

• On va rendre l'application présentable. Et voir qu'en quelques instants tu vas obtenir un grand nombre de composants graphiques prêts à l'emploi et très puissants.

Installation de Material UI

Material UI vient sous la forme d'un module node classique, tu vas travailler sur la version beta qui devrait être stable d'ici la fin de la formation et qui apporte beaucoup de nouveautés :

npm install @material-ui/core @material-ui/icons --save

Ajoute dans ton index.html, dans la balise <head>, les 2 liens suivants afin d'être sur d'avoir les bonnes font nécessaire à MUI :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Une fois installé,il faut encapsuler l'application avec un composant Material Parent : MuiThemeProvider. Pour cela dans App.js tu peux rendre le contenu :

<MuiThemeProvider>
  <SignUp  />
</MuiThemeProvider>

errata If you wish to customize the theme, you need to use the MuiThemeProvider component in order to inject a theme into your application. However, this is optional; Material-UI components come with a default theme.

Mise en forme de notre application

Afin de se repérer dans l'application, voici une image représentant le zoning souhaité :

En vert, tu remarqueras ton composant SignUp.

Une rapide explication sur le pourquoi des choix de composants. Je propose l'utilisation de Grid qui est un outil puissant pour considérer une approche responsive (s'adaptant bien aux différentes tailles d'écran). Mais aussi pour positionner les composants internes.

Par exemple, le Grid Item bleu pourra facilement être mis à mi-hauteur de la page grâce au Grid container et son paramètre alignItems='center' . Le composant Paper permet d'avoir un effet visuel faisant ressortir le formulaire. La seconde Grid va permettre de préparer la suite.

Voici l'écriture en material ui :

<MuiThemeProvider  >
    <Grid  container
    alignItems='center'
    style={{ height:  '100%' }}>
        <Grid  item  xs={12}>
            <Paper
            elevation={4}
            style={{ margin:  32 }}
            >
                <Grid  container
                alignItems='center'
                justify='center'>
                    <Grid  item  xs={12} 
                    alignContent='center'
                    >
                        <SignUp  />
                    </Grid>
                </Grid>
            </Paper>
        </Grid>
    </Grid>
</MuiThemeProvider>

et tu vas avoir besoin de modifier un minimum le fichier index.css:

html,body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    height: 100%;
    width: 100%;
}
#root {
    min-height: 100%;
}
@media  screen  and (min-width: 640px) {
    #root {
        height: 100%;
    }
}

Le petit plus Wild

• modifier la couleur du fond Tu peux modifier la couleur de fond du div#root avec le code #fcb571.
• rajouter une image d'Homer Pour rajouter une image d'Homer à côté de ton formulaire, tu dois placer le code suivant au bon endroit :

<Grid item xs={12} sm={6} style={{ 'text-align': 'center' }}>
  <img src="http://images.innoveduc.fr/react_odyssey_homer/wildhomer.png">
</Grid>

!! attention !! de bien mettre à jour l'autre Grid item avec sm={6} afin de superposer les items sur de petits écrans (au lieu de les avoir côte à côte)

Et le formulaire dans tout ça

Dans SignUp , u peux remplacer les input par des TextField et l'input[type="submit"] peut êre remplacé par un Button.

Et le flash message peut être placé dans un Snackbar.

Je te laisse regarde la documentation :).

Tu devrais retrouver quelque choses du type :

Challenge

Show me your property

• Obtenir une page d'enregistrement propre
• Avoir une application responsive

Critères de validation

• Observer que l'ensemble soit fonctionnel
• Observer que l'application soit responsive dans problème d'affichage
• Observer l'apparition d'un Snackbar lorsque l'on s'enregistre ou lorsqu'une erreur survient