This is the 20th day of my participation in the Genwen Challenge

Install the React scaffolding tool

 npm install -g create-react-app  &&  cnpm install -g create-react-app
Copy the code

2. Create a project

The create - react - app reactdemo_01 problem1Error eslint@ when initializing the project6.8. 0: The engine "node" is incompatible with this module. Expected 
    version "^ 8.10.0 | | ^ 10.13.0 | | > = 11.10.1". Got "10.12.0"Solution: This is caused by node version incompatibility. Upgrade the node version to resolve the problem, or do not upgrade the node version to resolve the problem, using the following command: NPX create-react-app my-app --use-npm or NPX create-react-app react-templateCopy the code

React binding:

1.classTo switch toclassName
2,  forTo switch tohtmlFor
3, styleInline style <div style= {{"color": 'red'}}></div>
4The other properties are the same as beforeCopy the code

4. Write react carefully

{} bind data this.state. Var directly. {} bind data this.stateCopy the code

Note: event objects, keyboard events, form events, ref retrieving DOM nodes, React implementation similar to VUE dual data binding

Event object: Triggering an Event in the DOM will generate an Event object, which contains all the information related to the Event

5. Parent and child components pass values

Components calling each other,

Title ={this.state.title} title={this.state.title} This.props. Title run = {this.run} this.props. Run 2, the parent passes the entire instance to the child. Call the parent component method by calling the parent component instanceCopy the code

6. Component transfer

The parent component actively retrieves the child component data

1, the child specifies ref ref='header' 2, and the parent gets the entire child instance through this.refs.headerCopy the code

Parent component passes value to child component

DefaultProps: If the parent component does not pass a value when calling the child component, then you can define the default propTypes in the child using defaultProps: Import PropTypes from 'prop-types' 2, class. PropTypes = {name: proptypes.string}Copy the code

7. Interface acquisition

#### react install NPM install axios --save (2) import axios from axios (3) http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20 2, fetch-jsonp (1) npm install fetch-jsonp --save (2) import FetchJsonp from 'fetch-jsonp'Copy the code

8. Life cycle functions

  1, the function that fires when the component loadsconstructor , componentWillMount.render.compenentDidMount2. Lifecycle functions that are triggered when component data is updatedshouldComponentUpdate.componentWillUpdate.render.componentDidUpdate3. Triggered during component destructioncomponentWillUnmount4. When a value is passed in the parent componentpropsTriggered when changes are madecomponentWillReceiveProps
Copy the code

9, react-router

To configure the router, follow the react-router command1NPM install react-router-dom --save **2.import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
      <Router exact path='/' component={Home}>
  3, exact indicates the exact match #### Adjusts the value from one page to another1To get the value2Dynamic routing3, localStorage pass value - Dynamic Route <Route path='/newscontent/:aid'Component ={NewsContent} /> Dynamic routing:this.props. Match. params-get Passes a valuethisSearch #### install axios NPM install aixiosCopy the code

React uses antD

Yarn add ANTd --save 2. Add @import '~antd/dist/antd. CSS 'to the CSS file of the project. Import {Button} from 'antd'Copy the code

Advanced configuration, use CSS on demand, introduce react-app-rewired and modify package.json configuration

- yarn add react-app-rewired 
- yarn add react-app-rewired customize-cra --save 
Copy the code

Modify the package. The json

  "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test --env=jsdom".Copy the code

The project root directory creates the config-overrides. Js file

module.exports = function override(config, env) { 
  returnconfig; } #### install yarn add babel-plugin-import

  babel-plugin-importBabel is a plug-in for loading component code and styles on demand that modifies the contents of the config-overridesconst { override, fixBabelImports } = require('customize-cra');
 module.exports = override(
     fixBabelImports('import', {
      libraryName: 'antd'.libraryDirectory: 'es'.style: 'css',}));Copy the code