La révision en React JS

Dans ce j'ai repris ma formation de la spécialisation de développement Full Stack de coursera de Hong Kong University of science and technology

Tout d'abord un développeur Full Stack doit comprendre et assimiler les differente couches:

• la couche présentation(HTML, CSS, JavaScript, Angular, ReactJS, JQuery, ...) pour tout ce conserne la génération du contenu au près du client(browser ou navigateur);
• la couche logique ou métier(NodeJS, Java, PHP, Python,C#, ...) conserne la logique métier ou le traitement des données entre le client et la couche d'accès aux données.
• la couche d'accèss aux données(MYSQL, MongoDB, Cassandara, ...) conserve la persistance des données c'est leurs sauvegardes et leurs protections

I-Développement Full Stack

1. -https://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/
2. - https://edward-designer.com/web/full-stack-web-developer/
3. - https://www.andyshora.com/full-stack-developers.html
4. - https://en.wikipedia.org/wiki/Multitier_architecture
5. - http://www.tonymarston.net/php-mysql/3-tier-architecture.html

II-Mise en place de l'environnement de travail

• Git et Github

1. -https://git-scm.com/
2. - https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
3. -https://git-scm.com/docs
4. - http://ndpsoftware.com/git-cheatsheet.html
5. - https://www.atlassian.com/git/tutorials

• Node et NPM

1. -https://nodejs.org/en/
2. -https://www.npmjs.com/
3. -https://nodejs.org/api/
4. -https://docs.npmjs.com/
5. -https://github.com/johnpapa/lite-server

III-Pourquoi une libraire ou Framework JavaScript

1. d'abord pour les manipulations complexe du DOM et la mise à jour des données dans une page HTML
2. Ils nous permetent d'implementer les applications web qui respectent l'architecture MVC OU MVVM
3. Ils nous facilitent la liaisions des données (data binding)
4. Leurs respects de certaines patternes
5. leurs comportements de réutilisabilité
6. leurs modularités

IV-Difference entre Framework et Bibliothèque en JavaScript

• premièrement une bibliothèque JS est une collection de fonctionnalité ou fonctions qui facilite le développement d'une application mais n'impose pas une structure propre à l'application donc elle se bas sur l'approche imperative c'est à dire que le développeur impose sa propre structure(comment l'app doit être executer et structruré par exemple). Exemple: jQuery, Meteor, Polymer, knockout, Vue, Mercury...
• alors que le Framework impose une structure bien determinée et le développeur l'adapte son bésoin en ajoutant son code et les Framework ils utilisent l'approche dite declarative avec eventuellement l'inversion de control Exemple: Angular, React, Ember, Backbone, Aurelia, ...

V-Demarrer avec React JS

Pour installer React JS Dans ce cours, on utilise deux gestionnaires de packages à savoir NPM(Node Package Manager) et yarn qui est aussi un autre Gestionnaire 

• pour installer React globalement dans son, on utilise:

1. yarn global add create-react-app@latest ou son équivalent NPM
2. npm install -g create-react-app@latest

• pour avoir une idée comment l'utiliser on tappe la commande suivante:

1. create-react-app --help

VI-Création d'un projet React

Pour créer un projet react JS

• create-react-app nomDuProject dans cas create-react-app confusion
• pour demarrer je vais dans le dossier cd confusion et puis yarn start ou npm start

VII JSX (JavaScript Extension)

• Syntaxe d'extension JavaScript

• une courte notation des functions JavaScript qui sera appelée et evaluée en objet JavaScript.

• une separation artificielle de la logique de génération à partir d'autre logique UI (User Interface).

  Ex:

Syntaxe JSX:

  		const element = (
  			<h1> className="greeting">Hello, World</h1>
  		)

   

Syntaxe React:

  		const element = ReactDom.render(
  			'h1',
  			{className:'greeting'},
  		    'Hello, World'
  		)

   

Syntaxe d'objet JavaScript:

  		const element = {
  			type: 'h1',
  			props: {
  				className: 'greeting',
  			    children: 'Hello, World'
  			}
  		}

   

NB: les JSX comme, vous pouvez la remarqué on constate qu'il ya peu de ligne de code.

Configuration de notre app pour l'adaption à notre bésoin

Ici nous allons utiliser bootstrap(Reactstrap)

• pour installer la dernière version de Bootstrap :

1. yarn add bootstrap@latest ou
2. npm install -g bootstrap@latest --save

• ensuit on install reactstrap

1. yarn add reatstrap ou
2. npm install -g reatstrap --save

• ensuit on install react-popper

1. yarn add react-popper ou
2. npm install -g react-popper --save
   NB: ces dependances nous permettent les differentes fonctionnalités de react en bootstrap pour les utilisés, je dois importer bootstrap dans mon fichier src/index.js import 'bootstrap/dist/css/bootstrap.min.css'

• Voici un exemple de code, qui permet d'ajouter une barre de navigation en react

		import { Navbar, NavbarBrand } from 'reactstrap';

		    const nav = (
		      <div className="App">
		        <Navbar dark color="primary">
		          <div className="container">
		            <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
		          </div>
		        </Navbar>
		      </div>
		    );
	

Quelques liens utils

Quelques Ressources en React

• https://reactjs.org/
• https://github.com/facebook/create-react-app
• https://reactstrap.github.io/
• https://reactstrap.github.io/components/navbar/
• https://reactstrap.github.io/components/navbar/
• https://reactjs.org/docs/introducing-jsx.html
• https://babeljs.io/repl

Quelques Définitions

• https://en.wikipedia.org/wiki/Software_framework
• https://en.wikipedia.org/wiki/Inversion_of_control
• https://www.netguru.com/blog/imperative-vs-declarative
• http://latentflip.com/imperative-vs-declarative

Quelques Blog et Articles

• https://hackernoon.com/5-best-javascript-frameworks-in-2017-7a63b3870282#.tt1k09l1d
• https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.pe809bf0u
• https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.pe809bf0u
• http://codenugget.co/2015/03/05/declarative-vs-imperative-programming-web.html
• https://develoger.com/is-reactjs-library-or-a-framework-a14786f681a0
• https://www.quora.com/Is-React-a-library-or-a-framework-and-why
• https://www.upwork.com/hire/react-js-developers/
• https://www.sohamkamani.com/blog/2016/11/16/react-is-a-framework/
• https://hashnode.com/post/why-isnt-react-called-framework-what-does-it-lack-to-be-a-framework-ciwm324og010xzx53wjfq354i

React Components: Objectifs et résultats

Dans cette partie, vous découvrirez les components en React et comment nous construisons un component en React et concevons ses vues. À la fin de cette leçon, vous pourrez:

•     Créer un component en React
  

•     Construisez le code du component en React et la vue de votre 
      component à l'aide de **JSX** et **JavaScript**
  

•     comprendre les **states** et **props**
  

Importance des components en React

• Un composant renvoie un ensemble d'éléments React qui devrait apparaître à l'écran
• Les composants vous permettent de diviser votre interface utilisateur en pièces indépendantes et réutilisables
• Les composants acceptent également les entrées
• Différents types de composants peuvent être définis dans React

Composants React: State & Props

State

• Chaque component peut stocker ses propres informations locales dans son state

1. Privé et entièrement contrôlé par le component
2. Peut être transmis comme props aux enfants

• Seuls les components de classe peuvent avoir un state local

Props

Les attributs JSX sont passés dans un component comme un seul objet

• Disponible dans le component comme props
• Peut passer dans plusieurs attributs
• Impossible de modifier les props dans le component

Gestion des événements

• La gestion des événements est similaire à la façon dont vous gérez événements sur les éléments DOM:

1. Utilisez camelCase pour spécifier les événements
2. Fonction Pass en tant que gestionnaire d'événements

• Exemple: <Card onClick = {() => this.onDishSelect (plat)}>

Partage d'information ou donnée entre components

• Parfois, plusieurs components peuvent partager les mêmes données
• Les modifications des données dans un composant doivent être réfléchi vers un autre component
• Mieux vaut déplacer l’état partagé vers un commun component ancêtre

Components React: méthodes de cycle de vie

React Component Lifecycle

• Le component React passe par les étapes suivantes étapes du cycle de vie:
  1. Mounting
  2. Updating
  3. Unmounting

Plusieurs méthodes de cycle de vie disponibles à chaque étape

• Mounting Lifecycle Methods Appelé lors de la création d'une instance d'un component et inséré dans le DOM:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

Updating(Mise à jour des méthodes de cycle de vie)

Appelé lors du rendu d'un component qui peut être causée par le chnangement du props ou state

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

• Deux méthodes désormais obsolètes: componentWillReceiveProps () et componentWillUpdate ()

Unmounting Lifecycle Methods

Est appelé lorsque le component est supprimé du DOM: componentWillUnmount ()

• Traitement des erreurs: appelé en cas d'erreur pendant le rendu, dans une méthode de cycle de vie ou dans le constructeur de tout component enfant componentDidCatch ()

React Resources

• https://reactjs.org/docs/components-and-props.html
• https://reactjs.org/docs/state-and-lifecycle.html
• https://reactstrap.github.io/components/media/
• https://reactjs.org/docs/react-component.html
• https://reactstrap.github.io/components/card/
• https://getbootstrap.com/docs/4.0/content/typography/#unstyled
• https://github.com/facebook/react-devtools
• https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Assignment 1 Ideatation Resources

• https://en.wikipedia.org/wiki/Ideation_(creative_process)
• https://www.volunteermatch.org/
• https://www.freecodecamp.org/