Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to integrate Redux+Flux+webpack+Babel development", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to integrate Redux+Flux+webpack+Babel development" this article.

I. Modern front-end development

A.ES6muri-A new generation of JavaScript standard

1.const, let keywords: let block-level scope, const constant (if it is a reference type, then its properties can be modified)

two。 Function:

Arrow function: a simpler way to declare a function, which can be thought of as a syntactic sugar and is always anonymous, such as let add = (ajar b) = > aplb.

In the nested function of the object method, the scope of this points to the global object, but the arrow function does not have this problem.

Function to add default parameter function

Rest parameter: function test (… Args) {}, which represents an array of parameters without a specified variable name (arguments is a collection of all parameters), is a true array (arguments is not a real array)

3. Unfold operator: the Rest parameter is the unfold operator that allows an expression to expand somewhere.

4. Template string: `template ${name} `, using` symbol

5. Deconstruct assignment:

Similar to list in php (aline b) = []

Let foo = [1JI 2jue 3]; let [a dint bMagne c] = foo

Let baz = {avell 1m bju 2}; let {areco b} = baz

6. Class: provides class syntactic sugar, which is just a grammatical sugar of the original prototype chain.

7. Module

Use the import and export keywords to import and export the module

b. Use Babel

1.Babel, which can use new features of the language ahead of time, is a versatile js compiler that compiles the latest version of js into a version that can be executed today.

two。 The core concept is to manage the compilation rules through a series of plugin. Through different plugin, you can compile not only ES6 code, but also React JSX syntax or CoffeeScript.

c. Front-end component scheme

1. The module is at the language level. In the front-end domain, module generally refers to JS module, which is often represented as a separate JS file, while the front-end component is more of a business-level concept, which can be seen as a functional implementation that can be used independently, often as a UI component (not absolute).

2.JS Modularization Scheme:

Global variable + namespace (namespace): generally realize the local scope through simple self-executing functions to avoid polluting the global scope (jQuery)

AMD&CommonJS:AMD only needs to define require and define in the global environment, through the file path or file name positioning module, the dependency is declared in the module implementation, and the loading and execution are operated by the loader, providing a packaging tool to automatically analyze and merge dependencies; CommonJS is not suitable for the browser environment, which is more concise than AMD, and can easily realize the sharing of front and rear code.

ES6 module

3. Front-end component solution:

Multi-entry file component based on namespace: a modular scheme based on global variables and namespaces, different resources are manually introduced, similar to plug-ins for jQuery

Module-based multi-entry file component: exposes itself as a module using the AMD specification

Single JS entry components: packaging tools such as browserify, webpack, etc., that allow general resources to be loaded as JS equal modules

Web Component: not determined yet, not enough support

d. Auxiliary tool

1. Package Manager: npm

View the global package installation location: npm prefix-g

Package.json:dependencies, the package you need to rely on in a production environment (- save); devDependencies, only the package you need to rely on in the development and testing phase (- save-dev)

two。 Task flow tool (Task Runner): Grunt and Gulp

Grunt, which uses plug-in mechanism and Gruntfile.js to configure, combine and run multitasking (npm install grunt-cli-g)

Glup, which absorbs the advantages of Grunt, simplifies the configuration and output of multiple tasks through the concept of flow, making the task more concise and easy to use (npm install glup-cli-g)

3. Module packaging tools: Bundler, webpack

The main task of Bundler is to break through the gap between browsers, analyze, compress, merge and package JS codes and even static files in various formats, and finally generate code supported by browsers.

II. Webpack

Characteristics and advantages of A.webpack

Characteristics of 1.RequireJS:

Conversion and packaging of the module code of the CommonJS specification (the specification adopted by the Node.js module)

A lot of Node.js standard package has been adapted on the browser side, as long as it is a JavaScript module that follows the CommonJS specification, even if it is pure front-end code, it can be used for packaging.

Features of 2.webpack

Code splitting (code splitting) scheme: application code can be split into multiple blocks (chunk), each block containing one or more modules, which can be loaded asynchronously as needed

Intelligent static analysis: support for simple require expressions containing variables

Module hot replacement (Hot Module Replacement): after modifying a module, you can dynamically replace the affected module with a new module without refreshing the page, use the new module logic in subsequent execution, and start webpack-dev-server with-hot.

b. Development based on webpack

1.webpack has done two main parts of work:

Analyze and merge all the necessary modules

Provides an environment for the orderly and normal execution of these modules

2.loader is the transformation behavior that acts on the resource files in the application. They are functions (running in the Node.js environment) that take the source code of the resource file as parameters and return the new code

3. Using style-loader and css-loader will delay the loading of style code at the same time as js, and the user experience is not good. With the help of the extract-text-webpack-plugin plug-in, the style content can be extracted and output to an additional css file when packaging.

The existence of 4.plugin can be seen as implementing functions that loader cannot or are not suitable to implement in loader, such as automatically generating HTML pages of the project (HtmlWebpackPlugin), injecting environment variables (EnvironmentPlugin) into the build process, adding comment information (BannerPlugin) to the result file of blocks (chunk), and so on.

5.webpack-w, real-time build, hot replacement: webpack-dev-server

Third, the first acquaintance of React

1. Three major features:

Components: everything in React is component-based, and the only thing you care about is building components. Components are well encapsulated, making it easier to use, test, and separate code

JSX: a way to nest HTML directly in JS, called JSX. It can define a tree structure as simple as HTML, combines the advantages of js and HTML, and can use HTML as usual, or nest js syntax in it. This format cannot be used directly in browsers, so you need to add a JSX compiler.

Virtual DOM: in React, developers do not need to manipulate real DOM nodes. Each React component is rendered with Virtual DOM, which is an abstract description of HTML DOM nodes.

a. Comparison between using React and traditional front-end development

1.React will use diff to calculate the changed part, and then apply the changed part to the real DOM to update the final page.

The event binding of 2.React is represented by the component property (props) whose value is the callback function. The advantage is that the process of binding events naturally becomes part of interface rendering (render) without special handling

B.JSX

1.JSX is similar to a syntactic sugar that converts the writing of the tag type into a method provided by React to create a ReactElement.

The first letter of the 2.HTML type label is represented in lowercase, and the first letter of the React component tag is represented in uppercase.

3. When an incoming attribute is a {} expression, the code in it is treated as JS code; in JSX, it is interpreted as a component or HTML tag when it encounters a tag, and executed as JS code when it encounters {}

4. Comments on the location of subcomponents require the use of {/ * … * /}

5. Attribute diffusion can be carried out by using the diffusion operator (.), you need to pay attention to the order of parameters.

6. Compile JSX with Babel

C.React+webpack development environment

* webpack2, there is no preLoaders, use rules, and the airbnb of eslint reports an error.

d. module

1. Components are the cornerstone of React, and all React applications are component-based.

2.state is an internal property of a component, and the component itself is a state machine. It can define its value directly through this.state in constructor, and then render different UI according to the resulting value.

3. Component life cycle

Component loading for the first time: call before loading (getDefaultProps, getInitialState), before render (componentWillMount), render is a necessary method of the component, return a ReactElement object, after loading (componentDidMount)

Component props update: triggered when componentWillReceiveProps (next) receives a new props, shouldComponentUpdate is called before re-render, componentWillUpdate is called before render, and immediately after componentDidUpdate re-rendering is completed

Component unloading: componentWillUnmount is called before the component is uninstalled and destroyed

4.state design principle: make most components stateless as far as possible, and separate the state into specific components as far as possible to reduce the complexity of components; state should contain data such as the event callback function of components that may cause UI updates; data that should not be included in state: data that can be calculated by state; components; data in props

5. Set a ref attribute on the node, and then obtain the corresponding DOM structure through this.refs.name

E.Virtual DOM

1.Virtual DOM exists in independent React, but React uses this technology to improve efficiency when rendering.

2.ReactElement is a lightweight, stateless, immutable, virtual representation of DOM elements. In fact, a JS object is used to express DOM elements. By inserting ReactElement into a real DOM, you can call the render method of ReactDOM.

IV. Practice React

Design principles of 1.state: simplify data as much as possible and follow the principles of DRY (Don't Repeat Yourself)

two。 General testing tools: Mocha, Chai

5. Flux architecture and its implementation

1.Flux is a set of front-end application architecture model put forward by Facebook officially, and the core concept is unidirectional data flow.

two。 Traditional MVC is bidirectional data flow, and unidirectional data flow is Action- > Dispatcher- > Store- > View.

Advantages and disadvantages of 3.Flux: it increases the amount of code, introduces a large number of concepts and files, brings clear data flow, reasonably separates data from component state, maintains clear logic, makes data flow clearer, provides predictable state, and avoids confusion and maintenance difficulties caused by multidirectional data flow.

Three laws of 4.Redux: single data source, state is read-only, and pure functions are used to perform modifications.

VI. Use Redux

1.Redux focuses on the maintenance of the state as a whole, but does not produce specific changed parts. React is a view layer implementation of the interface coming out of the state as a whole, which is very suitable for Redux implementation.

two。 When we talk about how to use Redux, we are actually talking about how to get and use the content of store (state data), and the process of creating and triggering action.

3.Redux is characterized by a single data source, that is, the state information of the entire application is stored in a store, so it is necessary for store to pass in the data from the root node of the React component tree.

7. React+Redux advance

1. On the contrary, the pattern (anti-pattern or antipattern) refers to the design equipment that appears obviously in practice but is inefficient or needs to be optimized. it is a common bad way to solve the problem.

two。 Optimization principle: avoid premature optimization and focus on bottleneck; when optimizing React, most of the optimization space is to avoid unnecessary generation of render-, that is, Virtual DOM nodes.

The above is all the content of this article "how to integrate Redux+Flux+webpack+Babel Development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.