This is my first day of the genwen challenge

preface

This article mainly throughcreate-react-appScaffolding fitreact-app-rewiredAdd some additional WebPack configuration to build a basevwThe H5 shelf

start

1, install,

NPX create-react-app juejin-react-h5(your project name)Copy the code

2. Next, let’s install the dependencies

    // Install the basic UI library andT-Mobile
    yarn add antd-mobile
    // install react-app-rewired customize-cra to add webpack configuration
    // These packages do not need to be packaged in the project, so they only need to be installed in the development environment
    yarn add react-app-rewired customize-cra -D
    // babel-plugin-import is a subcontracting tool
    yarn add babel-plugin-import -D

Copy the code

3, modify,`package.json`startup

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

Create one in the project root directory`config-overrides.js`Used to modify default configurations

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

module.exports = override(
    fixBabelImports("import", {
      libraryName: 'antd-mobile'.style: 'css',}))Copy the code

5. Modify app.js

import { Button } from 'antd-mobile'

function App() {
  return (
    <div className="App">
      <Button type="primary">button</Button>
    </div>
  );
}

export default App;
Copy the code

6. Start the project and access`localhost:3000`

 yarn start
Copy the code

7. Open the page and switch to mobile development mode to see the effect picture

8. Next we install the CSS precompile tool (sASS)

yarn add sass
Copy the code

9. Next, create a new app. SCSS file under SRC and write some test CSS

.p{
    color: red;
    width: 750px;
}
Copy the code

10. Finally, import app. SCSS in app.js and restart the project

When we see this, sASS is introduced successfully

11. Configure the SASS global variable

    // Install a loader and path first
    yarn add sass-resources-loader path -D
    const resolve = _path= > path.resolve(__dirname, _path)
    module.exports = override(
        fixBabelImports('import', {
            libraryName: 'antd-mobile'.style: 'css',
        }),
        adjustStyleLoaders(rule= > {
            if (rule.test.toString().includes('scss')) {
              rule.use.push({
                loader: require.resolve('sass-resources-loader'),
                options: {
                  resources: [resolve("./src/styles/theme.scss")]}}); }}))Copy the code

Next we create theme. SCSS file and write a color variable

    $red: red;
Copy the code

We’ll just use it in app.scSS

    .p{
        color: $red;
        width: 750px;
    }
Copy the code

It still works fine

12. Now let’s put the unit`px`Converted to`vw`!

    / / install postcss - px - to - the viewport
    yarn add postcss-px-to-viewport -D
Copy the code

13. Let’s modify this`config-overrides.js`The code in

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

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile'.style: 'css',
    }),
    adjustStyleLoaders(rule= > {
            if (rule.test.toString().includes('scss')) {
              rule.use.push({
                loader: require.resolve('sass-resources-loader'),
                options: {
                  resources: [resolve("./src/styles/theme.scss")]}}); }}), addPostcssPlugins([require("postcss-px-to-viewport") ({unitToConvert: 'px'.// The unit to convert, default is' px '
            viewportWidth: 750.// The viewport width of the design draft
            unitPrecision: 6.// The number of decimal places to keep after converting px to vw
            propList: [The '*'].// Those attributes can be converted to vw * for all
            viewportUnit: 'vw'.// Desired viewport unit // vw
            fontViewportUnit: 'vw'.// The viewport unit used by the font
            selectorBlackList: [].// CSS selectors that need to be ignored will not be converted to viewport units, using the original units such as PX
            minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
            mediaQuery: false.// Whether the unit in the media query needs to be converted
            replace: true.// Whether to replace the attribute value directly without adding the standby attribute
            exclude: [/node_modules/].// Ignore files under certain folders or specific files, such as files under 'node_modules'
            landscape: false.// Whether to add media query criteria based on landscapeWidth @media (Orientation: landscape)
            landscapeUnit: 'vw'     // The unit used in landscape})))Copy the code

14. When we started the project again, we could see that 750px in the P label had been changed to 100VW (because our viewport width was set to 750).

15, add`Lodash`Tool library, to achieve on-demand loading

    yarn add lodash
    // config-overrides. Js add lodash load on demand
    fixBabelImports("lodash", {
        libraryDirectory: "".camel2DashComponentName: false
    })
Copy the code

16, add`@`The alias

We often write in VUE@/xx/xxIn CRA

    
    const path = require("path")
    const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias }  = require("customize-cra")
    const resolve = dir= > path.resolve(__dirname, dir)
    module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile'.style: 'css',
    }),
        addWebpackAlias({
            ["@"]: resolve("./src")
        }),
        addPostcssPlugins([
            require("postcss-px-to-viewport") ({unitToConvert: 'px'.// The unit to convert, default is' px '
                viewportWidth: 750.// The viewport width of the design draft
                unitPrecision: 6.// The number of decimal places to keep after converting px to vw
                propList: [The '*'].// Those attributes can be converted to vw * for all
                viewportUnit: 'vw'.// Desired viewport unit // vw
                fontViewportUnit: 'vw'.// The viewport unit used by the font
                selectorBlackList: [].// CSS selectors that need to be ignored will not be converted to viewport units, using the original units such as PX
                minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
                mediaQuery: false.// Whether the unit in the media query needs to be converted
                replace: true.// Whether to replace the attribute value directly without adding the standby attribute
                exclude: [/node_modules/].// Ignore files under certain folders or specific files, such as files under 'node_modules'
                landscape: false.// Whether to add media query criteria based on landscapeWidth @media (Orientation: landscape)
                landscapeUnit: 'vw'     // The unit used in landscape})))Copy the code

17. Handle cross-domain

Cross-domain problems may exist in the process of interface joint adjustment between us and our back-end partners. The configuration of CRA is as follows

const path = require("path");

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

const resolve = _path= > path.resolve(__dirname, _path)

module.exports = {
    webpack: override(
        fixBabelImports('import', {
            libraryName: 'antd-mobile'.style: 'css',
        }),
        fixBabelImports("lodash", {
            libraryDirectory: "".camel2DashComponentName: false
        }),
        addWebpackAlias({
            [The '@']: resolve("./src")
        }),
        addPostcssPlugins([
            require("postcss-px-to-viewport") ({unitToConvert: 'px'.// The unit to convert, default is' px '
                viewportWidth: 750.// The viewport width of the design draft
                unitPrecision: 6.// The number of decimal places to keep after converting px to vw
                propList: [The '*'].// Those attributes can be converted to vw * for all
                viewportUnit: 'vw'.// Desired viewport unit // vw
                fontViewportUnit: 'vw'.// The viewport unit used by the font
                selectorBlackList: [].// CSS selectors that need to be ignored will not be converted to viewport units, using the original units such as PX
                minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
                mediaQuery: false.// Whether the unit in the media query needs to be converted
                replace: true.// Whether to replace the attribute value directly without adding the standby attribute
                exclude: [/node_modules/].// Ignore files under certain folders or specific files, such as files under 'node_modules'
                landscape: false.// Whether to add media query criteria based on landscapeWidth @media (Orientation: landscape)
                landscapeUnit: 'vw'     // The unit used in landscape}))),devServer: overrideDevServer([
        config= > ({
            ...config,
            proxy: {
                "/api": {
                    target: "http://localhost:4444".pathRewrite: { "^/api": ""}}}})]),}Copy the code

This is when we visit/apiThe request address is proxied to the interface at the beginninghttp://localhost:4444
🌰 /api/testIt’s going to be represented byhttp://localhost:4444/test

Real machine problem

Let’s fix ours firstapp.jsandapp.scss
We added 50 P tags to the page for testing

    import { Button } from 'antd-mobile'
    import '@/app.scss'

    function App() {
      return (
        <div className="App">
          {
            Array(50).fill(1).map((item, idx) => (<p className="p" key={idx}>A custom CSS style text, {IDX} bar</p>))}<Button type="primary">button</Button>
        </div>
      );
    }

    export default App;
Copy the code

And then we clearpLabel margin

.p{
    color: red;
    width: 750px;
    margin: 0;
    padding: 0;
}
Copy the code

Then we connect the phone to the wifi of the computer, access the IP of the computer,

Input the ifconfigCopy the code

Then open it with your phonehttp://10.5.9.250:3000/, you can see our page

At this point, we see that the iphoneX button is blocked by a small black bar at the bottom
The solution
- Add viewPort-fit =cover to the public/index.html mate tag <meta name="viewport" content="width=device-width, initial-scale=1,viewport-fit=cover" />
- Body adds CSS like this
```
  body {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
Copy the code
```
Then we restart the project and look at it again on the real machine

The little black bar at the bottom won’t block the button

19. Complete code

package.json

{
  "name": "juejin-react-h5"."version": "0.1.0 from"."private": true."dependencies": {
    "@testing-library/jest-dom": "^ 5.11.4." "."@testing-library/react": "^ 11.1.0"."@testing-library/user-event": "^ 12.1.10"."antd-mobile": "^ 2.3.4." "."path": "^ 0.12.7"."react": "^ 17.0.2"."react-dom": "^ 17.0.2"."react-scripts": "4.0.3"."sass": "^ 1.34.1"."web-vitals": "^" 1.0.1
  },
  "scripts": {
    "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test --env=jsdom"."eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app"."react-app/jest"]},"browserslist": {
    "production": [
      "0.2%" >."not dead"."not op_mini all"]."development": [
      "last 1 chrome version"."last 1 firefox version"."last 1 safari version"]},"devDependencies": {
    "babel-plugin-import": "^ 1.13.3"."customize-cra": "^ 1.0.0"."postcss-px-to-viewport": "^ 1.1.1"."react-app-rewired": "^ 2.1.8"."sass-resources-loader": "^ 2.2.1." "}}Copy the code

config-overrides.js

const path = require("path");

const { override,
    fixBabelImports,
    addWebpackAlias,
    addPostcssPlugins,
    adjustStyleLoaders,
    overrideDevServer } = require('customize-cra');

const resolve = _path= > path.resolve(__dirname, _path)

module.exports = {
    webpack: override(
        / / antd t-mobile subcontract
        fixBabelImports('import', {
            libraryName: 'antd-mobile'.style: 'css',})./ / lodash subcontract
        fixBabelImports("lodash", {
            libraryDirectory: "".camel2DashComponentName: false
        }),
        / / alias
        addWebpackAlias({
            [The '@']: resolve("./src")}),// Add loader global CSS
        adjustStyleLoaders(rule= > {
            if (rule.test.toString().includes('scss')) {
              rule.use.push({
                loader: require.resolve('sass-resources-loader'),
                options: {
                  resources: [resolve("./src/styles/theme.scss")]}}); }}),/ / turn vw px
        addPostcssPlugins([
            require("postcss-px-to-viewport") ({unitToConvert: 'px'.// The unit to convert, default is' px '
                viewportWidth: 750.// The viewport width of the design draft
                unitPrecision: 6.// The number of decimal places to keep after converting px to vw
                propList: [The '*'].// Those attributes can be converted to vw * for all
                viewportUnit: 'vw'.// Desired viewport unit // vw
                fontViewportUnit: 'vw'.// The viewport unit used by the font
                selectorBlackList: [].// CSS selectors that need to be ignored will not be converted to viewport units, using the original units such as PX
                minPixelValue: 1.// Set the minimum conversion value. If it is 1, only values greater than 1 will be converted
                mediaQuery: false.// Whether the unit in the media query needs to be converted
                replace: true.// Whether to replace the attribute value directly without adding the standby attribute
                exclude: [/node_modules/].// Ignore files under certain folders or specific files, such as files under 'node_modules'
                landscape: false.// Whether to add media query criteria based on landscapeWidth @media (Orientation: landscape)
                landscapeUnit: 'vw'     // The unit used in landscape}))),// Local development related
    devServer: overrideDevServer([
        config= > ({
            ...config,
            proxy: {
                "/api": {
                    target: "http://localhost:4444".pathRewrite: { "^/api": ""}}}})]),}Copy the code

20. Project AddressGithub.com/Tyf2345/jue…

reference

The iphone window problem developer.apple.com/design/huma…

Write in the last

When you see this, first of all you are a very persistent person, this article has no illustrations, it is all work, give yourself a thumbs up if you read it from beginning to end
React H5 react H5 react H5 react H5 React H5
You are welcome to comment and point out any imperfections

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CRA+ React-app-rewired builds the reactH5 shelf

preface

start

1, install,

2. Next, let’s install the dependencies

3, modify,`package.json`startup

Create one in the project root directory`config-overrides.js`Used to modify default configurations

5. Modify app.js

6. Start the project and access`localhost:3000`

7. Open the page and switch to mobile development mode to see the effect picture

8. Next we install the CSS precompile tool (sASS)

9. Next, create a new app. SCSS file under SRC and write some test CSS

10. Finally, import app. SCSS in app.js and restart the project

11. Configure the SASS global variable

12. Now let’s put the unit`px`Converted to`vw`!

13. Let’s modify this`config-overrides.js`The code in

14. When we started the project again, we could see that 750px in the P label had been changed to 100VW (because our viewport width was set to 750).

15, add`Lodash`Tool library, to achieve on-demand loading

16, add`@`The alias

17. Handle cross-domain

Real machine problem

19. Complete code

20. Project AddressGithub.com/Tyf2345/jue…

reference

Write in the last

CRA+ React-app-rewired builds the reactH5 shelf

preface

start

1, install,

2. Next, let’s install the dependencies

3, modify,package.jsonstartup

Create one in the project root directoryconfig-overrides.jsUsed to modify default configurations

5. Modify app.js

6. Start the project and accesslocalhost:3000

7. Open the page and switch to mobile development mode to see the effect picture

8. Next we install the CSS precompile tool (sASS)

9. Next, create a new app. SCSS file under SRC and write some test CSS

10. Finally, import app. SCSS in app.js and restart the project

11. Configure the SASS global variable

12. Now let’s put the unitpxConverted tovw!

13. Let’s modify thisconfig-overrides.jsThe code in

14. When we started the project again, we could see that 750px in the P label had been changed to 100VW (because our viewport width was set to 750).

15, addLodashTool library, to achieve on-demand loading

16, add@The alias

17. Handle cross-domain

Real machine problem

19. Complete code

20. Project AddressGithub.com/Tyf2345/jue…

reference

Write in the last

Related Posts

A beginner’s must-see for front-end project decentralization and modular thinking

ZooTeam Front-end Weekly | Issue 123

[Luffy]_ Brush Leetcode_15 (Lemonade Change) everyday

3, modify,`package.json`startup

Create one in the project root directory`config-overrides.js`Used to modify default configurations

6. Start the project and access`localhost:3000`

12. Now let’s put the unit`px`Converted to`vw`!

13. Let’s modify this`config-overrides.js`The code in

15, add`Lodash`Tool library, to achieve on-demand loading

16, add`@`The alias