Le principe est que vous avez installé un échafaudage réactif, si vous ne savez pas comment regarder ici, créez-le ~
Table des matières
Question 1 : Comment créer un composant hello simple ?
Question 3 : Comment ajouter des styles ?
Question 1 : Comment créer un composant hello simple ?
1. Définir un hello.js
// 引入react库，创建“外壳”组件app
import React, { Component } from "react";
// 定义hello组件并暴露
export default class Hello extends Component {
render() {
return <h3>hello,这是我的 第一个react组件！</h3>
}
}2. Introduire dans app.js
regarde l'effet
Question 2, que faire s'il y a trop de composants, ça a l'air désorganisé directement sous src. Comment y faire face?
Réponse : Créez un dossier de composants et placez les composants de réaction dans ce dossier.
Dans le même temps, le chemin importé doit également être modifié.
Question 3 : Comment ajouter des styles ?
Créer un nouveau fichier CSS
Ensuite, importez-le dans hello.js. Notez que le nom du suffixe ne peut pas être omis lors de l'introduction de css. Seuls les fichiers js ou jsx peuvent omettre le suffixe
Par conséquent, hello.css doit être introduit comme ceci , ce qui précède est une mauvaise introduction
Question 4 : Lorsqu'il y a de plus en plus de composants, les js et css de tous les composants sont mélangés, ce qui semble très désordonné.
Réponse : Vous pouvez recréer le sous-dossier Hello dans les composants, et mettre les js et css liés au composant hello. Le nom du fichier est mieux en majuscule, ce qui signifie qu'il s'agit d'un composant , ce qui est beaucoup plus pratique. Nous pouvons créer plusieurs dossiers pour gérer plusieurs composants
Question 5 : Le fichier js du composant dans react et le fichier js de la fonction pure se terminent tous les deux par js, comment faire la distinction ?
Méthode (1) : Nommer, mettre en majuscule la première lettre du fichier composant js, représentant le composant js
Méthode (2): nom du suffixe, vous pouvez directement changer le nom du suffixe du fichier js du composant en jsx, bien sûr, les suffixes js et jsx peuvent être omis lors de l'importation
Question 6 : On voit qu'il est gênant d'introduire des composants dans le fichier app.js, et qu'il y a beaucoup de noms en double, comment s'en sortir ?
C'est très simple, changez le nom, et changez uniformément le nom du composant sous le dossier à indexer
À ce stade, l'index peut être omis lors de son introduction, ce qui est beaucoup plus concis.
Question 7 : Lorsque deux composants contiennent le même nom de classe et sont introduits dans app.js en même temps, un conflit de style se produit, comment le résoudre ?
Nous créons d'abord un autre composant Test
Comme le composant hello, ajoutez une classe nommée title et définissez-la comme jaune
Introduit dans app.js
Enregistrez et regardez l'effet, nous voyons que les couleurs de fond des deux composants sont devenues les mêmes, et le style du nom de classe introduit plus tard est préféré
Comment résoudre? Cela implique le problème des conflits de style .
Méthode (1) : Vous pouvez nommer directement le nom CSS du composant hello comme index.module.css
Ensuite, la méthode changera lors de son introduction et vous devrez faire attention lors de son utilisation.
C'est normal après rafraichissement
Méthode (2) : utilisez less pour définir un nom de classe général pour chaque composant, puis imbriquez et écrivez des styles. Bien sûr, la deuxième méthode est souvent utilisée dans le développement réel, et la première méthode est relativement lourde.
.hello {
.title {
background: red;
}
}Question 8 : Lorsque nous écrivons un composant, nous devons introduire manuellement la bibliothèque de réaction à chaque fois, puis utiliser la classe class pour définir le composant, ce qui est assez gênant. Comment le résoudre ?
Réponse : installez un plug-in vsocde et recherchez dans vscode
Après l'installation, cliquez sur rcc (composant de classe réactif signifie le composant de classe en réaction) et le modèle de composant de classe apparaîtra
Après le retour chariot, modifiez le nom du composant
Knock rfc (composant de fonction de réaction signifie composant fonctionnel en réaction)
