React, one step at a time

No.1🕳 React project introduces image, less, CSS, etc error

Manual build webpack project, initially you may not have many loaders installed!

So you need to install various loaders, such as style-loader, CSS-loader, url-loader

{
   test: /\.css$/.loader: 'style-loader! css-loader'.exclude: [
      path.resolve(__dirname, '.. /node_modules')]}, {test: /\.(png|jpg|gif|jpeg)$/.loader: 'url-loader? limit=8192'.exclude: [
      path.resolve(__dirname, '.. /node_modules')]}Copy the code

The loader can be used to install images and CSS. The loader can be used to install images and CSS.

No.2 🕳 React project introduces images

It’s just a picture. I came up here

<img src=".. /.. /assets/logo.png" alt="." />Copy the code

The results showed thatWhat’s up?

React and ES6 are closely related, and ES6 does not support writing image paths directly inside the <img /> tag.

1. The import mode:

   import logo from '.. /.. /assets/logo.png'
   
   <img src={logo} alt="" />
   Copy the code

2. The require:

   <img src={require('.. /.. /assets/logo.png')} alt="" />Copy the code

No.3 🕳 node_modules file loading failure, such as Antd, Katex plugin error

This is because the first hole has not been filled in yet.

Do you see that exclude? Delete this sentence and add “whitelist” to the folder where you want to use loader’s NPM package as follows:

This will cause the files in the NPM package to load properly.

No.4 🕳 Failed to import the iconfont local file

The initial introduction in app.js will not work

Not all loader is installed, still want to drop?

It turned out that these were all packed files! To make the packaged style work, you need to use the extract-text-webpack-plugin to package the style file separately, and the packaged output file is specified by the output attribute in the configuration file.

Webpack treats all static resources as modules, such as CSS, LESS, JSX, images, fonts, etc., so that they can be managed uniformly. Loader and ExtractTextPlugin plug-ins are introduced for Webpack.

A plug-in functions like a Loader in that it is a file handler, but unlike a Loader, it is not a handler for a specific type of file, but a handler for the larger dimension of the entire packaging process. For example, the JS compression plugin UglifyJsPlugin compresses the packed JS code. (CSDN blogger DoomLiu is quoted here)

Not much BB, see how to use it!

This allows you to reference it in your project.

No.5 🕳 Best not to use Marterial-UI

Why? Because all the components of the UI library are styled inline! Inline! Then you can’t change the style. It doesn’t even have a class.

Highly recommend Antd, Chinese, Ali, nothing wrong.

For Antd, babel-plugin-import is recommended to be introduced on demand, which saves performance and is very convenient

First CNPM I babel-plugin-import –save-dev

Then modify the.babelrc file

{
  "plugins": [["import", { "libraryName": "antd"."libraryDirectory": "es"."style": "css" }] // `style: true'less file will be loaded]}Copy the code

And then you can just use it like this

Otherwise you have to write:

No.6 🕳 About ESlint…

ESlint often gets confused by some bizarre requirements, such as when I create an empty tag during development, I will report an error, big man, I have to step by step, what’s the rush, so I want to remove this rude restriction!

After installing ESlint,.eslintrc files are automatically created in your folder. You can see many rules like this in.eslintrc files:

The simple way to write this is:

"no-console": [0].Copy the code

0 indicates the shutdown rule, 1 indicates a warning, and 2 indicates an error

Also, what if you import an external JS file that has hundreds of errors and you don’t want to change them?

Create a new.eslintignore in the root directory. Done!

No.7 🕳 Check the 360 browser

Now 360 browser is getting harder and harder to distinguish, 360 browser after a certain update, the kernel display string is the same as IE browser, but sometimes it still has a bug that IE does not have…

is360() {/ / application/VND. Chromium. The remoting - viewer May 360 characteristiclet is360 = _mime('type'.'application/vnd.chromium.remoting-viewer')
    if (isChrome() && is360) {
      return true// Check if it is Google kernel (360 and other browsers can be excluded)function isChrome() {
      let ua = navigator.userAgent.toLowerCase()
      return ua.indexOf('chrome') > 1} // Test mimefunction _mime(option, value) {
      var mimeTypes = navigator.mimeTypes
      for (var mt in mimeTypes) {
        if (mimeTypes[mt][option] === value) {
          return true}}return false}}Copy the code

One more little thing…

Now that the development of the project is completed, my only feeling is that I need to read more books and read more official documents. I only have a superficial understanding of React. There is Webpack, must be a system of learning!

There is no end to learning!