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:
- Download uncompressed viewport.js or in a compressed version of Viewport.min.js
- 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
- 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