How to use Facebook's Create-react-app scaffolding to create an ant design mobile-based project

Tag: Address read Rman LAN add value public UID path

Introduction:

Create-react-app is a global command-line tool released by Facebook to create a new project.

Usually when we start to do a react Web or app project, we take advantage of some of the dependencies that npm or yarn installs on our projects, and then write Webpack.config.js , a series of complex configuration, set up a good development environment after writing SRC source code.

Now, if you want to build a complete react project environment, you don't have to do many things yourself, and with Create-react-app tools, you can easily configure good one react projects.

Global installation Create-react-app

1 npm i create-react-app-g

View Code

Create an application

1 Create-react-app ProjectName

View Code

Then you can see the directory structure after the creation

my-app/  --readme.md  --node_modules/  --package.json  --. gitignore  --public/  ----- Favicon.ico  -----index.html  --src/  -----app.css  -----app.js  -----App.test.js  ----- Index.css  -----index.js  -----logo.svg  

you will find in the entire project folder, and there is no Webpack.config.js files, you only need to execute them in the project directory . NPM Run Eject command, you will see him prompt you Is you sure want to eject? This is permanent. Enter Y and then enter to open the project folder you will find two more directories (public, scripts), like this:

Try running the project, enter NPM run start, and the browser will automatically open a page with an address of http://localhost:3000, with a port number of 3000.

Here, a react project has basically been built, and now we're introducing the ant Design Mobile framework for the project.

using Yarn Installation:    yarn add antd-Mobile using NPM installation:    install antd-mobile-d

Some other development dependencies are installed

Yarn add--dev babel-plugin-import [email protected]0.3. 1  Less less-loader postcss-pxtorem

Next is the configuration of the project:

Open the webpack.config.dev.js file in the Config folder and find it in webpack.config.dev.js exclude Append two lines of code for loading less and svg files

Module.exports = {    module: {        rules: [            ...            {                exclude: [                  /\.html$/,                  /\.js$/,                  /\.json$/,                  /\.  less $/,// append                  /\.svg$/,// append                 ],                ...            }        ]    }}

Add on-Demand load file processing plug-in

Module.exports = {    module: {        rules: [            {                /\. JS|JSX) $/,                ...                Options: {                  // append                   plugins: [                    ['import ] "antd-mobile'true  }],                  ],                  ...},              },        ]    }}

Add SVG processing

Module.exports ={module: {rules: [... {test:/\. (SVG) $/I, loader:'Svg-sprite-loader', include: [Require.resolve ('Antd-mobile'). Replace (/warn\.js$/,"'),//svg directory used by Antd-mobilePath.resolve (__dirname,'.. /src/'),//The personal SVG file directory, if you have SVG needs to be configured here                ]              },            ...        ] }}

Add less processing

Module.exports ={module: {rules: [... {test:/\. Less$/, use: [Require.resolve ('Style-loader'), Require.resolve ('Css-loader'), {loader:require.resolve ('Postcss-loader'), Options: {ident:'Postcss',// https://webpack.js.org/guides/migrating/#complex-optionsPlugins: () =[Autoprefixer ({browsers: ['Last 2 versions','Firefox ESR','> 1%','IE >= 8','IOS >= 8','Android >= 4'],}), Pxtorem ({rootvalue: -, Propwhitelist: []})],},}, { Loader:require.resolve ('Less-loader'), Options: {modifyvars: {"@primary-color":"#1DA57A" },                    },                  },                ],              }            ...        ] }}

Prior to this postcss-pxtorem , the module must be introduced for PX to REM

Const PXTOREM = require (' Postcss-pxtorem ');

Restart the project, but you will find that react's logo is gone. At this point, it is Antd-mobile 's turn to shine.

　　Imported in Src/app.js antd-mobile , the Icon code is as follows:

　　

Import React, {Component} from ' React 'antd-mobile './logo.svg'./app.css '; class App Extends Component {  render () {    return  (      <div classname= "App" >        <div Classname= "App-header" >          <icon Type={logo}/>                    <code>src/App.js</code> and save to Reload.         </p>      </div>    );   default APP;

Finally, using the HD solution provided by Antd-mobile, You can refer to the official documentation or follow the steps below:

1. 　　Download uncompressed viewport.js or in a compressed version of Viewport.min.js
   
2. 　　Index.html in the public directory to introduce the download good JS, please write to all CSS references, otherwise some Android problems, and do not set the meta-tag viewport
3. Open Config/webpack.config.dev.js, add a new line of code

{test:/\.css$/, use: [Require.resolve (' Style-loader '), {loader:require.resolve (' Css-loader '), Options: {importloaders:1,}}, {Loader:require.resolve (' Postcss-loader '), Options: {ident:' Postcss ', Plugins: ()=[Require (' Postcss-flexbugs-fixes '), Autoprefixer ({browsers: [' >1% ',                              ' Last 4 versions ',                              ' Firefox ESR ',                              ' Not IE < 9 ',//React doesn ' t support IE8 anyway], Flexbox:' no-2009 ',}), Pxtorem ({rootvalue:Propwhitelist: []})//New                  ],              },          },      ],  },

Restart the project and you will find that the CSS unit has been converted to REM by PX.

　　

How to use Facebook's Create-react-app scaffolding to create an ant design mobile-based project