2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Un ami m'a dit qu'il avait obtenu son diplôme et qu'il avait commencé un stage.Mais l'entreprise utilise toujoursVue, le leader a dit qu'il serait autorisé à l'utiliser après un certain tempsRéagirAvant de réaliser un projet, apprenez-le vous-même.
D'ailleurs, comme j'écris aussi un blog, autant en écrire un moi-même, j'espère que cela pourra aider les personnes dans le besoin.
Table des matières
1.1 Sélectionnez le répertoire et démarrez le terminal
1.2 Installer la commande create-react-app
1.4 Afficher les fichiers du répertoire
2 bibliothèques tierces qui seront certainement utilisées
2.1.1 Classe d'heure et de date
2.1.6 Classe de vérification régulière
2.1.8 Classe de données de données
2.1.9 Navigateur Classe de navigateur
Préprocesseur 2.2 less ou sass
2.3 bibliothèque de requêtes axios
2.4 Bibliothèque d'interface utilisateur
Vous pouvez trouver un dossier sur votre ordinateur comme répertoire pour pratiquer ce projet React, puis saisir « cmd » à l'URL du dossier, le terminal apparaîtra et vous pourrez également spécifier le répertoire cible :
C'est ici que vous entrez "cmd" et appuyez sur Entrée pour afficher la fenêtre contextuelle du terminal.
Exécutez la commande suivante, -g signifie l'installer globalement
npm install -g créer-react-app
Par exemple, nous voulons créer un fichier nommé js-outil-big-box-react projet, vous pouvez alors exécuter la commande suivante :
créer-une-application-réactive js-outil-big-box-react
Le terminal sera ensuite installé,L'installation peut être un peu lente, attendez patiemment, comme le montre la figure ci-dessous, une fois l'installation terminée :
- Le répertoire public stocke les fichiers HTML familiers et certains fichiers statiques requis ;
- Le répertoire src est un répertoire important pour le développement de projets.
- Plus bas, index.js est le fichier d'entrée.
- Vous pouvez essayer d'apporter quelques modifications dans App.js, puis vérifier l'effet de la page Web
Dans l'image ci-dessus, nous utilisons l'éditeur VSCode pour ouvrir le projet React. A ce moment, entrez la commande dans la console :
démarrage npm
Ensuite, le projet nous aidera activement à activer le navigateur,http://localhost:3000/L'adresse, puis vous pouvez voir l'icône React rotative et le projet est installé.
Une fois l'installation du projet terminée, le développement du projet commencera. Comme le dit le proverbe, si un travailleur veut bien faire son travail, il doit d'abord aiguiser son énergie.Avant le développement du projet, parlons de quelques éléments qui seront certainement utilisés dans le développement de projets front-end.Bibliothèques tierces .En utilisant ces bibliothèques tierces, elles peuvent nous aider à développerplus efficace。
Venez d’abord à l’adresse d’apprentissage de js-tool-big-box, cliquez ici :Adresse d'apprentissage de la bibliothèque d'outils js-tool-big-box
js-tool-big-box est presque une bibliothèque npm incontournable pour les projets de développement front-end. Elle possède des fonctions riches et est facile à utiliser, ce qui rend le développement front-end extrêmement efficace. Ses fonctions actuelles comprennent, sans s'y limiter :
- Conversion de l'heure et de la date ;
- Format horaire plus flexible ;
- Acquisition de temps plus personnalisée ;
- La période comprise entre un certain moment et maintenant (informations de retour plus détaillées)
- Déterminer s’il s’agit d’une année ordinaire ou d’une année bissextile ;
- Combien de jours y a-t-il dans un mois ?
- signe du zodiaque;
- jours fériés de l'année;
- Obtenez l'heure des principales villes du monde ;
- Obtenir la valeur du paramètre dans l'URL
- définir des cookies ;
- Obtenez des cookies ;
- Supprimer les cookies;
- Définir localStorage ;
- Obtenir un stockage local
- Anti-vibrations
- Manette de Gaz
- Des milliers séparés par des virgules ;
- Déterminez s’il est supérieur à 0 ;
- Déterminer si un entier est supérieur à 0 ;
- Générez des nombres aléatoires dans la plage spécifiée ;
- Générez un nombre aléatoire avec un nombre spécifié de chiffres ;
- Convertir les nombres en chinois minuscules ;
- Convertir les nombres en chinois majuscules ;
- chaîne inversée ;
- Henggang et petite bosse
- Henggang se transforme en une grosse bosse ;
- Comparaison des numéros de version ;
- Obtenez la longueur en octets d'une chaîne ;
- générer un uuid ;
- Obtenir le sexe, l'âge et la date de naissance en fonction du numéro d'identification ;
- Ajoutez des symboles spéciaux au milieu de la chaîne pour masquer les informations clés ;
- Conversion de lettres majuscules et minuscules ;
- Vérification du format des e-mails ;
- Vérification du format du numéro de téléphone portable ;
- Vérification du format de l'URL ;
- Vérification du format du numéro d'identification ;
- Vérification du format de l'adresse IP ;
- Validation du format du code postal ;
Déterminez s'il s'agit d'un caractère Unicode ;
Détecter la valeur de force du mot de passe ;
- Envoyer une requête jsonp ;
- Téléchargez la version purement fonctionnelle du fichier ;
- Télécharger des fichiers, récupérer + télécharger la version de la fonction ;
- Obtenez un nombre aléatoire de valeurs du tableau ;
- Copiez le texte dans le presse-papiers ;
- Déduplication de baie ;
- Obtenez des types de données plus détaillés ;
- Tri de tableaux numériques (ordre avant et arrière) ;
- Tri des tableaux d'objets (ordre avant et arrière)
- Déterminez si le navigateur actuel est mobile ;
- Déterminez si l'élément se trouve dans la plage visible ;
Obtenez si le navigateur actuel défile vers le haut ou vers le bas et obtenez la distance actuelle entre le haut et le bas ;
Activer et désactiver le plein écran ;
Obtenez l'agent utilisateur du navigateur et des informations détaillées ;
La manière traditionnelle d'écrire du CSS est relativement bas de gamme. L'utilisation de préprocesseurs comme less ou sass peut rendre le développement CSS plus efficace et est fortement recommandée.
Documents d'étude (Moins de démarrage rapide | Documentation chinoise Less.js - Site Web moins chinois (bootcss.com))
Généralement, les projets impliqueront une interaction avec le serveur, et à ce stade, vous pouvez utiliser axios pour envoyer des requêtes.
documentation d'apprentissage axios (Documentation chinoise axios | Site Web chinois axios (axios-js.com))
Pour React, s'il s'agit d'un développement côté C, nous espérons toujours pouvoir écrire manuellement des bibliothèques d'interface utilisateur relativement légères, mais s'il s'agit d'un développement côté B, nous recommandons Ant Design.
Document d'apprentissage sur la conception de fourmis (Ant Design - Un langage de conception d'interface utilisateur de niveau entreprise et une bibliothèque de composants React)
Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.
