Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how react supports ie8". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how react supports ie8" can help you solve the problem.

In react, the highest version that supports ie8 is the "react@0.14" version. If it is higher than this version, it is not compatible with ie8; you can use the method of adding "es5-shim.js" and "es5-sham.js" to the "index.html" file to make react compatible with ie8.

This tutorial operating environment: windows10 system, ECMAScript version 6. 0, Dell G3 computer.

React almost supports ie8.

In the official information released by react, the highest version of IE8 it supports is the react@0.14 version.

There will be some problems if we are higher than this version, and it is not compatible with our version, so in the process of using it, we should make sure that the react version is larger than the react0.14 version.

Of course, the official compatible method is to add es5-shim.js and es5-sham.js to our index.html file.

We also need to make sure that we are using a version of jQuery that is not greater than jQuery2.0, because jQuery2.0 and above are not supported in IE8. If you are using the bootstrap framework, then our version of jQuery should be at least a version above jQuery1.9.

React is a JavaScript library released by Facebook to build a user interface. React is mainly used to build UI, and many people think that React is the V (view) in MVC. React has high performance, the code logic is very simple, more and more people have begun to pay attention to and use it.

ReactJS is a set of JavaScript Web libraries built by Facebook and mainly used to build high-performance and responsive user interfaces. React is responsible for solving one of the common challenges faced by other javascript frameworks, namely, the handling of large data sets. With the ability to use virtual DOM and use the patch installation mechanism to re-render only the dirty part of the DOM when changes occur, React is able to perform much faster than other frameworks.

Expand knowledge:

Find the method of React compatible with IE8 on the Internet, and found that many projects are compatible, and all of them have been modified successfully, but when I change my framework according to their modification method, I still find a lot of details different from theirs. Here is a summary of the changes:

1. According to the official information released on Weibo, the highest version that supports ie8 is the react@0.14 version, and if it is higher than this version, it is not compatible with IE8, so make sure that the react version you use is not higher than 0.14. According to the official statement, the compatible method only needs to introduce es5-shim.js and es5-sham.js (which can be downloaded through Baidu search) into the index.html, these two files are an es5 syntax modification compatible with es3 syntax polyfill, but after the project actually added these two files, it will still report some errors.

Second, make sure that the version of Jquery used is the version of 1.x.x, and IE8 does not support the version of Juqery2.x. If you use the BootStrap framework, the framework requires a minimum Jquery version of 1.9 or above.

3. For the other two frameworks, I use "react-redux": "^ 4.4.1" and "react-router": "^ 1.0.3".

4. You need to add the following dependency packages to package.json:

"console-polyfill": "^ 0.2.2", "es5-shim": "^ 4.4.1", "eventsource-polyfill": "^ 0.9.6", "fetch-ie8": "^ 1.4.0", "babel-polyfill": "^ 6.7.4"

After adding the above dependent packages, introduce the above installation packages into the program at the entrance of your front-end program:

Require ('es5-shim'); require (' es5-shim/es5-sham'); require ('console-polyfill'); require (' fetch-ie8'); require ('babel-polyfill')

5. After the above steps are completed, ie8 will still report an error, mainly related to the Object.defineProperty function. At this point, a key step is needed to add to the package.json

"es3ify-loader": "^ 0.2.0"

This is a package that converts es5 and es6 syntax into es3 syntax. This package does not need to be introduced into the program in the code, but when our APP.js is packaged, we use this loader to package again. My app.js is packaged with gulp, but es3ify-loader can only use the webpack packaging tool.

To make the call, you need to install webpack in the project directory and enter the command: npm install-g webpack. At the same time, create a webpack.config.js under the directory, which contains:

Var webpack = require ('webpack') Module.exports = {/ / page entry file configuration. Here is the app.js entry: {index:'. / build/app.js'}, / / entry file output configuration packaged with gulp Here, you need to set the file name output: {path:'. /', filename: 'bundle.js'}, module: {/ / loader configuration for the packaged app.js. Here, use es3ify-loader to package the app.js again. Loaders: [{test: /\ .js? $/, loaders: ['es3ify-loader'],},]},}

After the above steps are completed, enter the command under the project directory: webpack will automatically start packaging, and after packaging, bundle.js will be generated in this directory.

6. After completing the above steps, the compatibility modification of React+Redux+Ruoter framework under IE8 is completed. This is my complete modification process, after the modification is completed, the program runs smoothly under IE8, because the entire front end is written by a single-page application, it is relatively slow to refresh pages under IE8.

This is the end of the introduction to "how react supports ie8". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.