Adaptive page arrangement of a bunch of pictures

Recently, we are developing a page to display pictures in batches. The adaptive arrangement of pictures is an unavoidable problem After paying for a lot of hair, I finally finished the picture arrangement and encapsulated it into components. The final effect is as follows     1, Design ideas In order to make the structure clear, I process the ...

Posted by coreycollins on Mon, 01 Jun 2020 05:48:42 +0200

react Reading Notes

Source Digging Booklet - react Actual: Design Patterns and Best Practices react design idea Property Expansion - Keep the props required by the current component and pass on other props var obj = {a: 1, b: 2, c: 3, d: 4, e: 5} const { a, ...other } = obj console.log(other) // {b: 2, c: 3, d: 4, e: 5} In react, the interface is entire ...

Posted by vulcant13 on Sat, 16 May 2020 21:57:03 +0200

Develop blog project based on abp vNext and. NET Core - build project with abp cli

First of all, we have. net core 3.1 development environment by default. If you don't have it, go to download it https://dotnet.microsoft.com/download Since the project is developed based on abp vNext, it is recommended to go through the official documents of abp before development, https://docs.abp.io/en/abp/latest/ There are many ways to cre ...

Posted by ttroy on Sat, 16 May 2020 07:53:31 +0200

react component development

This article shares the development process of a react animation component. Take a pop-up from the bottom as an example: A pop-up from the bottom similar to the action sheet. thinking 1. Click the bottom of the button to pop up the pop-up box 2. Mask background display at the same time 3. When you click to mask the background, the pop-u ...

Posted by Damien_Buttler on Mon, 04 May 2020 19:42:19 +0200

Angular vs React vs Vue vs UISYS event binding comparison (novice must see)

1. Start from zero Event binding is the second lesson for beginners in web development, and learning event binding represents a new lesson in which you will challenge interaction.Let's first look at what native html + JavaScript does: Native mode: <div> <button onclick="greet()">Greet</button> </div> <script> ...

Posted by Lodius2000 on Fri, 17 Apr 2020 04:30:03 +0200

The use of ref in React

Example: get the distance from the button element to the top of the page ref is written on html elements import React,{Component,Fragment} from 'react'; import Child from './Child'; class Counter extends Component{ constructor(props){ super(props); this.addCount=this.addCount.bind(this); this.state={ ...

Posted by Aebx on Tue, 14 Apr 2020 16:01:49 +0200

Simple demonstration of React component life cycle

The lifecycle of a component can be divided into three states: Mounting: real DOM insertedUpdating: being re renderedUnmounting: moved out of the real DOM   Life cycle approaches include:componentWillMount is invoked before rendering and the client is also on the server side.componentDidMount: call after the first rendering, only on the client ...

Posted by oaskedal on Tue, 14 Apr 2020 07:53:12 +0200

Props, State and render functions in React

Summary of core features of React 1. React: Declarative Development (JS or jQuery attribute command development) 2. Can coexist with other frameworks 3. Componentization 4. One-way data flow (A parent component can directly change the data of a child component, but a child component cannot directly change the data of a parent component)   Props ...

Posted by lukelee on Sun, 12 Apr 2020 19:29:20 +0200

Leave confirmation customization in react Route 4

In some applications, the product requirements are as follows: for example, when the user jumps to the route, the user needs to be prompted that the data of the current page has not been saved, and the user needs to be prompted to leave for confirmation. The general effect is as follows: image.png Previous router router pract ...

Posted by dnast on Sat, 04 Apr 2020 06:30:56 +0200

ReactNative: ReactContext!=Activity

In the project, there is a bookshelf View provided to react native for use. It monitors the corresponding life cycle of react native to refresh the interface. The code is as follows //ViewManager public class BookShelfManager extends SimpleViewManager<BookShelfView> { private BookShelfView mBookShelfView; @Override ...

Posted by rinjani on Fri, 03 Apr 2020 10:46:41 +0200