Alibaba cloud front end Weekly – issue 18

Time:2020-1-19

Recommend

1. Deep to shallow understanding of react high-level components

https://zhuanlan.zhihu.com/p/…

The high-order component is extended from the high-order function. The high-order component accepts the react component as the input and outputs a new react component. This paper introduces how to write and use the high-order component in the react project, as well as some practices in combination with the decorator.

2. High performance mobx mode (Part 2) – response change

https://zhuanlan.zhihu.com/p/…

Mobx ensures that whenever your responsive data changes, the corresponding observable dependent properties are automatically updated synchronously. This means that you can now focus on responding to changes and dealing with the side effects of changes without worrying about data synchronization. Let’s go deeper and see how you can deal with the side effects.

3. Atomic design methodology

https://zhuanlan.zhihu.com/p/…

Atomic design is a useful method of design and development, but it is basically just a psychological model of building interface. Now you may want to know how to use atomic design. Dear readers, don’t be afraid, because the rest of the book will focus on tools and processes to make your dream of atomic design come true.

4. It took me two months to understand let

https://zhuanlan.zhihu.com/p/…

When let came out, he thought he understood let. However, in the past two months, the understanding of let has changed a lot. The author wrote this article in the hope that its learning process will be helpful to other people’s self-study.

Other

1. JavaScript factory function implementation in ES6

https://medium.com/javascript…

This article belongs to the composition software series released by Eric Elliott, and introduces how to implement factory functions in the context of JavaScript ES6 syntax. Factory function is a non class or constructor function that can handle some newly created object. Factory function can simplify the process of creating new object. This paper introduces how to implement factory function in detail, and it is also a good explanation of ES6 function syntax;

2. Simple data visualization based on react.js

https://codeburst.io/simple-d…

The purpose of this paper is to introduce how to use react.js, and without the help of any third-party library, to achieve a simple SVG linetype. This paper first discusses how to use create react app to build a simple react project, then introduces the basic syntax of SVG and how to create simulation data. Finally, it introduces how to divide logical code and write a separate linechart component;

3. Ten common tools in Web Development

https://medium.com/envato/our…

Every year, there are many excellent web development aids, and this article is from the engineers of envito to share the ten tools commonly used in their development. This paper introduces grid.guide, bootstrap like style library foundation, online code editing and sharing tool codepen, jQuery plug-in aggregation unheap, automatic interface Refresh Tool livepage, full page screen capture, font assisted whatfont, node / NPM, mobile speed test, responsive speed test tool And so on.

4. React open source license storm

https://wptavern.com/react-us…

Recently, the Apache foundation announced the ban on the use of open-source software including react, the BSD license with additional terms on Facebook, which caused some users’ concerns; many people in the community have petitioned to modify the react open-source license, while rocksdb, another open-source project on Facebook, has said it will modify the license before the deadline; the maintainer of the react project said face This is being discussed within book, and we will continue to follow up.

5. NPM 5.3.0 release

http://blog.npmjs.org/post/16…

Since the release of version 5. X, NPM has been committed to improving the iteration speed of the version and repairing the problems of NPM through small updates as much as possible. This week’s release of 5.3.0 added the — link parameter to the NPM LS command, and added more supporting language versions to NPX; in addition, it also fixed a series of version control problems.