Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/camara94/revision-react


https://github.com/camara94/revision-react

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

          
# 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/