poemkit
PoemKit Stable
poèmekit " width="180" style="max-width: 100%;">
Un kit Web gratuit avec React pour une conception et un développement Web rapides via SSR. Il s'agit également d'une architecture micro-frontend. Utilisation de React, Redux, Router, Axios et Express. Ce projet a été démarré avec la bibliothèque nodejs. Le projet prend en charge les déploiements automatiques à partir d'un certain nombre de services d'hébergement de référentiels via pm2. poemkit fournit plus de 50 composants d'interface utilisateur intégrés pour créer des applications Web modernes.
poemkit peut fonctionner et se déployer via des commandes, cela nécessite toujours que du vrai code soit écrit derrière elles. Ces kits servent de composants d'interface utilisateur et de modules logiques qui peuvent être assemblés dans un véritable prototype de site Web ou d'application qui nécessitera toujours des fonctions de programmation pour les faire fonctionner dans le monde réel. poemkit répond aux exigences du webpack entièrement personnalisable.
? Vous pouvez également utiliser une bibliothèque de composants React UI autonome (basée sur BootStrap 5) Funda UI.
Pour une démo en ligne, veuillez consulter https://uiux.cc/poemkit
Le serveur fonctionne sur http://localhost:3000
poemkit /
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── ecosystem.config.js ------------------------- # for pm2
├── babel.config.js
├── tsconfig.json
├── webpack.config.js
├── package-lock.json
├── package.json
├── test/ --------------------------- # Unit Testing scripts
├── public/ --------------------------- # HTML template of Homepage
│ ├── index.html
│ ├── manifest.json
│ └── server/ ------------------------------- # PHP scripts used to the server for testing
│ └── assets/
├── dist/ ------------------------------- # Files compiled, used in the production environment
│ ├── css/
│ │ ├── poemkit .css
│ │ └── poemkit .min.css
│ └── js/
│ │ ├── poemkit .js
│ │ └── poemkit .min.js
├── src/
│ ├── client/
│ │ ├── client.js
│ │ ├── actions/
│ │ ├── reducers/
│ │ ├── helpers/
│ │ ├── services/
│ │ ├── router/
│ │ ├── components/ ------------------------- # Independent React components
│ │ │ ├── * /
│ │ │ ├── _utils/ ----------------------- # General utilities & snippets(js & css)
│ │ │ └── _plugins/ --------------------- # Third-party plugins
│ │ ├── views/ ------------------------------ # Website pages
│ │ │ ├── _pages/
│ │ │ └── _html/
│ └── server/
│ │ ├── app.js
│ │ ├── server.js
│ │ └── renderer.js
│ └── store/
│ │ └── createStore.js
│ └── config/
│ │ ├── tmpl-manifest.json ----------------- # `manifest.json` file template
│ │ └── websiteConfig.js ------------------- # website config
└──webpack.config.js pour utiliser le montage en mémoire) Vous devrez avoir une configuration de nœud sur votre machine. Cela affichera les distribuables construits vers ./dist/* et ./public/*.html .
Étape 1. Utilisez NPM (localisez votre répertoire actuel de projet et entrez la commande suivante.) ou téléchargez la dernière version depuis Github. Pour nodejs, vous devez installer certaines dépendances.
$ npm install poemkitOu clonez le dépôt pour obtenir tous les fichiers sources, y compris les scripts de build :
$ git clone git://github.com/xizon/ poemkit .git Étape 2. Tout d’abord, utilisez un chemin absolu dans votre répertoire de dossiers " poemkit /" .
$ cd /{your_directory}/ poemkit Étape 3. Avant de faire toutes les tâches de développement, assurez-vous que Node 10+ est installé. Après cela, exécutez le code suivant dans le répertoire principal pour installer les dépendances du module de nœud.
$ npm installL'environnement de test actuel est « Node 18+ », « npm 9+ ». Si l'installation des dépendances échoue (généralement parce que vous avez mis à niveau votre version de Nodejs, actuellement testée vers Node 18+), peut-être que la nouvelle version de npm entrera en conflit avec l'ancienne version de npm, veuillez utiliser la commande suivante pour installer les dépendances :$ npm install --legacy-peer-depsSi l'installation échoue toujours, veuillez utiliser cette méthode : supprimez devDependencies , les dépendances et peerDependencies dans
package.json, supprimez le fichierpackage-lock.jsonet réinstallez les dépendances :$ npm install --save-dev @testing-library/jest-dom @testing-library/[email protected] @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader clean-webpack-plugin cross-env css-loader css-minimizer-webpack-plugin eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react file-loader glslify-loader html-loader html-webpack-plugin identity-obj-proxy include-file-webpack-plugin jest jsdom jest-environment-jsdom json-loader log-timestamp mime-types mini-css-extract-plugin sass nodemon postcss prettier prettier-loader random-string raw-loader [email protected] safe-buffer sass-loader style-loader tar terser-webpack-plugin ts-jest ts-node tsconfig-paths typescript webpack webpack-cli webpack-dev-middleware webpack-dev-server $ npm install @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/preset-flow @babel/preset-react @babel/preset-typescript @babel/register axios babel-plugin-module-resolver compression cors express ignore-styles moment [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
Étape 4. Commandes couramment utilisées :
Application de débogage. Il peut être vérifié séparément en tant que TypeScript sans comportement de compilation ni d'empaquetage.
$ npm run checkPour utiliser Webpack pour regrouper des fichiers.
$ npm run build Exécutez les commandes suivantes pour les tests locaux et l’inspection du code. Vous pouvez voir que le serveur est en cours d'exécution. (Exécutez uniquement le serveur Express.). Utiliser Ctrl + C pour l'arrêter.
$ npm run devÉtape 5. Lorsque vous avez terminé, cela lancera un serveur accessible à partir de
http://localhost:3000Il est recommandé de regrouper le nouveau code avant le débogage.
Étape 6 (Facultatif). Déployer le serveur de nœuds sur le serveur d'hébergement
Veuillez exécuter la commande build avant le déploiement. (Si cela ne fonctionne pas en raison de l'autorisation Node, utilisez les commandes suivantes)
$ npm run deploy Arrêter les déploiements existants
$ npm run destroyÉtape 7 (Facultatif). Tests unitaires
$ npm run testNote:
a) ERREUR : la vérification de la mise à jour npm a échoué.
Solution:
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configb) ERREUR : la version 6.xx de Node Sass n'est pas compatible avec ^ 4.xx
Solution:
$ npm install [email protected]c) Si vous mettez à niveau la version de Node, veuillez exécuter le code suivant :
$ npm install $ npm rebuild node-sass
Démarrez l'application Reactjs avec PM2 en tant que service (ne fonctionne que si vous utilisez Node v13.9.0 ou supérieur.)
La version Node14+ sera installée ici
$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install nodejs
$ node --version # v14.16.1
$ npm --version # 6.14.12
$ which node babel-node # check the location of node and babel-node $ sudo npm install pm2@latest -g$ sudo npm install -g babel-cli
$ sudo npm install -g @babel/core @babel/cli @babel/preset-env $ sudo npm install -g typescript ts-node$ sudo pm2 install typescript # into your `" poemkit /"` folder directory.
$ cd /{your_directory}/ poemkit
# run app
$ pm2 start ecosystem.config.js
# Detect available init system, generate configuration and enable startup system, and you can check the status of the same using
$ pm2 startup
$ systemctl status pm2-root
$ pm2 start /{your_directory}/ poemkit /ecosystem.config.js --restart-delay=3000
$ pm2 save
# other commands
$ pm2 restart ecosystem.config.js
$ pm2 stop ecosystem.config.js
$ pm2 delete ecosystem.config.js
$ pm2 list
$ pm2 logsQuelques solutions aux problèmes pouvant survenir lors du déploiement de l'application avec NPM ou PM2 sur un serveur cloud :
a）ERREUR : autorisation refusée, accès à '/usr/lib/node_modules'
Solution:
chmod -R a+x node_modulesb）ERREUR : tas JavaScript saturé de mémoire
Il existe une limite standard stricte pour l'utilisation de la mémoire dans la V8, qui doit être d'un maximum de ~ 1 Go (32 bits) et ~ 1,7 Go (64 bits), si vous ne l'augmentez pas manuellement.
Solution:
export NODE_OPTIONS=--max_old_space_size=4096c) Erreur : EACCES : autorisation refusée, mkdir '/root/.pm2/xxxx'
Solution:
En général, évitez simplement d'utiliser
NPMpour exécuter des commandes PM2.Vous pouvez toujours essayer ce qui suit :
Assurez-vous de tuer toute instance PM2 avant de démarrer PM2 en mode sans démon (pm2 kill).
# re-install PM2 (optional) sudo npm i -g pm2 # if pm2 was reinstalled, ts-node must be reinstalled (optional) sudo npm install -g ts-node@latest # clear all pm2 instances pm2 kill # then restart it pm2 start xxxxxx
Vous avez créé une application React de base à partir d'ici, vous devez alors déployer une application React sur le serveur Web Apache ou Nginx. Veuillez vous référer au réseau pour le tutoriel sur la configuration du proxy.
Maintenant que l’application est prête à être déployée, il faut préparer la fin Nginx. Si Nginx n'est pas installé, il peut être facilement installé avec le système de packaging apt en exécutant les deux commandes suivantes :
$ sudo apt update
$ sudo apt install nginxou
$ sudo yum install nginx -yDémarrez Nginx :
$ systemctl start nginxCommencez au démarrage :
$ systemctl enable nginxConfigurer un pare-feu à l'aide de FirewallD sur CentOS 8 :
$ firewall-cmd --permanent --zone=public --add-service=http
$ firewall-cmd --permanent --zone=public --add-service=https
$ firewall-cmd --permanent --zone=public --add-port=3000/tcp
$ firewall-cmd --reload
$ systemctl restart nginx Nous pouvons vérifier si Nginx fonctionne sur le système :
$ systemctl status nginx Très bien, maintenant que le service Nginx a démarré avec succès, nous pouvons continuer et modifier le fichier de configuration trouvé dans /etc/nginx/conf.d/default.conf . C'est ici que nous indiquerons au domaine de lancer la bonne application React :
$ vi /etc/nginx/conf.d/default.confA la fin du fichier, ajoutez :
server {
listen 443 ssl ;
server_name backend1.example.com ;
...
location / {
proxy_set_header Host $http_host ;
proxy_pass http://{YOUR_IP}:3000 ;
}
}Après avoir ajouté ces lignes au fichier, nous devons redémarrer le service Nginx :
$ systemctl restart nginxIl n'y aura probablement aucun message si le service a redémarré avec succès. Sinon, il crachera des lignes de messages d'erreur.
Modifiez le fichier ./src/server/app.js , utilisez https.createServer([options][, requestListener]) pour envelopper le service express, veuillez consulter l'exemple de code ci-dessous :
import path from 'path' ;
import https from 'https' ;
const cert = fs . readFileSync ( path . join ( __dirname , '../../path/bundle.crt' ) ) ;
const key = fs . readFileSync ( path . join ( __dirname , '../../path/ca.key' ) ) ;
const server = https . createServer ( { key : key , cert : cert } , app ) ;
...
app . get ( '/' , ( req , res ) => { res . send ( 'this is an secure server' ) } ) ;
...
server . listen ( port , ( ) => console . log ( `Frontend service listening on port: ${ port } , access https://localhost: ${ port } in the web browser` ) ) ; Pour lever l'ambiguïté dans votre webpack.config.js entre les versions de développement et de production, vous pouvez utiliser des variables d'environnement.
Si vous souhaitez prendre en compte à la fois OS X et Windows, vous pouvez utiliser l'outil tiers cross-env
Étape 1. Exécutez la commande pour installer cross-env
$ npm install --save-dev cross-env Étape 2. Plus loin dans le fichier package.json dans les scripts, nous indiquerons la commande prête à l'emploi pour l'assemblage du webpack dans la version de production
"scripts" : {
"dev" : " cross-env NODE_ENV=development nodemon --require ignore-styles --exec ts-node -r tsconfig-paths/register ./src/server/server.js " ,
"build" : " cross-env NODE_ENV=production webpack --progress --mode production "
} Où, via cross-env, définissez la variable et la valeur NODE_ENV=xxx , puis nous obtenons cette variable lors de l'exécution du webpack
Étape 3. Plus loin dans le fichier de configuration webpack.config.js appliquons cette vérification du processus objet et d'autres propriétés env à notre variable NODE_ENV :
if ( process . env . NODE_ENV === 'production' ) {
// .. тwe apply (or add) some kind of plugin
} Modifiez le modèle par défaut ./src/client/views/_html/index.html . Il sera automatiquement généré sous la forme ./public/index.html . Il contient les balises HTML que React Helmet doit utiliser, par exemple :
<!DOCTYPE html >
< html {{helmetHtmlAttributes}} >
< head >
< meta charset =" utf-8 " />
{{helmetTitle}}
<!-- manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
============================================= -->
< link rel =" manifest " href =" @@{website_root_directory}/manifest.json " />
<!-- Mobile Settings
============================================= -->
< meta name =" viewport " content =" width=device-width, initial-scale=1, maximum-scale=1 " />
<!-- Mobile Settings end -->
<!-- Compatibility
============================================= -->
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
<!-- Compatibility end -->
<!-- Core & Theme CSS
============================================= -->
< link rel =" stylesheet " href =" @@{website_root_directory}/dist/css/ poemkit .min.css?ver=@@{website_hash} " />
<!-- Core & Theme CSS end -->
<!-- Overwrite Font Files
*
* The fonts extracted with `mini-css-extract-plugin` may not load correctly
* Font files in `dist/fonts/` are fetched automatically by `file-loader`, you can configure webpack.config.js to name them.
============================================= -->
< style >
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-solid-900.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.svg#fontawesome') format('svg');
}
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-brands-400.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.svg#fontawesome') format('svg');
}
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-regular-400.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.svg#fontawesome') format('svg');
}
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
</ style >
<!-- Overwrite Font Files end -->
<!-- SEO
============================================= -->
{{helmetMeta}}
{{helmetLink}}
< meta name =" generator " content =" @@{website_generator} " />
< meta name =" author " content =" @@{website_author} " />
<!-- SEO end -->
<!-- Favicons
============================================= -->
< link rel =" icon " href =" @@{website_root_directory}/assets/images/favicon/favicon-32x32.png " type =" image/x-icon " />
< link rel =" shortcut icon " href =" @@{website_root_directory}/assets/images/favicon/favicon-32x32.png " sizes =" 32x32 " />
< link rel =" apple-touch-icon " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-57x57.png " />
< link rel =" apple-touch-icon " sizes =" 72x72 " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-72x72.png " />
< link rel =" apple-touch-icon " sizes =" 114x114 " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-114x114.png " />
<!-- Favicons end -->
</ head >
< body {{helmetBodyAttributes}} >
< noscript >
You need to enable JavaScript to run this app.
</ noscript >
< div id =" app " > {{reactApp}} </ div >
<!-- Your Plugins & Theme Scripts
============================================= -->
< script >
var REVISION = "@@{website_version}" ,
APP_ROOTPATH = {
"templateUrl" : "@@{website_root_directory}" , //If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog" (but no trailing slash)
"homeUrl" : "" , //Eg. https://uiux.cc
"ajaxUrl" : "" //Eg. https://uiux.cc/wp-admin/admin-ajax.php
} ;
</ script >
< script > window . __PRELOADED_STATE__ = { { preloadedState } } ; </ script >
< script src =" @@{website_root_directory}/dist/js/ poemkit .min.js?ver=@@{website_hash} " > </ script >
<!-- Your Plugins & Theme Scripts end -->
</ body >
</ html > Le fichier ./public/manifest.json est automatiquement généré en fonction de ./src/config/tmpl-manifest.json
Vous pouvez configurer la résolution du module en ajoutant solve au webpack.config.js . Si vous utilisez un chemin relatif lorsque vous importez un autre module, cela serait gênant car vous devrez comprendre tous les chemins relatifs. Par conséquent, vous pouvez ajouter un alias pour vous faciliter la tâche.
webpack.config.js :
...
const alias = {
pathConfig : './src/config' ,
pathComponents : './src/client/components' ,
pathRouter : './src/client/router' ,
pathHelpers : './src/client/helpers' ,
pathServices : './src/client/services' ,
pathReducers : './src/client/reducers' ,
pathPages : './src/client/views/_pages' ,
pathActions : './src/client/actions' ,
pathServer : './src/server' ,
pathStore : './src/store'
} ;
...
resolve : {
extensions : [ '.js' , '.jsx' , '.ts' , '.tsx' , '.scss' , '.sass' ] ,
alias : {
// specific mappings.
// Supports directories and custom aliases for specific files when the express server is running,
// you need to configure the `babel.config.js` and `tsconfig.json` at the same time
'@/config' : path . resolve ( __dirname , alias . pathConfig ) ,
'@/components' : path . resolve ( __dirname , alias . pathComponents ) ,
'@/router' : path . resolve ( __dirname , alias . pathRouter ) ,
'@/helpers' : path . resolve ( __dirname , alias . pathHelpers ) ,
'@/services' : path . resolve ( __dirname , alias . pathServices ) ,
'@/reducers' : path . resolve ( __dirname , alias . pathReducers ) ,
'@/pages' : path . resolve ( __dirname , alias . pathPages ) ,
'@/actions' : path . resolve ( __dirname , alias . pathActions ) ,
'@/server' : path . resolve ( __dirname , alias . pathServer ) ,
'@/store' : path . resolve ( __dirname , alias . pathStore ) ,
}
} ,
... babel.config.js :
...
"plugins" : [
[ "module-resolver" , {
"root" : [ "./src" ] ,
"alias" : {
"@/config" : "./src/config" ,
"@/components" : "./src/client/components" ,
"@/router" : "./src/client/router" ,
"@/helpers" : "./src/client/helpers" ,
"@/services" : "./src/client/services" ,
"@/reducers" : "./src/client/reducers" ,
"@/pages" : "./src/client/views/_pages" ,
"@/actions" : "./src/client/actions" ,
"@/server" : "./src/server" ,
"@/store" : "./src/store"
}
} ]
]
. . . tsconfig.json :
{
"compilerOptions" : {
"baseUrl" : " ./src " ,
"paths" : {
"@/config/*" : [ " config/* " ],
"@/components/*" : [ " client/components/* " ],
"@/router/*" : [ " client/router/* " ],
"@/helpers/*" : [ " client/helpers/* " ],
"@/services/*" : [ " client/services/* " ],
"@/reducers/*" : [ " client/reducers/* " ],
"@/pages/*" : [ " client/views/_pages/* " ],
"@/actions/*" : [ " client/actions/* " ],
"@/server/*" : [ " server/* " ],
"@/store/*" : [ " store/* " ]
}
}
} package.json :
{
"jest" : {
"testEnvironment" : " jsdom " ,
"moduleNameMapper" : {
" \ .(css|less|scss|sass)$" : " identity-obj-proxy " ,
"^@/config/(.*)" : " <rootDir>/src/config/$1 " ,
"^@/components/(.*)" : " <rootDir>/src/client/components/$1 " ,
"^@/router/(.*)" : " <rootDir>/src/client/router/$1 " ,
"^@/helpers/(.*)" : " <rootDir>/src/client/helpers/$1 " ,
"^@/services/(.*)" : " <rootDir>/src/client/services/$1 " ,
"^@/reducers/(.*)" : " <rootDir>/src/client/reducers/$1 " ,
"^@/pages/(.*)" : " <rootDir>/src/client/views/_pages/$1 " ,
"^@/actions/(.*)" : " <rootDir>/src/client/actions/$1 " ,
"^@/server/(.*)" : " <rootDir>/src/server/$1 " ,
"^@/store/(.*)" : " <rootDir>/src/store/$1 "
},
"transform" : {
"^.+ \ .(js|jsx)$" : " babel-jest " ,
"^.+ \ .(ts|tsx)?$" : " ts-jest "
}
}
} Utilisez la sortie trouvée dans webpack.config.js pour configurer les paramètres liés à la bibliothèque comme le type de module et l'espace de noms.
...
const globs = {
port : 8080 ,
examples : 'public' ,
build : 'src/client' ,
dist : 'dist'
} ;
...
output : {
path : path . resolve ( __dirname , './' + globs . dist + '/js' ) ,
filename : '[name].js'
} ,
... Vous pouvez mettre à jour les espaces réservés dans les modèles en modifiant la configuration des informations sur le site de package.json . Comme ça:
{
"author" : " UIUX Lab " ,
"name" : " poemkit " ,
"email" : " [email protected] " ,
"version" : " 1.0.0 " ,
"projectName" : " poemkit " ,
"createdInfo" : " UIUX Lab (https://uiux.cc) " ,
"projectURL" : " https://uiux.cc " ,
"description" : " React toolkit for building a full website that also is a Micro-Frontend Architecture " ,
...
} Configuration des itinéraires, qui est également la navigation principale du site (sans compter la configuration des itinéraires imbriqués qui seront configurés sur la page dans la navigation principale). Accès à ./src/client/router/RoutesConfig.js .
Certains scripts du routeur peuvent être modifiés dans le fichier ./src/client/router/App.js .
Certains scripts côté serveur peuvent être modifiés dans le fichier ./src/server/renderer.js .
Pour exécuter à la fois le serveur et l'application React, nous devons ajouter la clé proxy à package.json . Nous avons déjà configuré notre serveur pour qu'il s'exécute sur le port 3000, alors pointez le proxy vers localhost:3000 .
{
"proxy" : " http://localhost:3000 " ,
...
}PropTypes pour vérifier le type : $ npm run devEnsuite, vous pouvez utiliser le code JavaScript suivant pour le déboguer. Afficher les messages d'erreur et d'avertissement dans le terminal.
import PropTypes from "prop-types" ;
import React , { Component } from 'react' ;
export default class YourComponentName extends Component {
public static propTypes = { } ;
constructor ( props ) {
super ( props ) ;
}
render ( ) { ... }
}
if ( process . env . NODE_ENV === 'development' ) {
YourComponentName . propTypes = {
displayEnable : PropTypes . bool . isRequired ,
htmlString : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . object ] )
}
} L'application charge par défaut certaines bibliothèques tierces (icônes, animations, moteurs 3D, etc.), vous pouvez les charger selon vos besoins, ou modifier le fichier de configuration. Accès à ./src/client/components/_plugins/
Les plug-ins tiers sont utilisés par défaut avec les composants personnalisés et vous pouvez également les supprimer.
Modifiez le répertoire racine du site Web afin qu'il puisse être utilisé lorsque vous téléchargez le projet dans un autre répertoire. Modifiez la clé rootDirectory du ./src/config/websiteConfig.js .
Si le fichier se trouve dans le répertoire racine, vous pouvez le laisser vide. Si vous êtes dans un autre répertoire, vous pouvez écrire : "/blog". (pas de barre oblique finale)
{
"rootDirectory" : " "
} L'adresse du site (URL) est généralement utilisée pour l'optimisation du référencement. Modifiez la clé siteUrl du ./src/config/websiteConfig.js . L'URL sera nommée https://domain-name.com (pas de barre oblique finale ni de sous-répertoire)
{
"siteUrl" : " "
} Modifiez les URL API du site Web. Modifiez l' API clé du ./src/config/websiteConfig.js , comme indiqué ci-dessous :
{
"API" : {
"RECEIVE_DEMO_LIST" : " https://apiurl1.com " ,
"RECEIVE_DEMO_LISTDETAIL" : " https://apiurl2.com "
}
}Trouver des bugs, envoyer des pull request ou améliorer nos documents - toute contribution est la bienvenue et hautement appréciée. Pour commencer, consultez nos directives de contribution. Merci!
sorties
| Chrome | Firefox | Bord | IE | Safari | Opéra | IOS | Androïde |
|---|---|---|---|---|---|---|---|
| >= 49 | >= 45 | >=14 | >=11 | >= 9 | >= 30 | >=10 | >=4,4 |
Licence sous le MIT.
