Programmer Group

1. Parent child component communication 1) the parent component communicates with the child component, using Props Parent passes name to child <GreateH name="kitty"/> The child component receives the value of the parent component through props and displays class GreateH extends React.Component{ static defaultProps = { name:'C ...

Source: react design patterns and best practices By Michelle Bertolli Publication time: the first edition in August 2018 (still new) Use react refetch to simplify the api's code for getting data const List = ({data: gists}) => { return ( <ul> {gists.map(gist => ( <li key={gist.id}>{gist.description}</li& ...

Complete registration logic and personal center page 1 reg component validation logic The same validation rules as login import React , { Component }from 'react'; import PropTypes from 'prop-types'; import { connect } from 'dva'; import { Form, Icon, Input, Button, Checkbox,message} from 'antd'; import { routerRedux } from 'dva/router'; const ...

Recently, I have nothing to do to learn the React framework by myself. In the process of self-study, all the problems and experiences will be recorded here. I hope that they can help the students who learn the React framework. I don't talk much about the code.First, father to son: import React, { Component } from 'react'; import Com1 from './co ...

Recently, I took over a page of others. The code was messy and jumbled. When I was adding functions, I found that the module I added conflicts with the original module, but I didn't know where the original module was, so I found it. But I found that this way is too clumsy, and I didn't find the corresponding tool on the Internet, so I wrote a t ...

Switching pages is the most basic function of app. This function needs to be implemented with Navigation components. RN is developing too fast (v49). The Navigation component that came with it is abandoned. If it is only for ios, it can also be used NavigatorIOS There are some good ones in the communityhttps://github.com/react-comm ...

webpack.js little tail const webpack = (options, callback) => { //... if (callback) { if (typeof callback !== "function") { throw new Error("Invalid argument: callback"); } if ( options.watch === true || (Array.isArray(options) && options.some(o => o.watch)) ...

When using antd, what should we do if we want to add and delete forms, as follows: import { connect } from 'dva'; import { Form, Input, Button } from 'antd'; import styles from './eg1.css'; const FormItem = Form.Item; function Page(props) { const { form } = props; const { getFieldDecorator, getFieldValue } = form // Form submission c ...

Lazy load: why? Solve page fake dead state Single page vue and react, only one HTML, slow loading of the first screen, fast switching in the later stage, which is not conducive to search engine optimization (SU), and the front-end rendering is not conducive to 500kb for the first screen is good for user experience, and the maxim ...

Preface By default, this article gives you an overview of what TypeScript is, mainly explaining how to install and use it in older React projects. The main purpose of writing this is that there are many online explanations of TypeScript, but they are grammatical concepts or simple examples. There are few articles that actually transform an old ...