Create-react-app is an excellent scaffolding (crA for short) for React, but the crA-generated project structure has a lot of configuration space. Other configurations are needed to better develop mobile Web applications.

Create a project NPX create-react-app react-template

Install the required packages

NPM install --save react-router-dom // CSS preprocessor NPM install --save node-sass // Change webpack NPM without eject Install --save-dev react-app-rewired customize-cra // Mobile UI library NPM install --save antd-mobile // postCSs-related NPM install NPM install --save postcss-px-to-viewport // Convert px to VW unit NPM install -- Save postCSs-write-SVG // Write SVG directly in CSS NPM install --save postCSs-viewport-units --save cssnano // Compress and clean CSS code NPM install --save cssnano-preset-advanced // Use NPM install --save for PRESET Postcss-preset -env // Fixes most CSS compatibility issuesCopy the code

Delete all files in the SRC directory.

Create under SRC:

  • Entry file: index.js
  • Route file: app-router.js
  • Static resource folders: static, static/images, static/style, static/style/reset.css
  • Component folder: Components
  • Page folder: Views
  • Interface folder: API
  • Plug-ins folder: plugins

Create in root directory:

  • Webpack changes the file: config-overrides. Js

Index. Js:

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './app-router'
import './static/style/reset.css'

ReactDOM.render(<AppRouter />, document.getElementById('root'))
Copy the code

App – the router. Js:

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

export default () => (
  <Router>
    <div>
        init router
    </div>
  </Router>
)
Copy the code

reset.css :

html { font-family: -apple-system,system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;  text-rendering: optimizeLegibility; box-sizing: border-box; The line - height: 1.15; -webkit-text-size-adjust: 100%; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } img { content: normal; } a { background-color: transparent; text-decoration: none; }Copy the code

The style reset is a personal preference and is for reference only.

The config – overrides. Js:

const { override, fixBabelImports, addPostcssPlugins } = require('customize-cra')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  addPostcssPlugins([
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
    }),
    require('postcss-aspect-ratio-mini')({}),
    require('postcss-px-to-viewport')({
      viewportWidth: 375, // (Number) The width of the viewport.
      viewportHeight: 667, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw', // (String) Expected units.
      selectorBlackList: ['.ignore'.'.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    }),
    require('postcss-write-svg')({
      utf8: false
    }),
    require('postcss-viewport-units')({}),
    require('cssnano')({
      preset: "advanced",
      autoprefixer: false."postcss-zindex": false})))Copy the code

Here is the postCSS and UI library ANTD configuration, for postCSS each plug-in purpose I have carried on the simple description above, using the window adaptation unit, if you want to know more, here may help you. For antD, which is mainly for on-demand loading in CRA, you can read here.

Public/index. HTML:

<script>
  if(! window.Promise) { document.writeln('< script SRC = "https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" " + '>' + '<' + '/' + 'script>');
  }
</script>
Copy the code

Fixed compatibility issues with promises that do not support ES6 on some machines.

Package. Json:

"scripts": {
    "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test --env=jsdom"."eject": "react-scripts eject"
}
Copy the code

To recap, use Sass as a CSS preprocessor. You can also use less or stylus for CSS preprocessing, but sASS has the best support and the preprocessor is pretty much the same. Use the route management page and make some simple partitions of the project directory for future maintenance iterations. Mobile compatible with Windows unit, it is secure enough on mobile, please feel free to use, configure the most popular UI framework ANTD in CRA use.

First of all, this is just a personal configuration that you can use as a reference, or if you don’t have a clue and are in a hurry to get started. I only learned React for a few days, so I never stepped on any pits. If there is a problem with react, please contact me and we can solve it together.