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

Source: Internet
Author: User
Tags postcss

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.