Explication détaillée de la méthode pour implémenter l'application de page unique React

Tout d'abord, avant d'apprendre ce cadre, vous devez comprendre les connaissances suivantes:

1. Bases JS natives

2. Bases CSS

3.NPM Bases de gestion des packages

4. WebPack Build Project Basics

5.ES6 Spécifications

Les cinq points de connaissance ci-dessus sont également des pré-tâches qui doivent être comprises dans l'apprentissage d'autres cadres frontaux.

Je ne dirai pas grand-chose sur JS et CSS. Le NPM est actuellement l'outil de gestion des packages le plus préconisé et le plus dominant. Vous pouvez le considérer si vous utilisez toujours Bower ou d'autres outils. En tant que nouvelle génération d'outils d'emballage, WebPack a déjà dominé les outils d'emballage frontal et a un grand avantage par rapport à Browserify. Quant à la spécification ES6, bien que les navigateurs traditionnels ne soient pas compatibles maintenant, ils peuvent être convertis à l'aide de convertisseurs tels que Babel.

En combinant quelques autres cadres frontaux traditionnels, je crois personnellement qu'il existe trois choses de base pour créer des applications à une page: composants, routage et gestion de l'État . Ensuite, je présenterai React sur la base de ces trois, bien sûr, il y aura des points de connaissance supplémentaires entrecoupés là-bas.

Composants

L'écriture et l'appel des composants de React dépend principalement de la modularité d'ES6 et de la syntaxe JSX. Voici un exemple:

 // main.jsimport react à partir de 'react'import {render} de' react-dom'import myComponent de './component.js'import' ./main.css'// la classe de composante principale MyDemo étend react .Component /> </ div (div classname = "box"> <mycomponent /> </ / div} <Mydemo />), document.getElementById ('app')) // composant.js // l'importation du sous-composant réagit à partir de 'react'export class MyComponent étend react.Component {render () {return (<div> <p> Ceci est un composant! </p> </v>)}} // Main.css.box {largement: 100%}

Par rapport au cadre Vue.js, je pense personnellement que la façon dont les composants React est écrite n'est pas aussi confortable que Vue, et que le style CSS du composant est toujours séparé de l'extérieur du composant, il n'est donc pas très pratique de maintenir.

À partir de cet exemple, nous pouvons voir les fonctionnalités du DOM virtuel et JSX de React. Par rapport à d'autres cadres, le Dom virtuel de React peut non seulement améliorer les performances de la page, mais également empêcher les attaques XSS, etc. Les principes spécifiques du DOM virtuel ne sont pas introduits ici

Quant à la syntaxe JSX, c'est une sorte de sucre de syntaxe de JS. Nous pouvons facilement implémenter certaines fonctions via ce sucre de syntaxe. Ici, JSX convertit la syntaxe de XML en JavaScript pur, et les éléments XML, les attributs et les nœuds enfants sont convertis en paramètres de React.CreateElement. Les sucres de syntaxe JS similaires incluent les dactylographiques et d'autres types.

routage

Le mécanisme de routage frontal est l'un des liens les plus importants dans la construction d'applications (spas) à une seule page. Grâce à un routage frontal, nous pouvons optimiser l'expérience utilisateur sans obtenir toutes les données du serveur à chaque fois, afin de présenter rapidement la page à l'utilisateur.

Le routage de la réaction dépend du routeur React . Le routeur React maintient l'interface utilisateur et l'URL synchronisée. Il a des API simples et des fonctionnalités puissantes telles que le chargement tampon de code, la correspondance de routage dynamique et l'établissement de la transition de localisation correcte.

Voici un exemple de routage de réaction:

 Importer React, {Component} à partir de 'React'Import {render} à partir de' React-Dom'import {router, route, indexRoute, link, browserhistory} à partir de 'React-Router'Const active = {Color:' Red '} Class App étend le composant {Render () {return (<div> <h1> My Router </ H1> vers = "/" activestyle = {active}> home </ link> </li> <li> <link to = "/ users" actistyle = {active}> page utilisateur </vink> </li> </ul> {this.props.children} </div>)}} Class index étend react.component {Render () {return (<div> }} classe Les utilisateurs étend React ..Component {render () {return (<div> <h2> utilisateurs </h2> </div>)}} reender ((<router history = {BrowserHistory}> <routier path = "/" Component = {app}> <indexRoute component = {index} /> <Route Path = "Userse Nous

Une seule méthode de routage pour React est répertoriée ici. Par rapport à d'autres cadres, la syntaxe du routage React est plus facile à comprendre.

Gestion du statut

La gestion de l'État n'est pas une application d'une page nécessaire. L'utiliser peut nous aider à gérer les changements dans chaque état de manière unifiée, ce qui rend l'ensemble du processus de projet clair et maintenable. React Implémentation State Management peut utiliser le redux officiellement recommandé.

Redux utilise un flux de données unidirectionnel strict. L'état d'application entier est stocké dans un arbre d'objet, et cet arbre d'objet n'existe que dans le seul magasin.

Exemple du projet

Ici, j'ai écrit un site Web d'une seule page en utilisant React, et la page est la suivante:

Aller chercher

Parce que j'ai utilisé Fetch pour l'interaction Ajax dans l'exemple ci-dessus, je vais brièvement introduire Fetch ici.

Nous pouvons utiliser Fetch comme prochaine génération de technologie Ajax, qui utilise la méthode de promesse populaire actuelle.

En utilisant Fetch, nous pouvons écrire Ajax pour interagir avec des données comme celle-ci:

 // Obtenir la méthode des données fetchfn = () => {fetch ('../../ data.json') .then ((res) => {console.log (res.status); return res.json ()}) .then ((data) => {this.setState ({lists: data.listdata})}). Console.log (E.Message)})}

Résumer

La chose la plus importante à propos de l'apprentissage d'un cadre n'est pas d'apprendre sa technologie, mais d'apprendre les idées de résolution de problèmes qu'elle apporte. En apprenant le cadre de React, vous pouvez découvrir un nouvel état d'esprit à partir de ses nouvelles fonctionnalités uniques. Ce n'est que lorsque le niveau de pensée est élargi que vous pouvez voler librement dans l'océan à l'avant. J'espère que cet article sera utile à tout le monde d'apprendre React.