React.js: ce que j'ai appris de mon premier projet

Publié à l'origine sur Medium pour JavaScript en anglais simple le 2 avril 2023

Au cours des dernières semaines, j'ai commencé à apprendre une autre compétence très recherchée dans le monde du développement Web: React.js. Se sentant au moins un peu à l'aise avec beaucoup de choses en JavaScript, et à la demande de certains de mes mentors, j'ai pensé que c'était l'étape la plus logique à franchir pour atteindre mes objectifs de carrière. Dans cet article, je partagerai avec vous certaines choses que j'ai apprises à ce sujet en tant que recrue.

Pour un certain contexte, je n'ai travaillé qu'avec des composants de classe dans React, jamais avec des composants fonctionnels, je ne décrirai pas les différences ici, car je ne sais vraiment rien des composants fonctionnels maintenant. J'écrirai probablement un article un jour contrastant les deux types. Même au moment où j'écris cet article, tout le monde est recommandé par tout le monde d'utiliser des composants fonctionnels, mais il est toujours avantageux de savoir comment fonctionnent les composants de classe, car les projets REACT plus anciens peuvent les utiliser.

Pour mon premier projet, j'ai été chargé de construire une calculatrice de dette, dans laquelle l'utilisateur peut entrer le directeur de la dette, le taux d'intérêt, combien il veut payer. Il y a quelques stipulations pour ces champs d'entrée, mais vous pouvez lire les personnes dans ReadMe.md du projet (Link the Github Repo est à la fin de l'article), ou vous pouvez l'essayer vous-même pour voir comment cela fonctionne. Une fois que l’utilisateur «soumet» un paiement, un article sur l'historique de paiement apparaîtra, donnant des détails sur le principal, les intérêts et le solde. À moins que l'utilisateur ne soit remboursé l'intégralité de la dette lors du premier paiement, tous les champs d'entrée, à l'exception du champ de paiement, sont désactivés lorsque le premier paiement est effectué; Si la dette totale est remboursée, le formulaire entier est désactivé et l'utilisateur peut afficher l'historique du paiement final, ainsi qu'un message qu'il est sans dette.

Je vais fournir des réponses aux questions suivantes que j'ai eues sur la réaction tout en commençant à en savoir plus:

Qu'est-ce que React.js, et pourquoi devrait-il être utilisé?

Comment commencer à créer une application React?

À quoi ressemble un composant typique?

comment puis-je partager des informations entre les composants?

Puis-je rendre les choses conditionnellement dans React?

Comment puis-je déployer une application React?

---

Qu'est-ce que React.js, et pourquoi devrait-il être utilisé?

React est une bibliothèque JS frontale (pas un framework?)) Qui facilite l'organisation de projets à grande échelle. Il a été initialement développé sur Facebook plus ici, et est maintenant maintenu, bien sûr, par Meta, qui l'utilise également pour Instagram. Il est maintenant largement utilisé sur de nombreux sites à travers les interwebs, comme Airbnb, BBC, Imgur et Netflix, entre autres.

Le code React est constitué de composants réutilisables, qui doivent être situés dans le dossier src et dont les noms doivent être au format CamelCase. De nombreux composants sont écrits en JSX (JavaScript Syntax Extension), qui est une sorte de mélange entre HTML et JS. J'appelle ces composants « réutilisables » car ils ont la même structure et des informations différentes peuvent leur être transmises et affichées sur le site. Les composants peuvent également être écrits en JS normal. Différentes informations, telles que les informations du compte utilisateur, peuvent ensuite être transmises à ces composants et ils s'afficheront tous de la même manière.

Comment puis-je commencer à créer une application React ?

Pour initialiser une application React, entrez les commandes suivantes dans le terminal :

npx create-react-app project-name
cd project-name
npm start

npm start ouvrira le projet dans votre navigateur par défaut dans un port vide.
Cela prend généralement quelques minutes pour que tout soit mis en place, alors faites peut-être quelque chose de productif en attendant, comme télécharger une danse idiote sur TikTok ou découvrir dans quelle maison de Poudlard vous seriez réparti (oui, j'ai fait ce quiz).

La documentation officielle recommande désormais d'utiliser un framework pour initialiser une application React. Je n'en ai pas encore utilisé, mais vous pouvez en savoir plus à ce sujet ici.

À quoi ressemble un composant typique ?

Comme je l'ai mentionné, je n'ai travaillé qu'avec des composants de classe jusqu'à présent, je ne couvrirai donc que ceux-ci dans cet article. Les composants que j'ai utilisés pour mon premier projet sont un peu volumineux à mettre ici, alors veuillez consulter les fichiers App.js et PaymentHistory.jsx dans le dossier src du référentiel lié à la fin de l'article pour les voir en action. Néanmoins, un composant de classe typique peut ressembler à ceci :

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Remarquez que j'ai ajouté une valeur clé à chaque

élément à l’intérieur du

. Ceux-ci ne sont pas nécessairement cruciaux pour le bon fonctionnement de l’application, mais il est préférable de les inclure. Une valeur clé unique doit être ajoutée à chaque enfant d'un élément parent dans return().

Comme une classe JS normale, la première chose qui devrait arriver est le constructeur(), suivi de super(). Si nous souhaitons partager, par exemple, des valeurs d'état ou des méthodes d'une classe à une autre, nous devons transmettre des accessoires, abréviation de « propriétés », comme paramètre pour constructor() et super().

Ensuite, nous devrions initialiser les valeurs d'état. Dans mon projet de calcul de dette, je devais utiliser plusieurs valeurs d'état pour suivre diverses sommes d'argent relatives au paiement, au principal, aux intérêts dus et au solde, mais j'en ai également utilisé quelques-unes qui déterminaient comment ou si certaines choses devaient être rendues. Voici comment j'ai utilisé la valeur de l'état isDebtFree pour activer un champ de saisie lorsqu'il est égal à faux et le désactiver lorsqu'il est vrai :

npx create-react-app project-name
cd project-name
npm start

Comme vous pouvez le voir, nous pouvons modifier les valeurs d'état dans les composants de classe en utilisant une fonction setState. Gardez à l’esprit que setState s’exécute de manière asynchrone, donc toute fonctionnalité nécessitant les valeurs d’état mises à jour peut être placée dans un rappel. Cependant, vous devez garder ces rappels aussi simples que possible, sinon vous vous retrouverez dans le monde déroutant du « Callback Hell », alors suivez le principe de responsabilité unique du mieux que vous pouvez lors de la création de méthodes dans le composant. Vous devez également savoir que chaque fois que l'état est modifié au sein du composant, le composant est restitué.
Le DOM ne doit pas être manipulé directement à l’intérieur d’une méthode. Cela s’appelle un « anti-modèle ». Remarquez que je n'ai pas accédé directement à l'élément DOM en définissant l'attribut désactivé dans la méthode, comme ceci :

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Au lieu de cela, des parties des éléments HTML dans return() doivent être définies sur une valeur d'état, qui peut changer en fonction de l'exécution des méthodes dans le composant, comme je vous l'ai montré dans le bloc de code précédant celui situé directement au-dessus de ce paragraphe.

Une autre chose à noter est que l'expression return() du composant doit être aussi courte que possible, évitez donc d'y mettre tout type d'expressions mathématiques, ainsi que les fonctionnalités définies ici. J'ai fait cette erreur au début lorsque j'ai essayé de définir les valeurs min et max dans le champ de paiement, qui changent en fonction des valeurs d'état, qui changent lorsque des nombres sont saisis dans les champs Principal et Taux d'intérêt, et lorsqu'un paiement est effectué.

J'ai plutôt créé une méthode pour chacune de ces valeurs, puis j'ai défini les valeurs min et max sur ce que ces méthodes renvoyaient. La première méthode ci-dessous a fonctionné, mais ce n'est pas exactement une bonne façon de le faire dans React, car, encore une fois, la partie return() d'un composant doit être aussi courte et facile à lire que possible.

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

La méthode ci-dessous est plus conforme à l'esprit de React :

// DO NOT ACCESS DOM ELEMENTS DIRECTLY INSIDE A METHOD!
updateValues = () => {
  if (newBalance === 0) {
  document.getElementById('payment').disabled = true;
 }
}

Comment puis-je partager des informations entre les composants ?

Comme vous pouvez le voir dans le premier bloc de codage de cet article, j'ai passé une méthode d'un composant à un autre à l'aide d'accessoires. Voyons maintenant comment ce deuxième composant pourrait accéder à ce que nous lui avons transmis depuis App dans le premier bloc de code ci-dessus. Voici à quoi ressemblait cette partie, au cas où vous seriez trop paresseux pour faire défiler la page jusqu'en haut pour la voir :

// You could put math operations directly inside elements in return()...
// ... but this is not the best way
render() {
  return (
    <input
      type="number"
      min={
        this.state.principal / 100 +
            (this.state.principal * Number(this.state.interestRate)) / 100 / 12;
      }
      max = {
        this.state.principal +
            (this.state.principal * Number(this.state.interestRate)) / 100 / 12;
      }
    />
  )
}

Maintenant, dans ComponentOne, importons cette méthode depuis l'application et utilisons-la :

// A BETTER WAY
// Create 2 methods; one returns the min payment possible, the other the max:
getMinPmt = () => {
  let minPmt =
    this.cleanValue(this.state.principal / 100) +
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  let totalBalance =
    this.state.principal +
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  if (totalBalance <= 100 && totalBalance > 0) {
    minPmt = totalBalance;
  }
  return this.cleanValue(minPmt);
};
getMaxPmt = () => {
  let maxPmt =
    this.state.principal + 
    this.cleanValue(
      (this.state.principal * Number(this.state.interestRate)) / 100 / 12
    );
  return this.cleanValue(maxPmt);
};

// Set the min & max values of the input to what the respective method returns:
render() {
  return (
    <input
      type="number"
      min={this.getMinPmt()}
      max={this.getMaxPmt()}
    />
  )
}

Ainsi, après avoir accédé à la méthode changeFont, nous l'appelons lorsque l'on clique sur le h1 que nous rendons.

Puis-je rendre les choses conditionnellement dans React?

Oui! React consiste à rendre conditionnellement les choses. Il y a quelques façons de le faire. Vous pouvez le faire avec une méthode, puis définir la valeur d'un élément en retour () pour égaler cela. Alors, utilisons à nouveau l'exemple de la calculatrice de la dette. Disons que nous voulons afficher le message "Vous êtes sans dette!" Si la valeur de l'état du solde est de 0, et un bouton qui invite l'utilisateur à effectuer un autre paiement si le solde est supérieur à 0. Il y a quelques façons de le faire.

Définissons d'abord la valeur de cet élément sur ce qu'une méthode renvoie, en fonction des conditions:

npx create-react-app project-name
cd project-name
npm start

L'utilisation d'une méthode peut être avantageuse, car elle nous permet de garder le retour () plus concis. Nous pouvons également ajouter des conditions plus complexes, comme dans une fonction JS normale.

Nous pouvons également utiliser un opérateur ternaire à l'intérieur de return () pour accomplir la même chose:

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

Si la logique est assez simple pour être exprimée avec un opérateur ternaire et il est toujours facilement lu, allez-y et en utilisez un; Sinon, il est toujours acceptable d'utiliser une méthode.

Par exemple, si vous avez des conditions simples et que vous souhaitez afficher rien si les conditions ne sont pas remplies, vous pouvez le faire:

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

Si ce.state.totalbalance est strictement égal à 0, alors le message s'affichera. Sinon, alors rien ne s'affiche.

Comment puis-je déployer une application React?

J'ai déployé mon premier projet React via Netlify, auquel j'ai accordé l'accès au référentiel GitHub du projet. Avant le déploiement, vous devez exécuter NPM Run build pour créer l'application pour la production dans le dossier de construction. Il réagit en mode de production et optimise la construction pour les meilleures performances. Vous pouvez mettre à jour le site comme vous le feriez normalement un autre site.

Dans votre fichier index.html, vous devrez peut-être modifier quelques chemins, y compris l'URL Favicon, dans & lt; head & gt;. Vous ne devez que remplacer «% public_url%» par ./. Recherchez des instructions comme celle-ci dans & lt; head & gt ;:

---

donc il y avait quelques choses que j'ai apprises lors de la construction de mon premier projet React. Mes connaissances sur React ne sont pas encore en profondeur, donc si vous avez des suggestions pour moi ou des informations à ajouter, veuillez ajouter un commentaire. Si vous l'avez trouvé utile, veuillez laisser un joli commentaire ou laisser une réaction d'une sorte, et si vous pensez que quelqu'un d'autre pourrait bénéficier de la lecture, la transmettre.

Merci d'avoir lu!

Full react.js Documentation
Mon premier projet en action
Référentiel GitHub du projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html npm if for while include try using class operator Attribute JS function default constructor dom this history display input github kind everything Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn