react.js QUOI? POURQUOI? QUAND? COMMENT?

quoi?

pas un framework
v dans mvc

pourquoi?

JavaScript modulaire
virtual dom
React native
  • Même Design Pattern.
  • Facilite la transition vers le développement d'app mobile.
give it 5 minutes

QUAND?

  • Vous avez besoin de développer une application munie de plusieurs éléments dynamiques.
  • Le DOM aura besoin d'être mis à jour fréquemment.

comment?

#BIEN DÉBUTER!?

installation
  1. npm install -g create-react-app
  2. create-react-app my-app
  3. cd my-app/
  4. npm start

#FLUX DE DONNÉES UNIDIRECTIONNEL

Contrairement à plusieurs autres librairies et Framework JavaScript, React utilise un flux de données unidirectionnel. Cela signifie que l'enfant ne peut pas retourner de donnée au parent.

#LA Base

Render
  1. Render s'occupe de faire le rendu de vos élément vers le DOM virtuel de React.
  2. ReactDOM s'occupe de mettre à jour le DOM HTML.

Une app React est principalement composée d'une page HTML container dans laquelle sera compilé le rendu de votre composant container.

JSX

JSX est une extension de la syntaxe JavaScript qui se rapproche beaucoup de la syntaxe HTML.

  • Rend votre code plus concis et facilement compréhensible.
  • Se rapproche plus du résultat qui sera compilé par la fonction Render.
  • Compiler par Babel.
COMponents

Les composants vous permettent de diviser les éléments d'interfaces de votre application en plusieurs morceaux réutilisables. On doit donc penser à chacun de ces composants en tant qu’entité individuelle et les concevoir en conséquence.

props

Un props est une méthode pour passer des données aux composants enfants.

STATE

Un state, comme son nom l'indique, représente un état dans lequel un élément d'interface, ou l'interface elle-même, se trouve.

ÉVÉNEMENTS

La gestion d'événements sur des éléments React est pratiquement la même que la gestion d'événements sur les éléments du DOM.

  • Avec JSX, au lieu de passer le nom de la fonction à l'intérieur d'un string comme on le ferait en HTML, on passe directement l'instance de la fonction à l'intérieur de { }.

#Lifecycle

La méthode Render est le seul prérequis à la création d'une composante, cependant une multitude d'autres méthodes existent pour nous aider les gérer.

  • componentWillMount
  • componentDidMount
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate
  • componentWillReceiveProps
  • componentWillUnmount

#Déploiement

#projet spec

Created By
Gabriel Baril
Appreciate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.