Project description

This project is to meet the requirements of rapid construction of React based H5 project, integrating some basic functions, such as the use of preprocessor, routing configuration management, internationalization, etc., to save development time. The project is based on the create-React-app scaffolding. If you have any questions, please refer to the CRA documentation.

use

• Install dependencies

npm install
Copy the code

• Run locally

npm run start
Copy the code

• Packaged deployment

npm run build
Copy the code

directory

• √ Configure multiple environment variables
• √ Style preprocessing management
• √ Route configuration configuration
• √ Develop setup agents
• √ International management
• √ Production build packs
• √ Mobile adaptation
• To be continued

document

• ✅ Configure multiple environment variables

  Create new environment files in the root directory, such as.env.development,.env.test, and write variable values for different environments,! Note that variable names must start with REACT_APP_, otherwise they will not take effect

  REACT_APP_ENV=/api
  Copy the code

• ✅ style preprocessing management

  • The file ends with module. SCSS, importing style objects in JSX, using object syntax

  import testStyle from './index.module.scss'
  
  function Test() {
    return (
      <div className={testStyle['test-page']} >The word route nested under test</div>)}Copy the code

  • The file normally ends in SCSS, but the corresponding scope name must be specified in the file

  $name: 'home-page'; . # {$name}-test {
    color: red;
  
    .custom-color {
      color: skyblue; }}Copy the code

  function Home() {
    return (
      <div className='home-page-test'>I'm the content of the Home page<h3 className='custom-color'>Custom colors</h3>
      </div>)}Copy the code

• ✅ Route configuration configuration

  The react-router-config is used for configuration management. Note that the corresponding react-router (DOM) version cannot be the latest V5; otherwise, the react-router (DOM) version may be inappropriate

• ✅ develop the setup agent

  Create a proxysetup.js file in the SRC directory

  // https://www.cnblogs.com/echolun/p/15173956.html
  
  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      createProxyMiddleware(
        '/api', 
        {
          target: 'http://176.113.69.25:6208'.secure: false.changeOrigin: true.pathRewrite: {
            "^/api": ""}}))}Copy the code

• ✅ International management

  Internationalization management uses the React-I18Next and i18Next libraries. The former is extended on the basis of the latter. Therefore, in case of configuration problems, i18Next should be consulted first

  Add the dependent

  npm install react-i18next i18next --save
  / / at the entrance
  import { initReactI18next } from "react-i18next";
  const resources = {
    zh: {
      // Translation is the official way of writing, which is the object of internationalization
      translation: {
        "aaa": 123."obj": {
          "aaa": 456}}},// Other languages...
  }
  i18n.use(initReactI18next)
    .init({
      resources,
      // Access the language header from the local cache
      lng: getLanguage(),
      fallbackLng: "en"
    })
  Copy the code

  To switch between languages

  import { useTranslation } from "react-i18next";
  // Inside the component
  function Home() {
    const { t, i18n } = useTranslation()
  
    const onCheckoutLanguage = () = > {
      i18n.changeLanguage('en')}return (
      <div className='home-page-test'>
      <div onClick={onCheckoutLanguage}>{t('checkoutLanguage')}</div>
      </div>)}Copy the code

  Basic use, parameter passing

  <div>{t('welcome')}</div>
  <div>{t('user.name')}</div>
  <div>{t('user.password', { psd: 123456 })}</div>
  
  {{PSD}}}
  "user": {
    "name": "User name"."password": "User password: {{PSD}}"
  }
  Copy the code

• ✅ Build the production package and preview it locally

  After NPM run build # is complete, there is a local build directory, which is the result of the build NPMiServe-g serve-s build # Serve-g serve-s build #Copy the code

• ✅ Mobile adaptation

NPM I postCSs-pxtorem -d

//src/public/index.html
<body>
  <script>
    (function (doc, win) {
      var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if(! clientWidth)return;
        docEl.style.fontSize = 750 / 10 + 'px';
      };
      if(! doc.addEventListener)return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false); }) (document.window);
  </script>
  <div id="root"></div>
</body>
Copy the code

// src/config/webpack.config.js
const getStyleLoaders = () = >{...// After normalize, add postcss-pxtorem configuration
    'postcss-normalize'['postcss-pxtorem',
      {
        rootValue: 75.propWhiteList: [].minPixelValue: 2,}}]Copy the code

The project address

Github.com/RiCTT/react…

If you have good suggestions or ideas, you are welcome to feedback, thanks to Star

A link to the

• International – i18next
• Internationalization -react- i18Next Quick start
• Route configuration management Config
• Multi-environment configuration -create-react-app