The background,

Recently, I was often asked about React. I only had a concept of JSX in my mind. Moreover, DURING the one and a half years after graduation, I only came into contact with Vue in daily work, so I am very familiar with Vue. But how does the React framework work? That’s half the story. So I decided to learn how to React and find out what drugs were in store.

Second, learning path

The official documentation

React.docschina.org/docs/thinki…

React: The React document takes over an hour to read

Learning notes

  • Component declarations
Function Welcome (props) {return <div>Hello, {props. Name}</div>}Copy the code
Render () {return <div>Hello, {this.props. Name}</div>}}Copy the code
  • The component name must start withThe capital lettersAt the beginning
  • Props

    React components must protect their Props from being changed as pure functions

  • State

    Use State correctly

  1. Do not modify State directly
  2. Updates to State can be asynchronous
  3. State updates are merged

Data flows down called “top-down” or “one-way” data flow. Any state always belongs to a particular component, and any data or UI derived from that state can only affect the components “below” them in the tree

  • The life cycle
  1. The componentDidMount() method runs after the component has been rendered into the DOM
  2. The componentWillUnmount() method is run just before the component is removed from the DOM
  • The event processing

    React events are named in a camelCase rather than pure lowercase. To use JSX syntax you need to pass in a function as an event handler, not a string

  • Conditions apply colours to a drawing

    Returning NULL in the render method of a component does not affect the lifecycle of the component

  • List & key

    The key will pass information to React, but not to your components. If you need the value of the key attribute in your component, explicitly pass the value by another attribute name. The key of the element only makes sense in the context of the nearest array

  • The controlled components

    The React component that renders the form also controls what happens to the form during user input. The form input elements that React controls their values in this way are called “controlled components.”

  • State promotion (componentization)

    Top-down data flow In React applications, any mutable data should have only one “data source” corresponding to it. Typically, state is added first to the component that needs to render the data. Then, if other components also need this state, you can promote it to the nearest common parent of those components

  • Composition vs inheritance

    React does not have slots. It uses props. XXX or props. Inheritance is basically useless

  • The React philosophy

    React The idea of one-way data flow (also known as one-way binding) makes components modular

Three, practice

To implement a small project yourself, spend half an hour reading the official documentation for create-React-app

The create – react – app. Dev/docs/docume…

Initialization engineering

Directly use the scaffolding recommended by the official website

$ npx create-react-app 'better-react'
$ cd 'better-react'
$ yarn install
$ yarn start
Copy the code

Write styles using Sass

Documents: the create – react – app. Dev/docs/adding…

$ npm install node-sass --save
$ # or
$ yarn add node-sass
Copy the code

Once installed, we are happy to write styles using Sass

@import 'styles/_colors.scss';
Copy the code

Iv. Project structure

General structure:

graph LR
src-->common
src-->components
        components-->AddBtn
        components-->list
        components-->ListItem
src-->App.js
Copy the code

(Nuggets don’t support flowcharts…)

Five, the specific code

  • AddBtn.js
/* * @Author: cunhang_wwei * @Date: 2021-03-16 20:04:36 */

import React from 'react'
import './btn.scss'

class AddBtn extends React.Component {
    constructor (props) {
        super(props)

        this.handleClick  = this.handleClick.bind(this)
    }

    handleClick (event) {
        event.preventDefault()
        console.log('add')
    }

    render () {
        return (
            <button onClick={this.handleClick} className='good-btn'>add</button>)}}export default AddBtn
Copy the code
  • list.js
/* * @Author: cunhang_wei * @Date: 2021-03-13 12:38:01 */
// import React from 'react'
import React from 'react'
import './list.scss'
import ListItem from '.. /ListItem/list-item'
import AddBtn from '.. /AddBtn/btn'

class List extends React.Component {
    constructor (props) {
        // Get the props of the component instance
        super(props)
        // state creates the component's own data, similar to data in Vue components
        this.state = {
            listData: [].count: 0
        }

        for (let i = 0; i < 10; i++) {
            this.state.listData.push({
                title: '尝试一下React'.content: 'React is nice, smells good! '})}// Construct an array of JSX instances to render
        this.lists = this.state.listData.map((item, index) = >
            <ListItem photoUrl="" title={item.title} content={item.content} key={index}></ListItem>
        )
        // Modify the method pointer to the current component instance
        this.plus = this.plus.bind(this)
    }

    plus () {
        // One-way data stream, need to manually setState update data
        this.setState(state= > ({
            count: state.count + 1
        }))
    }

    componentDidMount () {
        // The component starts running timers after it is mounted
        this.interval = setInterval(() = > this.plus(), 1000)
    }

    componentWillUnmount () {
        clearInterval(this.interval)
    }

    render () {
        return (
            <div className='list'>
                <p>You stayed on the current page for about {this.state.count} seconds</p>
                {this.lists}
                <AddBtn></AddBtn>
            </div>)}}export default List
Copy the code
  • ListItem.js
/* * @Author: cunhang_wei * @Date: 2021-03-16 19:17:31 */

import React from 'react'
import './list-item.scss'

class ListItem extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick () {
        console.log('Is Me! ')
    }

    render () {
        return (
            <div onClick={this.handleClick} className='list-item'>
                <p className='title'>{this.props.title}</p>
                <span className='content'>{this.props.content}</span>
            </div>)}}export default ListItem
Copy the code

Six, the final effect

Github address :github.com/AFine970/my…

Finally, good study will not be bad! I love you guys. Give it a thumbs up