Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

React #reactjs Table des matières À propos 1 Chapitre 1: Commencer avec React 2

React #reactjs Table des matières À propos 1 Chapitre 1: Commencer avec React 2 Remarques 2 Versions 2 Examples 3 Installation ou configuration 3 Composant Hello World 4 Bonjour le monde 6 Qu'est-ce que ReactJS? 7 Bonjour tout le monde avec des fonctions sans état 8 Par exemple: 8 Créer une application Réagir 9 Installation 9 Configuration 10 Des alternatives 10 Bases absolues de la création de composants réutilisables 10 Composants et accessoires 10 Chapitre 2: Clés en réaction 13 Introduction 13 Remarques 13 Examples 13 Utiliser l'id d'un élément 13 Utilisation de l'index du tableau 14 Chapitre 3: Comment configurer un environnement Web de base, réagir et babel 15 Remarques 15 Examples 16 Comment construire un pipeline pour un "Hello world" personnalisé avec des images. 16 Chapitre 4: Comment et pourquoi utiliser les clés dans React 21 Introduction 21 Remarques 21 Examples 21 Exemple de base 21 Chapitre 5: Communication entre composants 23 Remarques 23 Examples 23 Composants parent à enfant 23 Composants enfant à parent 24 Composants non liés 24 Chapitre 6: Communiquer entre les composants 26 Examples 26 Communication entre composants fonctionnels sans état 26 Chapitre 7: Composants 29 Remarques 29 Examples 29 Composant de base 29 Composants d'imbrication 30 1. Nidification sans enfants 31 Avantages 31 Les inconvénients 31 Bon si 31 2. Nidification à l'aide d'enfants 31 Avantages 32 Les inconvénients 32 Bon si 32 3. Nidification à l'aide d'accessoires 32 Avantages 33 Les inconvénients 33 Bon si 33 Création de composants 33 Structure basique 33 Composants fonctionnels sans état 34 Composants avec état 34 Composants d'ordre supérieur 35 setState pièges 36 Les accessoires 38 Etats des composants - Interface utilisateur dynamique 39 Variations de composants fonctionnels sans état 40 Chapitre 8: Composants d'ordre supérieur 42 Introduction 42 Remarques 42 Examples 42 Composant simple d'ordre supérieur 42 Composant d'ordre supérieur qui vérifie l'authentification 43 Chapitre 9: Composants fonctionnels sans état 45 Remarques 45 Examples 45 Composant fonctionnel sans état 45 Chapitre 10: Configuration de l'environnement réactif 49 Examples 49 Composant Simple React 49 Installer toutes les dépendances 49 Configurer le webpack 49 Configurer babel 50 Fichier HTML à utiliser pour réagir 50 Transpile et regroupe ton composant 50 Chapitre 11: Cycle de vie des composants réactifs 51 Introduction 51 Examples 51 Création de composants 51 getDefaultProps() (ES5 uniquement) 51 getInitialState() (ES5 uniquement) 51 componentWillMount() (ES5 et ES6) 52 render() (ES5 et ES6) 52 componentDidMount() (ES5 et ES6) 52 ES6 Syntaxe 53 Remplacement de getDefaultProps() 54 Remplacement de getInitialState() 54 Mise à jour des composants 54 componentWillReceiveProps(nextProps) 54 shouldComponentUpdate(nextProps, nextState) 54 componentWillUpdate(nextProps, nextState) 55 render() 55 componentDidUpdate(prevProps, prevState) 55 Enlèvement de composant 55 componentWillUnmount() 55 Réaction du conteneur de composants 56 Appel de méthode de cycle de vie dans différents états 57 Chapitre 12: Etat en réaction 59 Examples 59 État de base 59 setState () 59 Utiliser setState() avec un objet comme updater de updater à updater 60 Utiliser setState() avec une fonction comme updater de updater à updater 60 Appel de setState() avec un objet et une fonction de rappel 61 Antipattern commun 61 État, événements et contrôles gérés 63 Chapitre 13: Formulaires et saisie utilisateur 65 Examples 65 Composants contrôlés 65 Composants non contrôlés 65 Chapitre 14: Installation 67 Examples 67 Configuration simple 67 Configuration des dossiers 67 Mise en place des packages 67 Mise en place du webpack 67 Tester la configuration 68 Utiliser webpack-dev-server 69 Installer 69 Modification de webpack.config.js 69 Chapitre 15: Installation React, Webpack & Typescript 71 Remarques 71 Examples 71 webpack.config.js 71 Le chargeur 71 Résoudre les extensions TS 72 tsconfig.json 72 include 72 compilerOptions.target 72 compilerOptions.jsx 72 compilerOptions.allowSyntheticDefaultImports 72 Mon premier composant 73 Chapitre 16: Introduction au rendu côté serveur 74 Examples 74 Composants de rendu 74 renderToString 74 renderToStaticMarkup 74 Chapitre 17: JSX 75 Remarques 75 Examples 76 Accessoires dans JSX 76 Expressions JavaScript 76 Littéraux de chaîne 76 Valeur par défaut des accessoires 76 Attributs de diffusion 77 Enfants à JSX 77 Littéraux de chaîne 77 JSX Enfants 78 Expressions JavaScript 78 Fonctionne comme des enfants 79 Valeurs ignorées 79 Chapitre 18: Les accessoires en réaction 81 Remarques 81 Examples 81 introduction 81 Accessoires par défaut 82 PropTypes 82 Faire passer des accessoires à l'aide d'un opérateur de répartition 84 Props.children et composition des composants 85 Détecter le type de composants enfants 86 Chapitre 19: Performance 87 Examples 87 Les bases - DOM DOM vs DOM virtuel 87 Algorithme diff de React 88 Conseils & Astuces 88 Mesure de performance avec ReactJS 89 Chapitre 20: React Boilerplate [React + Babel + Webpack] 90 Examples 90 Mise en place du projet 90 projet réactif 92 Chapitre 21: React.createClass vs extensions React.Component 95 Syntaxe 95 Remarques 95 Examples 95 Créer un composant réactif 95 React.createClass (obsolète) 95 React.Component 95 Déclarer les accessoires par défaut et les propTypes 96 React.createClass 96 React.Component 97 Définir l'état initial 98 React.createClass 98 React.Component 98 Mixins 99 React.createClass 99 React.Component 99 "this" Contexte 99 React.createClass 99 React.Component 100 Cas 1: Lier en ligne: 100 Cas 2: Liaison dans le constructeur de classe 101 Cas 3: Utiliser la fonction anonyme ES6 101 ES6 / Réagir le mot-clé "this" avec ajax pour récupérer les données du serveur 101 Chapitre 22: Réagir au routage 103 Examples 103 Exemple de fichier Routes.js, suivi de l'utilisation du lien du routeur dans le composant 103 Réagir au routage asynchrone 104 Chapitre 23: Réagir aux formes 105 Examples 105 Composants contrôlés 105 Chapitre 24: Réagir aux outils 107 Examples 107 Liens 107 Chapitre 25: Réagir avec Redux 108 Introduction 108 Remarques 108 Examples 108 Utiliser Connect 108 Chapitre 26: Réagissez à l'appel AJAX 110 Examples 110 Demande HTTP GET 110 Ajax in React sans une bibliothèque tierce - aka avec VanillaJS 111 Demande HTTP GET et mise en boucle des données 111 Chapitre 27: Solutions d'interface utilisateur 113 Introduction 113 Examples 113 Volet de base 113 Panneau 113 Languette 114 PanelGroup 114 Clarification 115 Exemple de vue avec `PanelGroup`s 116 Chapitre 28: Utilisation de React avec Flow 118 Introduction 118 Remarques 118 Examples 118 Utilisation de Flow pour vérifier les types de composants fonctionnels sans état 118 Utiliser Flow pour vérifier les types de prop 118 Chapitre 29: Utiliser ReactJS avec jQuery 119 Examples 119 ReactJS avec jQuery 119 Chapitre 30: Utiliser ReactJS avec Typescript 121 Examples 121 Composant ReactJS écrit en Typescript 121 Composants réactifs sans état dans Typescript 122 Installation et configuration 122 Composants sans état et sans propriété 123 Chapitre 31: Utiliser ReactJS de manière Flux 125 Introduction 125 Remarques 125 Examples 125 Flux de données 125 Renversé 126 Crédits 127 À propos You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: react It is an unofficial and free React ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official React. The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners. Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to info@zzzprojects.com https://riptutorial.com/fr/home 1 Chapitre 1: Commencer avec React Remarques React est une bibliothèque JavaScript déclarative basée sur des composants, utilisée pour créer des interfaces utilisateur. Pour atteindre les fonctionnalités du framework MVC dans React, les développeurs l’utilisent en conjonction avec une saveur Flux de votre choix, par exemple Redux . Versions Version Date de sortie 0.3.0 2013-05-29 0.4.0 2013-07-17 0.5.0 2013-10-16 0.8.0 2013-12-19 0.9.0 2014-02-20 0.10.0 2014-03-21 0.11.0 2014-07-17 0.12.0 2014-10-28 0.13.0 2015-03-10 0,14,0 2015-10-07 15.0.0 2016-04-07 15.1.0 2016-05-20 15.2.0 2016-07-01 15.2.1 2016-07-08 15.3.0 2016-07-29 15.3.1 2016-08-19 15.3.2 2016-09-19 https://riptutorial.com/fr/home 2 Version Date de sortie 15.4.0 2016-11-16 15.4.1 2016-11-23 15.4.2 2017-01-06 15.5.0 2017-04-07 15.6.0 2017-06-13 Examples Installation ou configuration ReactJS est une bibliothèque JavaScript contenue dans un seul fichier react-<version>.js pouvant être inclus dans n'importe quelle page HTML. Les gens installent également généralement la bibliothèque React DOM react-dom-<version>.js avec le fichier principal React: Inclusion de base <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript" src="/path/to/react.js"></script> <script type="text/javascript" src="/path/to/react-dom.js"></script> <script type="text/javascript"> // Use react JavaScript code here or in a separate file </script> </body> </html> Pour obtenir les fichiers JavaScript, accédez à la page d'installation de la documentation officielle de React. React prend également en charge la syntaxe JSX . JSX est une extension créée par Facebook qui ajoute une syntaxe XML à JavaScript. Pour utiliser JSX, vous devez inclure la bibliothèque Babel et changer <script type="text/javascript"> en <script type="text/babel"> afin de traduire JSX en code Javascript. <!DOCTYPE html> <html> <head></head> <body> <script type="text/javascript" src="/path/to/react.js"></script> <script type="text/javascript" src="/path/to/react-dom.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script type="text/babel"> // Use react JSX code here or in a separate file </script> https://riptutorial.com/fr/home 3 uploads/Marketing/ react-fr.pdf