L'auteur de l'article, dont nous publions la traduction, estime que, malheureusement, la plupart des guides React existants ne prêtent pas l'attention voulue aux précieuses techniques de développement pratiques. Ces guides ne permettent pas toujours à la personne impliquée de comprendre ce qu'est la «bonne approche» pour travailler avec React.
Ce didacticiel, destiné aux développeurs débutants ayant des connaissances en HTML, JavaScript et CSS, couvrira les bases de React et les erreurs les plus courantes qu'un programmeur utilisant cette bibliothèque peut rencontrer.
Pourquoi les développeurs Web choisissent-ils React?
Avant de passer aux choses sérieuses, disons quelques mots sur les raisons pour lesquelles React peut être considéré comme la meilleure alternative parmi les outils de développement d'interfaces Web. Il existe de nombreux cadres d'interface utilisateur. Pourquoi choisir React? Afin de répondre à cette question, comparons les deux outils de développement d'interface les plus populaires - React et Angular. Il convient de noter que le cadre Vue.js, qui gagne en popularité, pourrait être inclus dans cette comparaison, mais nous nous limiterons à React et Angular.
▍ Approche déclarative de la description des interfaces
Le développement de React consiste à décrire ce qui doit être affiché sur la page (et non à compiler des instructions pour le navigateur sur la façon de le faire). Cela signifie, entre autres, une réduction significative de la quantité de code passe-partout.
Angular, d'autre part, dispose d'outils de ligne de commande qui génèrent du code passe-partout de composants. Cela semble-t-il un peu différent de ce que vous pouvez attendre des outils de développement d'interface modernes? En fait, nous parlons du fait qu'il y a tellement de code de modèle dans Angular que pour le générer, même un outil spécial a été créé.
Dans React, en commençant à se développer, ils commencent juste à écrire du code. Il n'y a aucun code de composant passe-partout qui doit être généré d'une manière ou d'une autre. Bien sûr, une certaine préparation est nécessaire avant le développement, mais en ce qui concerne les composants, ils peuvent être décrits comme des fonctions pures.
â–Ť Syntaxe claire
Le code angulaire utilise des directives comme
ng-model ,
ngIf et
ngFor . Ce code semble plutôt lourd. React, d'autre part, utilise la syntaxe JSX, qui est perçue comme du HTML standard, c'est-à -dire que pour démarrer le développement de React, vous n'avez pas besoin d'apprendre des choses fondamentalement nouvelles. Voici à quoi ça ressemble:
const Greetings = ({ firstName }) => ( <div>Hi, {firstName}</div> );
â–Ť Courbe d'apprentissage correcte
La courbe d'apprentissage est un facteur important à considérer lors du choix d'un cadre d'interface utilisateur. À cet égard, il convient de noter qu'il y a moins d'abstractions dans React que dans Angular. Si vous connaissez JavaScript, vous pouvez probablement apprendre à écrire des applications React en un jour. Bien sûr, pour apprendre à bien faire, cela prendra un certain temps, mais vous pouvez vous mettre au travail très, très rapidement.
Si vous analysez Angular, il s'avère que si vous décidez de maîtriser ce framework, vous devrez apprendre un nouveau langage (Angular utilise TypeScript), ainsi que apprendre à utiliser les outils de ligne de commande Angular et à vous habituer à travailler avec des directives.
▍ Caractéristiques du mécanisme de liaison des données
Angular dispose d'un système de liaison de données bidirectionnel. Cela se traduit par exemple par le fait que les modifications de la forme d'un élément entraînent une mise à jour automatique de l'état de l'application. Cela complique le débogage et constitue un gros inconvénient de ce cadre. Avec cette approche, si quelque chose se passe mal, le programmeur ne peut pas savoir exactement ce qui a causé le changement d'état de l'application.
React, d'autre part, utilise une liaison de données unidirectionnelle. C'est un gros plus de cette bibliothèque, car elle s'exprime dans le fait que le programmeur sait toujours exactement ce qui a conduit au changement d'état de l'application. Cette approche de la liaison de données simplifie considérablement le débogage des applications.
▍Approche fonctionnelle du développement
Je crois que l'un des points forts de React est le fait que cette bibliothèque n'oblige pas le développeur à utiliser des classes. Dans Angular, tous les composants doivent être implémentés en tant que classes. Cela conduit à une complexité excessive du code, sans donner aucun avantage.
Dans React, tous les composants de l'interface utilisateur peuvent être exprimés sous forme d'ensembles de fonctions pures. L'utilisation de fonctions pures pour former une interface utilisateur peut être comparée à une bouffée d'air pur.
Maintenant que nous avons examiné les raisons de la popularité de React, qui, très probablement, vous inclinera vers cette bibliothèque particulière lors du choix des outils pour développer des interfaces utilisateur, passons à la pratique.
Pratique de développement d'applications React
â–ŤNode.js
Node.js est une plate-forme serveur qui prend en charge l'exécution de code JavaScript, dont les capacités nous sont utiles pour le développement de React. Si vous n'avez pas déjà installé cette plateforme, il est temps de la
réparer .
▍Préparation du projet
Ici, nous utiliserons le package
create-react-app de Facebook pour créer le cœur de l'application React. Il s'agit probablement de l'approche la plus populaire pour configurer un environnement de travail, ce qui vous permet de démarrer le développement. Grâce à l'application
create-react-app programmeur met à sa disposition de nombreux outils nécessaires, ce qui évite d'avoir à les sélectionner soi-même.
Pour installer
create-react-app , utilisez cette commande:
npm i -g create-react-app
Ensuite, pour créer le modèle d'application, exécutez la commande suivante:
create-react-app react-intro
Cette préparation préliminaire est terminée. Pour lancer l'application, exécutez les commandes suivantes:
cd react-intro npm start
Ici, nous allons dans le dossier du projet et lancons le serveur de dĂ©veloppement, qui vous permet d'ouvrir une nouvelle application React en allant dans le navigateur Ă
http: // localhost: 3000 / .
â–Ť Structure du projet
Voyons comment fonctionne l'application React. Pour ce faire, ouvrez le projet que vous venez de créer à l'aide de votre IDE (je recommande
Visual Studio Code ).
Fichier Index.html
Dans le dossier du projet, ouvrez le fichier situé dans
public/index.html . Voici ce que vous verrez en faisant cela.
Fichier Index.htmlIci, nous sommes particulièrement intéressés par la ligne
<div id="root"> . C'est là que notre application React sera située. Tout cet élément sera remplacé par le code de l'application et tout le reste restera inchangé.
Fichier Index.js
Ouvrez maintenant le
src/index.js . Ce fichier est celui qui déploie l'application React. Et, soit dit en passant, le code source de l'application sera placé dans le répertoire
src .
Fichier Index.jsVoici la ligne de code qui est responsable de la sortie de ce que nous appelons une "application React" sur la page:
ReactDOM.render(<App />, document.getElementById('root'));
Cette ligne indique Ă React que nous devons prendre le composant
App (nous en parlerons très bientôt) et le placer dans le
div root , qui a été défini dans le fichier
index.html que nous venons d'examiner.
Nous allons maintenant traiter de la construction
<App /> . Il est très similaire au code HTML, mais il s'agit d'un exemple de code JSX, qui est une syntaxe JavaScript spéciale utilisée par React. Veuillez noter que cette construction commence par une majuscule
A , qu'il s'agit exactement de
<App /> et non de
<app /> . Cela est dû à la convention de dénomination d'entité utilisée dans React. Cette approche permet au système de faire la distinction entre les balises HTML standard et les composants React. Si les noms des composants ne sont pas en majuscule, React ne pourra pas les afficher sur la page.
Si vous prévoyez d'utiliser JSX dans un certain fichier
.js , vous devez y importer React Ă l'aide de la commande suivante:
import React from 'react';
Fichier App.js
Nous sommes maintenant prĂŞts Ă jeter un Ĺ“il au code de notre premier composant. Pour ce faire, ouvrez le
src/App.jsFichier App.jsPour créer un composant React, vous devez d'abord créer une classe qui est un descendant de
React.Component . C'est exactement ce que la
class App extends Component ligne
class App extends Component résout. Tous les composants React doivent contenir une implémentation de la méthode de
render , dans laquelle, comme vous pouvez le deviner d'après son nom, le composant est rendu et une description de sa représentation visuelle est générée. Cette méthode doit renvoyer le balisage HTML pour la sortie sur la page.
Notez que l'attribut
className est l'Ă©quivalent de l'attribut
class en HTML. Il est utilisé pour affecter des classes CSS aux éléments afin de les styliser. La
class mots
class clés JavaScript est réservée et ne peut pas être utilisée comme nom d'attribut.
Répétons ce que nous venons de découvrir sur les composants:
- Leurs noms commencent par une majuscule (
A dans l' App ). - Ils Ă©tendent la classe
React.Component . - Ils doivent implémenter une méthode de
render qui retourne le balisage.
Parlons maintenant de ce qu'il faut éviter lors du développement d'applications React.
▍Recommandation n ° 1: il n'est pas nécessaire d'utiliser des classes de composants partout
Les composants dans React peuvent être créés en utilisant deux approches. La première consiste à utiliser des classes de composants (Composant de classe), la seconde consiste à utiliser des composants fonctionnels (Composant fonctionnel). Comme vous l'avez peut-être remarqué, l'exemple ci-dessus utilise des classes. Malheureusement, la plupart des didacticiels pour débutants React suggèrent de les utiliser.
Quel est le problème avec la description des composants à l'aide du mécanisme de classe? Le fait est que de tels composants sont difficiles à tester et ont tendance à croître de manière excessive. Ces composants sont soumis au problème de la mauvaise qualité de la séparation des responsabilités, de la logique de mélange et de la présentation visuelle (ce qui complique le débogage et le test des applications). En général, l'utilisation des classes de composants conduit au fait que le programmeur, au sens figuré, "se tire une balle dans le pied". Par conséquent, surtout en ce qui concerne les programmeurs débutants, je recommanderais qu'ils n'utilisent pas du tout les classes de composants.
Nous avons donc découvert que l'utilisation de classes pour décrire les composants n'est pas une bonne idée. Quelles alternatives avons-nous? La réponse à cette question concerne les composants fonctionnels. Si le composant créé à l'aide de la classe n'a rien d'autre que la méthode de
render , alors c'est un excellent candidat pour le transformer en composant fonctionnel. Armés de cette idée, réfléchissons à la façon d'améliorer le composant
App créé par l'outil
create-react-app :
function App() { return ( <div className="App"> ... </div> ); } export default App;
Voyez ce que nous avons fait ici? À savoir, nous avons supprimé la classe et remplacé la méthode de
render par une construction de la
function App() {...} formulaire
function App() {...} . Si nous utilisons la syntaxe de la fonction de flèche ES6 ici, notre code sera encore meilleur:
const App = () => ( <div className="App"> ... </div> ); export default App;
Nous avons transformé la classe en une fonction qui renvoie le balisage qui doit être affiché sur la page.
Considérez ceci. Une fonction qui retourne un balisage n'a pas de code passe-partout. Il s'agit d'un balisage presque pur. N'est-ce pas parfait?
Le code des composants fonctionnels est beaucoup plus facile Ă lire, en travaillant avec eux, vous devez ĂŞtre beaucoup moins distrait par les conceptions standard.
Il convient de noter ici que mĂŞme si nous venons de dire que les composants fonctionnels sont prĂ©fĂ©rables aux classes de composants, dans cet article, nous utiliserons principalement des classes, car le code des classes de composants est plus clair pour les dĂ©butants, il repose sur moins d'abstractions, avec Il est plus facile de dĂ©montrer les concepts clĂ©s de React. Mais lorsque vous ĂŞtes suffisamment familiarisĂ© avec le dĂ©veloppement des applications React, il est fortement recommandĂ© de prendre en compte, lors du dĂ©veloppement de projets rĂ©els, ce qui a Ă©tĂ© dit plus haut. Afin de mieux comprendre les composants fonctionnels - jetez un Ĺ“il Ă
ce matériau .
▍ Connaissance des propriétés
Les propriétés (accessoires) sont l'un des concepts centraux de React. Que sont les «propriétés»? Pour comprendre cela, rappelez-vous les paramètres qui sont passés aux fonctions. En substance, les propriétés sont les paramètres qui sont transmis aux composants. Considérez le code suivant:
const Greetings = (props) => <div>Hey you! {props.firstName} {props.lastName}!</div>; const App = () => ( <div> <Greetings firstName="John" lastName="Smith" /> </div> );
Ici, nous avons créé le composant
Greetings et l'avons utilisé pour accueillir un homme nommé
John Smith du composant
App . Tout ce code entraînera le balisage HTML suivant:
<div> <div>Hey you! John Smith!</div> </div>
Les accolades dans les expressions comme
{props.name} sont utilisées pour mettre en évidence le code JavaScript. Le composant
Greetings est transmis, sous forme de paramètres, aux propriétés
firstName et
lastName . Nous travaillons avec eux, en nous référant aux propriétés de l'objet
props .
Notez qu'un seul objet
props est
props , et non deux valeurs représentant les propriétés
firstName et
lastName .
Le code peut être simplifié en tirant parti de la capacité d'ES6 à restructurer des objets:
const Greetings = ({ firstName, lastName }) => <div>Hey you! {firstName} {lastName}!</div>;
Comme vous pouvez le voir, ici la construction
(props) été remplacée par
({ firstName, lastName }) . Avec ce remplacement, nous disons au système que nous ne sommes intéressés que par deux propriétés de l'objet
props . Et cela, à son tour, nous permet d'accéder directement aux valeurs de
firstName et
lastName sans spécifier explicitement les propriétés d'objet comme
props.firstName .
Et si, pour résoudre le même problème, au lieu de composants fonctionnels, nous utilisions des composants basés sur des classes? Dans ce cas, le code du composant
Greetings ressemblerait Ă ceci:
class Greetings extends React.Component { render() { return ( <div>Hey you! {this.props.firstName} {this.props.lastName}!</div> ); } }
Je ne sais pas quelles sensations ce code vous provoque, mais il me semble surchargé de mécanismes auxiliaires. Ici, en particulier, pour accéder aux propriétés, vous devez utiliser des constructions de la forme
this.props .
▍ principe de responsabilité unique
Le principe de responsabilité unique (PRS) est l'un des principes de programmation les plus importants à respecter. Il nous dit que le module ne doit résoudre qu'un seul problème et doit le faire de manière qualitative. Si vous développez un projet sans suivre uniquement ce principe, le code d'un tel projet peut se transformer en une conception de cauchemar qui ne peut pas être prise en charge.
Comment le principe de la responsabilité unique peut-il être violé? Le plus souvent, cela se produit lorsque des mécanismes indépendants les uns des autres sont placés dans les mêmes fichiers. Dans ce document, nous ferons souvent référence à ce principe.
Les débutants placent généralement de nombreux composants dans un seul fichier. Par exemple, nous avons le code des composants
Greetings et
App dans le mĂŞme fichier. En pratique, cela ne devrait pas ĂŞtre fait, car cela viole le SRP.
Même les très petits composants (comme notre composant
Greetings ) doivent être placés dans des fichiers séparés.
Placez le code du composant
Greetings dans un fichier séparé:
import React from "react"; const Greetings = ({ firstName, lastName }) => ( <div> Hey you! {firstName} {lastName}! </div> ); export default Greetings;
Utilisez ensuite ce composant dans le composant
App :
import Greetings from "./Greetings"; const App = () => ( ... );
Notez que le nom de fichier doit correspondre au nom du composant. En d'autres
App.js , le code du composant
App doit être placé dans le fichier
App.js , le code du composant
Greetings dans le fichier
Greetings , etc.
â–Ť Connaissance de l'Ă©tat de la demande
L'État est un autre concept central de React. C'est là que les données d'application sont stockées, c'est-à -dire ce qui peut changer. Besoin de sauvegarder quelque chose entré dans le champ du formulaire? Utiliser l'état. Besoin de sauver des points marqués par un joueur dans un jeu par navigateur? Pour ce faire, vous devez utiliser l'état de l'application.
Créons un formulaire simple avec lequel l'utilisateur peut entrer son nom. Veuillez noter qu'ici, j'utilise intentionnellement une classe pour décrire le composant, car cela facilite la démonstration du concept en question. Vous pouvez lire ici comment convertir un composant créé à l'aide d'une classe en composant fonctionnel.
import React from "react"; class SimpleForm extends React.Component { render() { return ( <div> <input type="text" name="firstName" /> <Greetings firstName="John" /> </div> ); } } const App = () => ( <div> <SimpleForm /> </div> );
L'utilisateur peut entrer quelque chose dans le champ du formulaire, et c'est bien. Cependant, si vous lisez attentivement ce code, vous remarquerez peut-ĂŞtre que
John est toujours utilisé comme nom d'utilisateur dans la sortie de la page d'accueil. Et si tous nos utilisateurs ne sont pas appelés ainsi? Si oui, alors nous nous mettons dans une position peu confortable.
Comment utiliser la valeur entrée dans le champ? React ne s'appuie pas directement sur les éléments DOM. Les gestionnaires d'événements et l'état de l'application nous aideront à résoudre ce problème.
class SimpleForm extends React.Component { state = { firstName: "", }; onFirstNameChange = event => this.setState({ firstName: event.target.value }); render() { return ( <div> <input type="text" name="firstName" onChange={this.onFirstNameChange} /> <Greetings firstName={this.state.firstName} /> </div> ); } }
Vous pouvez imaginer un état comme un simple objet JavaScript, qui, sous la forme d'une propriété, est stocké dans la classe du composant
SimpleForm . Dans cet objet, nous ajoutons la propriété
firstName .
Ici, nous avons équipé le champ
firstName d'un gestionnaire d'événements. Il démarre chaque fois qu'un utilisateur saisit au moins un caractère dans un champ. Dans la classe, la propriété
onChange est responsable du traitement de l'
onFirstNameChange onChange , dans lequel la commande suivante est exécutée:
this.setState(...)
C'est là que l'état du composant est mis à jour. L'état du composant n'est pas directement mis à jour. Cela se fait uniquement à l'aide de la méthode
setState . Afin d'écrire une nouvelle valeur dans la propriété
firstName , nous passons simplement à cette méthode un objet contenant ce qui doit être écrit à l'état:
{ firstName: event.target.value }
Dans ce cas,
event.target.value est ce que l'utilisateur a entré dans le champ du formulaire, à savoir son nom.
Notez que nous n'avons pas déclaré
onFirstNameChange comme méthode. Il est très important que ces choses soient déclarées sous forme de propriétés de classe contenant des fonctions fléchées, et non sous forme de méthodes. Si vous déclarez une fonction similaire en tant que méthode,
this ci sera liée à l'élément de formulaire qui appelle cette méthode, et non à la classe, comme on pourrait s'y attendre. Cette petite chose est souvent déroutante pour les débutants. C'est l'une des raisons pour lesquelles il est recommandé d'utiliser des composants fonctionnels plutôt que des classes de composants.
▍Vérifiez les données saisies sur le formulaire
Nous mettons en place un système simple de vérification des données saisies dans le formulaire à l'aide d'expressions régulières. Décidons qu'un nom doit être composé d'au moins trois caractères et ne peut contenir que des lettres.
Ajoutez le
onBlur événements
onBlur au composant, qui est appelé lorsque l'utilisateur quitte le champ de saisie. Ajoutez une autre propriété à l'état de l'application -
firstNameError . Si une erreur s'est produite lors de la saisie du nom, nous afficherons un message Ă ce sujet sous le champ.
Analysons ce code.
class SimpleForm extends React.Component { state = { firstName: "", firstNameError: "", }; validateName = name => { const regex = /[A-Za-z]{3,}/; return !regex.test(name) ? "The name must contain at least three letters. Numbers and special characters are not allowed." : ""; }; onFirstNameBlur = () => { const { firstName } = this.state; const firstNameError = this.validateName( firstName ); return this.setState({ firstNameError }); }; onFirstNameChange = event => this.setState({ firstName: event.target.value }); render() { const { firstNameError, firstName } = this.state; return ( <div> <div> <label> First name: <input type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div>{firstNameError}</div>} </label> </div> <Greetings firstName={firstName} /> </div> ); } }
Statut de l'application
En développant un système de vérification des entrées, nous avons, pour commencer, ajouté une nouvelle propriété à l'état:
firstNameError :
state = { ... firstNameError: "", };
Fonction de validation des données
La validation des données est effectuée dans la fonction de flèche
validateName . Il valide le nom saisi avec une expression régulière:
validateName = name => { const regex = /[A-Za-z]{3,}/; return !regex.test(name) ? "The name must contain at least three letters..." : ""; }
Si la vérification échoue, nous renvoyons un message d'erreur de la fonction. Si le nom a réussi le test, nous renvoyons une chaîne vide qui indique qu'aucune erreur n'a été trouvée lors de la vérification du nom. Ici, par souci de concision, nous utilisons l'opérateur ternaire JavaScript.
Gestionnaire d'événements OnBlur
onBlur Ĺ“il au
onBlur événements
onBlur , qui est appelé lorsque l'utilisateur quitte le champ de saisie:
onFirstNameBlur = () => { const { firstName } = this.state; const firstNameError = this.validateName( firstName ); return this.setState({ firstNameError }); };
Ici, nous extrayons la propriété
firstName de l'état, profitant de la capacité d'ES6 à détruire des objets. La première ligne de ce code est équivalente à ceci:
const firstName = this.state.firstName;
Ensuite, nous appelons la fonction de vérification des données décrite ci-dessus, en la passant
firstName et écrivons dans la propriété d'état
firstNameError ce que cette fonction renvoie. Si la vérification échoue, un message d'erreur sera envoyé à cette propriété. En cas de succès, une ligne vide y sera écrite.
MĂ©thode de rendu
Considérez la méthode
render() du composant:
render() { const { firstNameError, firstName} = this.state; ... }
.
<input ... onBlur={this.onFirstNameBlur} />
onFirstNameBlur onBlur .
{firstNameError && <div>{firstNameError}</div>}
JavaScript.
div , , ,
firstNameError true .
â–Ť
, , , . , :
render() { const { firstNameError, firstName } = this.state; return ( <div style={{ margin: 50, padding: 10, width: 300, border: "1px solid black", backgroundColor: "black", color: "white" }} > <div style={{marginBottom: 10}}> <label> First name: <input style={{backgroundColor: '#EFEFFF', marginLeft: 10}} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div style={{color: 'red', margin: 5}}>{firstNameError}</div>} </label> </div> <Greetings firstName={firstName} /> </div> ); }
React
style .
, , , , , . , .
â–Ť â„–2:
, , React-. , , —
render , , . ? , . , , .
Comment Ă©viter cela? , .
style , . . ,
style.js :
// style.js: const style = { form: { margin: 50, padding: 10, width: 300, border: "1px solid black", backgroundColor: "black", color: "white" }, inputGroup: { marginBottom: 10 }, input: { backgroundColor: "#EFEFFF", marginLeft: 10 }, error: { color: "red", margin: 5 } }; export default style;
, ,
SimpleComponent :
import style from './style'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName } = this.state; return ( <div style={style.form}> <div style={style.inputGroup}> <label> First name: <input style={style.input} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && ( <div style={style.error}>{firstNameError}</div> )} </label> </div> <Greetings firstName={firstName} /> </div> ); } } export default SimpleForm;
, . .
â–Ť
, :
class SimpleForm extends React.Component { state = { ... lastName: "", lastNameError: "" }; validateName = ...; onFirstNameBlur = ...; onFirstNameChange = ...; onLastNameBlur = () => { const { lastName } = this.state; const lastNameError = this.validateName(lastName); return this.setState({ lastNameError }); }; onLastNameChange = event => this.setState({ lastName: event.target.value }); render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <div style={style.inputGroup}> <label> First name: <input style={style.input} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div style={style.error}>{firstNameError}</div>} </label> </div> <div style={style.inputGroup}> <label> Last name: <input style={style.input} type="text" name="lastName" onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} /> {lastNameError && <div style={style.error}>{lastNameError}</div>} </label> </div> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } } export default SimpleForm;
— ,
firstName .
«»? — , .
â–Ť â„–3:
, , , , , . , ,
render . .
, , , .
TextField , .
import React from 'react' import style from "./style"; const TextField = ({name, onChange, onBlur, error, label}) => ( <div style={style.inputGroup}> <label> {label} <input style={style.input} type="text" name={name} onChange={onChange} onBlur={onBlur} /> {error && <div style={style.error}>{error}</div>} </label> </div> ); export default TextField;
, ,
render . , , .
SimpleForm :
... import TextField from './TextField'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <TextField name="firstName" label="First name:" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} error={firstNameError} /> <TextField name="lastName" label="Last name:" onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} error={lastNameError} /> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } }
, . ,
TextField .
FirstNameField :
import React from 'react'; import TextField from './TextField'; const FirstNameField = ({...rest}) => ( <TextField name="firstName" label="First name:" {...rest} /> ); export default FirstNameField;
, .
({...rest}) ( rest, ). , , ,
rest . , ,
TextField , « », spread (,
{...rest} , ).
rest , ,
TextField .
, : ,
FirstNameField TextField .
LastNameField :
:
... import FirstNameField from './FirstNameField'; import LastNameField from './LastNameField'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <FirstNameField onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} error={firstNameError} /> <LastNameField onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} error={lastNameError} /> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } }
.
â–Ť
, , , :
- , , , .
- . , , , , 1000 ( ).
- , . , , .
- , , , . . , , . , , , .
- , , , , .
this , .
Résumé
, React- . , , , , . , , , React, , , , UI-.
→ , ,
Chers lecteurs! , , React-, .
