Web pack 2.0 to build react framework

Learning React, has been using the original scaffolding, create-react-app, but used for so long, psychological inevitably is not taste, after all, I have been a little knowledge of webpack, so I spent a day, read a lot of blogs, but most blogs are not unified, so I have not built up for half a day, and then I read the official website step by ...

Posted by rashu.dr on Sun, 26 May 2019 22:37:20 +0200

webpack: from introduction to real project configuration (2)

How to use webpack in a project Simple babel and webpack have been configured in the project to run npm directly run start At this point, you will find that the bundle.js is so large that it is certainly unacceptable, so the main purpose of the next chapter is to split individual files. Optimize projects for multiple files. Separation ...

Posted by aveach on Fri, 24 May 2019 02:00:52 +0200

How to implement a simplified version of jQuery

JQuery is a very convenient library for operating DOM. Although jQuery is used less and less with the popularity of frameworks such as React and Vue nowadays, many of these ideas are worth learning. This article will introduce how to implement a simplified version of jQuery from scratch. Here, I name this library Clus(class homophonic) The foll ...

Posted by coool on Sun, 19 May 2019 04:28:48 +0200

Talk about Render Props in React

Brief introduction: The separation of UI from business has been evolving, from early mixins, to HOC, to Render Prop. This article mainly compares HOC and talks about Render Props 1. Early mixins Early reuse businesses were implemented through mixins, such as component A and component B, which had common functions that ...

Posted by nemonoman on Sun, 19 May 2019 04:06:45 +0200

Installation and Configuration of Babel

Babel is actually a platform for compiling JavaScript, which compiles code to help you achieve the following goals: Let you use the latest JavaScript code (ES6, ES7...) It doesn't matter whether the new standard is fully supported by the browsers currently in use. Next, learn how to install Babel Babel is actually ...

Posted by watthehell on Sat, 18 May 2019 15:52:17 +0200

Vue Component Naming

Vue 1x Component Naming Mechanism Component registration Template analysis Naming restrictions Vue 20 Component Naming Mechanism Component registration Template analysis There ara only two things in Computer Sciences: cache invalidation and naming things. - Phil Karlton As mentioned above, variable naming in programming ...

Posted by sunnysideup on Fri, 17 May 2019 20:06:21 +0200

Research on State Preservation in React

When using react with react-router for application, you may encounter such a problem. When I transit from the first page to the second page, and then return, I find that the state of the previous page has disappeared, that is, back to the original state. This is more obvious when there are multiple TAB pages or multi-criteria screening on the p ...

Posted by nishmgopla on Fri, 17 May 2019 01:23:19 +0200

Front-end project file organization and component naming

Reason In the process of developing a project, people are more or less doubtful about the catalogue structure of their own project, how to divide modules reasonably and how to name them reasonably. If these are not well regulated in the early stage of the project, then the newcomers will divide their catalogues again according to their own logi ...

Posted by stokie-rich on Wed, 15 May 2019 02:39:34 +0200

How to Manage z-index in Web Componentization

z-index attributes, although so much has been written, are still widely misunderstood and mishandled. Stacking problems in complex single-page web applications can become a major problem. Sticking to some principles, however, we can easily avoid these problems. If you've ever had any complex Web UI development, you might sometimes go crazy tryi ...

Posted by immanuelx2 on Sun, 12 May 2019 12:10:21 +0200

[React Series Tutorial 5] Parent-Child Component Value Passing, defaultProps and propTypes

1. The parent component passes values to the child component (that is, the child component calls the parent component data and methods) 1. Define an attribute <Header msg='Home Page'> </Header> when calling subcomponents 2. Get through this.props.msg in the subcomponent.    Explanation: The parent compo ...

Posted by Bind on Sun, 12 May 2019 04:22:57 +0200