This is a free course. It took me one and a half months to write the article and record the video. If you think it’s good, give it a thumbs up. The basics of React will be explained in detail in articles and videos. The React version is 16X, which is the latest version (my recording date for this course is May 4, 2019). The goal this year is to record 100 free front-end tutorials, most of which will probably be on the React framework, which is the most popular front-end framework and a must-have.

We’ll use the latest version of React16.8. I’m sure many of you know how to use React, but you may not have learned it very well.

It has been updated…….. Attached is a list of articles and videos.

Video list

React Introduction (315)
React vs. Vue (314)
React Development Environment (313)
Introduction to the Project Catalog generated by scaffolding (312)
HelloWorld and Components (311)
React JSX syntax introduction
React Instance – Little Sister Service Menu (309)
React instance – A good sword grind, a good theory (308)
React instance – Boss I need to add a clock
React instance – The sword is too old to bear (306)
React Advanced -JSX anti-tread pit (305)
React Advanced -Simple React Snippets(304)
React Advanced – Components Split (303)
React Advanced – Parent and child components pass values (303)
React Advanced – Monomial Data Streams and Others (302)
React Advanced – Install and Use the React Debugging tool (301)
React Advanced PropTypes check pass value (300)
React-advanced ref (299)
React Advanced – Life Cycle Tutorial -1(298)
React Advanced – Life Cycle Introduction -2(297)
React Advanced – Life Cycle Tutorial -3(296)
React Advanced – Lifecycle Improvements to Application Performance (295)
React Advanced – Axios Data Requests (294)
React Advanced -Axios Request EasyMock(293)
React Advanced – CSS3 React Animation (292)
React Advanced -CSS3 KeyFrames Animation (291)\
The React senior – React – the transition – group (290).
React Advanced – MultiDOM Animation and Writing (289)

Lesson 01: Introduction to React

I’m glad you’re here to learn the React.js technology. This is the first lesson of this course. It’s a lot of nonsense, but I suggest you take a few minutes to watch this video.

React AC Q group: 159579268

Introduction of the React

First of all, it cannot be denied that React. Js is the most popular front-end framework in the world (the front-end framework launched by Facebook). Most first-tier and second-tier Internet companies in China use React for development, such as Ali, Meituan, Baidu, Qunar, netease, Zhihu and other first-tier Internet companies regard React as the main front-end technology stack.

The React community is also very strong, with more useful frameworks such as ReactNative and React VR growing in popularity. React has been promoted since 2013, and now the React Fiber (16RC) version has been released, which has greatly improved performance and ease of use.

React Advantages

The Ecosystem is strong: No framework is better than the React ecosystem, with mature solutions for almost all development needs.
Easy to get started: You can even get the React technology up and running in a few hours, but its knowledge is so extensive that you may need more time to fully navigate it.
Strong community: You can easily find like-minded people to study with because there are so many people using it.

Required prior knowledge

JavaScript Basics: It would be nice to be able to go back to ES6, as we try to use ES6 syntax in our cases throughout the course.
NPM basics: You need to know how to use NPM package management, but it’s ok that you don’t, because it’s covered in the course anyway.

Teaching methods and learning essentials

You don’t have to take notes to learn this set of videos, just listen attentively, and note taking technology has prepared a text version for you at the bottom of each video.
Code all handwritten: code all handwritten, do not do PPT type explanation, do not do paste copy, as long as you look carefully, certainly learn, there will be no pit let you climb up.
Study with 3000 friends: The QQ group has been opened, you can directly enter the QQ group, we all study together, you can discuss any questions together.

Video update frequency

This video is updated three times a week, so please bookmark this website, or enter the group to learn, as long as the updated content, the group will be notified. This will ensure that you learn in time.

Fat technology or a programmer, usually work overtime also a lot, so sometimes update not timely, please understand.

Disclaiming: This course borrows from React and Redux, but also adds my own understanding. I will not simply copy any words or chapters from the book. If I quote words from the book, I will mark them all out to show my respect for copyright.

If you think reading is better, you can buy a book to study.

Add QQ group to study together

In order to better study together, technology fat also established QQ group, if you encounter any difficulties in learning, you can enter the group to ask questions, I believe there are many people in the group can answer questions for you.

QQ group: 524520566 (3000 large group, enter the group please answer the question correctly, the answer please all lowercase)

There are only technical discussions, no small talk.

If you have any questions in the study, you can also leave a message at the bottom of the article, technical fat will reply to your questions as soon as possible.

Due to the limited personal ability, there is something wrong in the process of explanation, I hope you can leave a message at the bottom of the article to correct the error, technical fat here first embrace thank you.

Section 02: React Introduction vs. Vue

In this lesson, we will introduce the React framework and bring up a controversial topic: When do you use React? When to use vue.js? In fact, this class is also more theoretical, but I think it is necessary to have a separate class to talk about it, because many friends are still hesitant, I have learned Vue, is there any need to learn React? The answer is yes, that is to learn. Because this course may be more for beginners, so the necessary theory is also indispensable.

React AC Q group: 159579268

Introduction of the React

If you go to the official website, all you’ll see is a simple description:

A JavaScript library for building user interfaces

Is such a simple sentence, appears simple and unpretentious, but when I see it every time feel its domineering side leakage, awe. The greater something is, the more humbling it is.

Tainted chicken soup

As a programmer, never look down on others… Birds eat ants when they are alive. Ants eat birds after they die. One tree can be made into a million matches, and it takes only one match to burn down a million trees. So don’t look down on anyone! When you look down on others, it’s just that they don’t care about you! Flowers, very colorful, but just a flash in the pan: trees, simple and ordinary, but can be evergreen. Live, low-key life. Because as a programmer, even if you wanted to be high-profile, do you have the time and money? Stop dreaming and study hard!

React three systems

There is also a level of learning that requires you to learn the basic knowledge of React.js first and then ReactNative, which will greatly reduce the difficulty of learning. My goal is to explain the basics of React.js first, and then start learning about ReactNatvie. So the cycle of this video is still relatively long, so you need to be more patient to learn.

A formal introduction

ReactJS is a JS front-end open source framework launched by Facebook in May 2013, featuring functional programming style. It’s worth noting that ReactJS is by far the most used front-end framework in the world and has the most robust documentation and community system in the world. The React Fiber version, also known as React16, is a major upgrade with a lot of new features that I’ll explain a little bit later in the course.

ReactJS ‘official website is reactjs.org

If you are good at English, I recommend that you always read the React official document, which I believe can exceed 80% of the books on the market, not to mention the level of detail. It is the official document and the writing outline of the book writer. (including my article, which is certainly not as good as the official documentation)

React vs. Vue

These are the two most popular frameworks at the front end. Although React is the most used framework in the world, Vue is likely to be used more than React in China. Both frameworks are excellent, so they are equally technical and advanced.

For that person, how do I choose when I receive a project? React. Js is more flexible and collaborative than Vue. Js, so React is always my first choice when DEALING with complex projects or core projects of the company. Vue. Js has a rich API, which is easier and faster to implement. Therefore, when the team is small and the communication is close, I will choose Vue, because it is faster and easier to use. (It should be noted that Vue is also fully qualified for large-scale projects, which depends on how well I have mastered the framework. The above is just a personal summary based on my knowledge.)

conclusion

I’m sure you have an intuitive idea of React. Next class we will start to develop, friends come on.

Section 03: React Environment setup

Through the theory study of two classes, this section can enter operation link finally, actually technology fat already can’t wait. Talk about theory put Buddha know a beautiful woman, lack can only let you look, the rest can do nothing. Those who know me know that I am definitely not this kind of personality. In this lesson, let’s set up the React development environment. You will need to install Node before setting up the React development environment. You can skip these steps if you already have it installed.

React AC Q group: 159579268

Installation Node. Js

With React. Js it is possible to import with primitive

To install Node, simply go to the Node website, download the response version, and double-click install.

Node中文网站 : nodejs.cn/ (recommend you download here, it will be much faster)

You need to pay attention to is that you must correctly download the corresponding version, version download error, but there is no way to use oh.

After installing Node.js on Windows, use Win+R to open it and then enter CMD to open the terminal (or command-line tool).

Input code:

node -v 
Copy the code

If the version number appears correctly, Node is successfully installed. Note that your version number may be different from the one in my video, and it doesn’t matter.

Then enter the code:

npm -v
Copy the code

If the correct version number appears, then NPM is fine and our Node.js installation is complete.

Erection of scaffolding

Once Node is installed, you can use the NPM command to install the scaffolding tool. Simply open the terminal and type the following command.

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

Create-react-app is an official react scaffolding tool. There are a lot of third-party scaffolding tools available, as well as some excellent ones. But as beginners, we use official scaffolding to minimize potholes.

Create your first React project

Once the scaffolding is installed and the project is ready to be created, we’ll create a ReactDemo folder on drive D and go to that folder to create a new React project.

Create ReactDemo folder create-react-app demo01 // create the React project with scaffoldingcdDemo01 // Enter the project directory NPM start // to preview the project. If the project can be opened normally, it indicates that the project is successfully createdCopy the code

In fact, these operations only need to enter the terminal. By the time the React page opens and the icon is displayed properly, our environment is completely set up.

Dear Programmer, If your installation fails, don’t be afraid. You have to believe that if you put your best foot forward, there’s nothing you can’t mess up.

You can try switching to a mobile WIFI hotspot and repeat the steps above. You may run out of data and install it successfully. You can also leave a comment in the group, and the tech fat will help you out.

Conclusion: This class starts technology fat hope you can follow me to do it, because you don’t do it will never learn. Technical fat has no other purpose, hope you can learn. Build the environment, or you won’t be able to practice next time.

Section 04: Introduction to the scaffolding generated project catalogue

Once you’ve generated the catalog with scaffolding, you need to have a basic understanding of the catalog. At least we know what it does, otherwise how can we program it? Here’s an analogy: you know a great entertainment place, you have been longing to experience, but you do not know the market and rules, the best you can do is to go to the bubble bath, eat buffet. This is the case for us now, so this lesson will take you through the React scaffolding to generate directories and files.

React AC Q group: 159579268

Files in the project root directory

Start by going to the root directory of your project, which is the file you see at first sight (this may vary from version to version)

Readme.md: This file is a description of the project, and it’s already written by default, so you can look at it briefly. If you are working, you can delete the contents of the file and write the file yourself. You can write the file using Markdown syntax.
Package. json: This file is the WebPack configuration and project package management file, the third-party packages (package version) and some common command configuration are configured in this file. Of course, scaffolding has configured some for us, so we don’t need to change the current position. If you’re familiar with WebPack, you’ll be familiar with this.
Package-lock. json: this is a file that locks the install version number and needs to be uploaded to Git to ensure that everyone else has the same dependencies when installing NPM.
Gitignore: This is a git optional upload configuration file, such as the node_modules folder, which will be introduced later.
Node_modules: This folder is our dependency package for the project, so far the scaffolding has been downloaded, you don’t need to install anything separately.
Public: a public file that contains common templates, ICONS, etc.
SRC: Main code writing files, the files in this folder are the most important for us to know.

Public Folder introduction

This file is the common file used by some projects, that is to say, it is shared. Let’s take a look at those files.

Favicon. ico: This is the icon of a website or project, usually displayed in the upper left corner of a browser TAB.
Index.html: the template file for the home page, we can try to change it and see the result.
Mainifest. Json: mobile configuration file, which will be covered in more detail in future lessons.

SRC folder introduction

This directory is our open source code, we usually do the most operations directory.

Index.js: This is the entry file for the project, which we’ll look at briefly in this video.
Index.css: This is the CSS file in index.js.
App.js: This file is equivalent to a method module, which is also a simple modular programming.
Serviceworker.js: This file is used to write mobile applications. PWA must use this file, which is equivalent to offline browsing.

Conclusion: I suggest that you learn this lesson by watching the video. The video will be more detailed and more hierarchical. You may not be able to learn from the article.

Section 05: HelloWorld and Components

In this lesson, we will delete all the files in the SRC directory and write a program called HelloWorld. We will learn about componentization in React by writing this program.

Entry file preparation

Create a new file named index.js in the SRC directory and open it.

Write the following four lines of code:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />,document.getElementById('root'))
Copy the code

In the code above, we first introduce two necessary files and then introduce an APP component. Currently, this component is not available, and it will take a while to build. Then use React syntax to render the APP module above the root ID. The rootID is in the public\index.html file.

Now that the entry file is ready, we need to write the APP component.

Writing of APP components

Now let’s write the App component, and we’ll write it the simplest way, just output Hello JSPang, and that’s it.

import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            <div>
                Hello JSPang
            </div>)}}export default App;
Copy the code

There is a difficult point here, that is:

import React, {Component} from 'react'
Copy the code

This is actually the syntax of ES6 – destruct assignment, which is clearer if you write it separately. You can write the top line of code as the bottom two lines.

import React from 'react'
const Component = React.Component
Copy the code

If you’re not familiar with ES6 syntax, you can write in this form.

When we have written both files, we can use the NPM start command on the terminal to see what we have written.

Summary: One of the main advantages of React is componentized writing, which is a basic form of modern front-end development. Therefore, we should use this idea when learning React. Only with constant practice, can we work with ease and ease. Let’s do it, guys.

Section 06: React JSX syntax introduction

Last time you looked at JSX syntax, which looks almost like HTML tags, and it is. JSX syntax does have a lot of caveats, but too much is not good for beginners. So in this lesson we will make a simple introduction to JSX syntax.

JSX profile

JSX is a combination of Javascript and XML. React invented JSX, which makes it easy to create a virtual DOM using HTML syntax. When encountered with <, JSX interprets it as HTML and when encountered with {it interprets it as JavaScript.

Let’s say we write a JSX syntax

<ul className="my-list">
    <li>JSPang.com</li>
    <li>I love React</li>
</ul>

Copy the code

For example, we used to write a code JS code:

var child1 = React.createElement('li'.null.'JSPang.com');
var child2 = React.createElement('li'.null.'I love React');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
Copy the code

As you can see from the amount of code, JSX syntax greatly simplifies our work.

Component and normal JSX syntax differences

This is a simple sentence: your custom components must start with a uppercase letter, and JSX starts with a lowercase letter.

This is also an important point of knowledge.

Ternary operators are used in JSX

In JSX, you can also use JS syntax. In this lesson, we will briefly explain the method of a ternary operator.

import React from 'react'
const Component = React.Component


class App extends Component{
    render(){
        return (
            <ul className="my-list">
                <li>{false? 'JSPang.com':' Tech fat '}</li>
                <li>I love React</li>
            </ul>)}}export default App;

Copy the code

Summary: After learning this lesson, you must have a simple understanding of JSX syntax. Actually, as a beginner, it is enough for us to know so much first. We’ll talk more about that as we go through the course.

Section 07: React Instance – Little Sister Service menu

Through six lessons, I have had a basic understanding of React. The best learning is to grow up in the actual combat, we began to make a “little sister service menu” application, practice the knowledge learned before and learn new knowledge. I’m not going to do CSS in this video, so I’m not going to do style layout.

Create a new little sister component

Now under the SRC directory, create a new file, xiaojiejie.js, and write a basic HTML structure. The code is as follows:

import React,{Component} from 'react'

class Xiaojiejie extends Component{
    render(){
        return  (
            <div>
               <div><input /> <button>Increase the service</button></div>
               <ul>
                   <li>The head massage</li>
                   <li>Essential oil TuiBei</li>
               </ul> 
            </div>)}}export default Xiaojiejie 
Copy the code

This file doesn’t have any functionality at the moment, just a finished widget. Then we change the
component of the entry file to Xiajiejie component.

Component outer wrapping principle

This is an important rule. For example, in the code above, if we remove the outermost

, we get an error because React requires that a component must be wrapped in the outermost layer.

Error code (because outermost package is missing):

import React,{Component} from 'react' class Xiaojiejie extends Component{ render(){ return ( <div><input /> <button> Add service </button></div> <ul> <li> Head massage </li> <li> essential oil push back </li> </ul>)}} export default XiaojiejieCopy the code

So when we write a component, we need to have a wrapper around the outermost layer of the component.

Fragment tag

Add the outermost DIV and the component is perfectly normal, but your layout doesn’t need the outermost tag. For example, when we do Flex layout, we really can’t have wrap elements around it. React16 has already taken this conflict into account by providing us with the

tag.

To use

, you need to import it first.

import React,{Component,Fragment } from 'react'
Copy the code

Then replace the outer

tag with the

tag.

import React,{Component,Fragment } from 'react'

class Xiaojiejie extends Component{
    render(){
        return  (
            <Fragment>
               <div><input /> <button>Increase the service</button></div>
               <ul>
                   <li>The head massage</li>
                   <li>Essential oil TuiBei</li>
               </ul> 
            </Fragment>)}}export default Xiaojiejie 
Copy the code

If you check Elements in your browser, you’ll find that there are no more outer wraps.

** Summary :** Next time we are going to implement the addition of services, look forward to the next episode driving with the tech fat.

Verse 08: React Instance – Sword sharpening is as good as theory

In this lesson, we will learn about the principle of responsive design and data binding method in React. As the saying goes, “Good sword sharpening should not be short of theory”. In this class, we’re not only going to write effects, but we’re also going to talk about theory, which is really important because it involves design ideas in React and what you’re going to do in the future.

Responsive design and binding of data

React doesn’t recommend manipulating DOM elements directly, but rather using data to drive changes in the interface. React automatically changes the interface based on data changes. So when you write React code, you don’t need to focus on the DOM, you just need to focus on the data. (This is why React is so popular, and it speeds things up a lot.)

Now the demand is to increase the little sister’s services, we need to define the data first. The data is defined in the Xiaojiejie component constructor.

// the js constructor, as any other function executes
constructor(props){
    super(props) // Call the parent constructor, fixed
    this.state={
        inputValue:' ' , // The value in input
        list:[]    // List of services}}Copy the code

React data binding is almost the same as Vue. It is also in the form of a literal (my own name), which is marked with {}. In fact, this is also a declaration of JS code. For example, if we want to bind the inputValue value to the input box, just write the following code. Basically, using JS code in JSX.

<input value={this.state.inputValue} /> 
Copy the code

Now we need to see if we can do the binding, so give inputValue to a ‘jspang’ and preview the effect. We’re not doing any DOM manipulation here, but the interface has changed. React does this for us, and it automatically senses data changes.

The binding event

When you enter the value in the text box on the screen, it doesn’t change anything, because we’re forcing the binding of inputValue. If you want to change, you need to bind the response event and change the value of inputValue. For example, bind a change event that executes the inputChange() method (which of course doesn’t have yet).

<input value={this.state.inputValue} onChange={this.inputChange} />
Copy the code

There is no inputChange() method yet, create an inputChange() method under render() as follows:

 inputChange(e){
        console.log(e);
    }
Copy the code

At this point you will find that the response event can be used, but how to get the value we entered, enter the following code in the program.

inputChange(e){
    console.log(e.target.value);
}
Copy the code

At this point, the console can print out the input value, as demonstrated in the video. When you get the inputValue, you assume that you can just change the value of inputValue (wrong).

inputChange(e){
    console.log(e.target.value);
    this.state.inputValue=e.target.value;
}

Copy the code

After writing and then preview, you will find that the program directly error (add a service is really a little difficult oh, big sword is not good to make………..) .

In fact, we made two mistakes:

One is thethisIt doesn’t point right. You need to use it againbindSet the point (ES6 syntax).
The other one isReactTo change the value requiredthis.setStateMethods.

The first error is easy to fix by going directly to the JSX section and using Bind.

 <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
Copy the code

And once we’ve done that, we also need to add a setState method to change the value. The code is as follows:

inputChange(e){
    // console.log(e.target.value);
    // this.state.inputValue=e.target.value;
    this.setState({
        inputValue:e.target.value
    })
}

Copy the code

Now test the input box and change the value. In fact, this lesson is very important. There is an important idea in React. Next time we really need to add services.

Lesson 09: React instance – Boss I need to add a clock

Now that we’ve built on last time, we’re finally ready to add services, to do whatever you want, whatever you want. In this lesson, we are going to add a reclining ear collecting service, and experience the treatment of a king.

Digitize the list

The current list is still written dead two

tags, that to become dynamic display, need to data the list first, and then use javascript code, loop in the page.

We’ll add two elements to the list array from last class, as follows:

constructor(props){
    super(props) // Call the parent constructor, fixed
    this.state={
        inputValue:'jspang' , // The value in input
        //---------- main code --------start
        list:['Basic Massage'.'Essential oil push back']   
        //---------- main code --------end}}Copy the code

Once you have the data, you can loop through the JSX section as follows:

render(){
    return  (
        <Fragment>
            <div>
                <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                <button>Increase the service</button>
            </div>
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return <li>{item}</li>})}</ul>  
        </Fragment>)}Copy the code

By completing the above steps, the data is no longer fixed but managed dynamically, setting the stage for further additions and making the rest of the steps seem easy.

Adding service options

To add service options, we need to bind a method called this.addList to the button (this method is not yet available and will need to be created next).

<button onClick={this.addList.bind(this)}>Increase the service</button>
Copy the code

Add the this.addList method as follows:

// Add a button response method for the service
addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue]
    })

}
Copy the code

The city that needs to be said here… This is a new syntax for ES6 called extension operators. That means you split the list into new arrays, and then you combine them. It’s easier and more intuitive, so it’s recommended.

After writing the above code, you should be able to achieve the increase of the project, you can try to add their favorite services into, such as “Chinese medicine soaked feet “……..

Resolve the key error

Happily, there are some pitfalls. Open your browser’s console F12 and you can clearly see an error. This error basically means that the key value is missing. React requires a different value to be set when using the map loop. We can do it in index+item form for now.

<ul>
    {
        this.state.list.map((item,index)=>{
            return <li key={index+item}>{item}</li>
        })
    }
</ul>  

Copy the code

This solved the problem, and now you can enjoy regal service in comfort.

Verse 10: React Example – A sword is too old to bear

Adding services is great, but sometimes requires moderation. Learn how to remove a service option. The requirement is that when we click on the option we already have, we delete it. This would have been cumbersome to write using native JS, but with React it becomes much easier.

Array subscript passing

If you want to delete something, you get a number in the array, which is the index. To generate an event for passing subscripts, bind a double – click event. The code is as follows:

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                >
                    {item}
                </li>
            )
        })
    }
</ul>  
Copy the code

For clarity, we add () to the return part so that we can write JSX code on a new line. OnClick we bind the deleteItem method.

write`deleteItem`methods

Now that we’ve done the binding, we need to add the deleteItem at the bottom of the code to the following code. The index method takes an argument.

// Delete a single service
deleteItem(index){
    console.log(index)
}
Copy the code

This is a good time to preview, you’ve got the subscript in the method.

Officially deleting data

Once the data subscript is obtained, it becomes easier to delete data. Declare a local variable, and then delete the value from the array using the passed subscript. Update data with setState after deletion.

// Delete a single service
deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
    
}
Copy the code

In fact, there is a pit, some of you will think that the following code is also correct.

// Delete a single service
deleteItem(index){
    this.state.list.splice(index,1)
    this.setState({
        list:this.state.list
    }) 
}
Copy the code

Remember that React does not allow you to directly manipulate state. Although the above method works, it can be troublesome to optimize performance later, so don’t do it. This is also a pit I stepped in when React was very early. I hope you can jump into the pit.

Section 11: React Advances -JSX anti-stomp pits in several places

React if you’ve learned how to React after making the “Great Sword” menu. It’s a good start. The road ahead will be long, but much smoother. This lesson will cover a few of the pitfalls of JSX syntax.

JSX code comments

JSX code comments are very elaborate, and there are very few in this book, so I will introduce them here, because the technology is not rich enough to learn React.

The first time I wrote a JSX comment, I wrote it directly like this, which of course is completely wrong.

<Fragment>
    // The first time I wrote a comment, this is wrong
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}>Increase the service</button>
    </div>
Copy the code

JSX comments can be written in either of the following ways:

<Fragment>
    {/* The correct way to write comments */}
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}>Increase the service</button>
    </div>
Copy the code

If you can’t remember, an easy way to do this is to use VSCode’s shortcut key, just press Ctrl+/ and it will automatically generate the correct comment.

You can think of this as writing javascript code in JSX. So we put {} inside, and inside is a multi-line javascript comment. If you want to use single-line comment //, you need to write the code like this.

<Fragment>
    {
        // Write the correct comment
    }
    <div>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
        <button onClick={this.addList.bind(this)}>Increase the service</button>
    </div>

Copy the code

That is, you need to wrap a line, so PERSONALLY I don’t think this is very elegant, so I recommend the first annotation method.

Class traps in JSX

For example, if we want to add yellow to the plain and simple interface, let’s make our text box thick and yellow. Let’s start with the error demo.

Step 1: Create a CSS style file. In the SRC directory, create a style. CSS style file.

.input {border:3px solid #ae7000}
Copy the code

Step 2: import in xiaojiejie. js, first import with import, import with import, all thanks to Webpack.

import './style.css'
Copy the code

Add ‘class’ to JSX. Note that the following code is wrong.

<input class="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} / >Copy the code

The page now displays results normally, but if you open the browser console, you will see a Warning.

index.js:1437 Warning: Invalid DOM property `class`. Did you mean `className`?
    in input (at Xiaojiejie.js:19)
    in div (at Xiaojiejie.js:18)
    in Xiaojiejie (at src/index.js:5)
Copy the code

Class name = ‘className’; class name = ‘className’; class name = ‘className’; It’s kind of a pit.

In the JSX`html`Analytical problem

If you want to enter a

tag in the text box and render it. The default doesn’t work, just prints the < H1 > tag to the page, which is not what I want. If you have this requirement at work, you can use the dangerouslySetInnerHTML attribute to resolve it. The specific code is as follows:

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                    dangerouslySetInnerHTML={{__html:item}}
                >
                </li>
            )
        })
    }
</ul> 

Copy the code

The above code implements the OUTPUT in HTML format.

In the JSX`<label>`The pit of the label

JSX pit, also a relatively large pit, label is an HTML auxiliary label, is also a very useful label.

First look at the following code, we put a in front of the text box.

<div> <label> Joins the service: </label> <input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} /> <button OnClick ={this.addlist.bind (this)}> Add service </button> </div>Copy the code

Click “Join service” to activate the text box for easy input. The original idea of HTML is to just add the ID. The code is as follows:

<div> <label for="jspang"> </label> <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} /> <button onClick={this.addlist.bind (this)}> Add service </button> </div>Copy the code

You can browse normally, but there is still a red warning on the console. You can’t use for. It can be confused with the for loop in javascript, which prompts you to use HTMLfor.

<div> <label htmlFor="jspang"> </label> <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} /> <button onClick={this.addlist.bind (this)}> Add service </button> </div>Copy the code

The code is now correct to activate the tag after clicking .

This section is my summary of some JSX bugs. I hope you can avoid these bugs and learn React quickly.

Section 12: React Advanced -Simple React Snippets

This lecture is very short, but I think it’s worth giving a separate lecture. In the work you often see program old driver write code is very fast, even let you fireworks dazzle, that they are really single for so many years, practice super fast? In this lesson, I’m going to introduce you to the Simple React Snippets in VScode. With the Simple React Snippets, with a little practice, you can have the magic hand of the Kato Eagle like an old driver.

The installation`Simple React Snippets`

Open VSCode’s plug-in lookup, type Simple React Snippets in the input box, and click install.

### Fast import

Typing imrc directly into vscode will quickly generate the most commonly used import code.

import React, { Component } from 'react';
Copy the code

Fast class generation

When writing components, you need to write a fixed basic format, so you can use the cc shortcut key. The plugin will quickly generate the following code for us:

class  extends Component {
    state = {  }
    render() { 
        return(a); }}export default ;
Copy the code

There are many more shortcuts, so I don’t need to nag you here, but if you need to understand, just open the plugin’s documentation and take a look. This plugin is recommended for friends to master, because in the boss’s eyes, the speed of writing code is directly related to our salary, but not related. Why don’t we spend the rest of our time watching little sister dance?

Section 13: React Advanced – Component splitting

Now the little sister service menu has been made perfectly, but we only use one component from the beginning to the end, but in the actual work, it must be team development, we will divide a big function into different components. For example, separate text fields and buttons from a component, and separate the list of services below from a component, which involves the ability and knowledge to split a component. This lesson is to break down the little Sister service menu.

Create a service menu component

In the SRC directory, create a new file, called xiaojiejieitem.js in this case, and write down the basic structure first.

import React, { Component } from 'react'; //imrc
class XiaojiejieItem  extends Component { //cc
   
    render() { 
        return ( 
            <div>The little sister</div>); }}export default XiaojiejieItem;
Copy the code

After writing these codes, you can import them into the xiaojiejie. js file with import, and the code is as follows:

import XiaojijieItem from './XiaojiejiItem'
Copy the code

### modify Xiaojiejie component

A newly written component has been introduced. How can the original code be modified to include the new component?

Comment out the original code, of course you can also delete it, HERE I comment out, comment method as follows:


{/*  
 */ }
Copy the code

Then add the wrap element

to the outermost layer to prevent more than two tags from generating an error message.

Finally, write Xiaojiejie tag directly.

<XiaojiejieItem />
Copy the code

For your convenience, give the full code:


import React,{Component,Fragment } from 'react'
import './style.css'
import XiaojiejieItem from './XiaojiejieItem'

class Xiaojiejie extends Component{
// the js constructor, as any other function executes
constructor(props){
    super(props) // Call the parent constructor, fixed
    this.state={
        inputValue:' ' , // The value in input
        list:['Basic Massage'.'Essential oil push back']    // List of services
    }
}

render(){
    return  (
        <Fragment>{/* Correct annotation */}<div>
    <label htmlFor="jspang">Joining the service:</label>
    <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}>Increase the service</button>
</div>
            <ul>{this. State. The list. The map ((item, index) = > {return (/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the key to modify the code, start<div>
                                <XiaojiejieItem />
                            </div>//---------------- ----end)})}</ul>  
        </Fragment>) } inputChange(e){ // console.log(e.target.value); // this.state.inputValue=e.target.value; Enclosing setState ({inputValue: e. arget, value})} / / response method addList increase service button () {enclosing setState ({ list:[...this.state.list,this.state.inputValue], InputValue: ""})} // deleteItem(index){let list = this.state.list list.splice(index,1) this.setstate ({list:list)  }) } } export default XiaojiejieCopy the code

In this lesson, we will use the React component to transfer values between its parents and its children.

Section 14: React Advanced – Passing values to parent and child components

Through the learning of the last class, we have made a basic split of the “little sister” component, but it is not able to display the input content as input. What is involved here is the parent component passing values to its children. Then click Delete, which is equivalent to the child component passing the value to the parent. In this lesson, we will learn some techniques for transferring values from parent and child components.

Parent component passes value to child component

Here are only the most practical and fastest ways to get started. A parent component passes a value to a child component in the form of a component property. For example, we add the content attribute to the

component and then pass {item} to the attribute, thus completing the parent component’s transfer of value to the child component.

<XiaojiejieItem content={item} />
Copy the code

Now that the value has been passed, you can accept it as this.props. XXX. For example, you can accept the value as follows.

import React, { Component } from 'react'; //imrc
class XiaojiejieItem  extends Component { //cc
   
    render() { 
        return ( 
            <div>{this.props.content}</div>); }}export default XiaojiejieItem;
Copy the code

After modifying the little sister subcomponent, you can open your browser to preview it. Try adding a few new options, such as recline ear collection….. .

Jokes aside, one thing to remember here is that parent components pass content to child components as properties.

The child component passes data to the parent

Now you need to do this: click on the menu item in the component, delete the change menu item. We learned this in the previous lesson, but now that components are split, we need to know how to pass data from a word component to its parent.

First bind the click event, of course, to bind the xiaojiejiejieitem component, the code is as follows:

import React, { Component } from 'react'; //imrc
class XiaojiejieItem  extends Component { //cc
   
    render() { 
        return ( 
            <div onClick={this.handleClick}>{this.props.content}</div>
         );
    }

    handleClick(){
        console.log('Tickled the little sister')}}export default XiaojiejieItem;
Copy the code

Preview, open F12, and click on the Services menu item. The words “ticked my sister” appear in the console. But the console also has a warning, which we have seen before, that the key must be set during the loop.

Modify the render code of XiaoJieJie component as follows:

<ul>
    {
        this.state.list.map((item,index) = >{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item} />)})}</ul>  

Copy the code

With the binding successful, it is now time to delete the data in the parent component by manipulating the child component. React explicitly states that child components cannot manipulate data in the parent component. Therefore, use a parent component’s method to modify the content of the parent component. In fact, we already wrote a deleteItem method, now all we need to do is call this method by the child component.

// Delete a single service
deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
    
}

Copy the code

Gets the array index index

The question now is whether to delete it without knowing the index value or passing it from parent to child. Again, this is passed as the props property.

<ul>
    {
        this.state.list.map((item,index) = >{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index} />)})}</ul>  
Copy the code

Then modify the XiaojiejieItem component and in the handleClick method write the following code:

handleClick(){
    console.log(this.props.index)
}
Copy the code

If you preview this, you’ll notice that when you click on it, you’ll get an error, again our old friend, no bind(this). We can bind this the old way.

return ( 
    <div onClick={this.handleClick.bind(this)}>
        {this.props.content}
    </div>
);
Copy the code

That’s easy to solve, but there’s always someone who says, well, I didn’t see it written this way, but it’s bound in the constructor. Constructors have better binding performance, especially in advanced component development.

Constructor binds this method.


import React, { Component } from 'react'; //imrc
class XiaojiejieItem  extends Component { //cc
   //-------------- main code --------start
   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)}//-------------- main code --------end
    render() { 
        return ( 
            <div onClick={this.handleClick}>
                {this.props.content}
            </div>
        );
    }
    handleClick(){
        console.log(this.props.index)
    }
}
 
export default XiaojiejieItem;

Copy the code

The child component calls the parent component method

If a child component calls a parent component method, it is the same as passing data, just pass the method to the child when the component calls. Remember to bind this as well. There is no way to find the parent component method without binding the child.

<ul>
    {
        this.state.list.map((item,index) = >{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}// Key code-------------------start
                deleteItem={this.deleteItem.bind(this)}// Key code-------------------end
                />)})}</ul>  
Copy the code

After passing, it can be used directly in the XiaojiejieItem component hi, the code is as follows:

handleClick(){
    this.props.deleteItem(this.props.index)
}

Copy the code

At this point, even if the child component has implemented passing values to the parent component. Note: This is an important lesson in the React system. Listen to it several times and practice it. Because the real React development work is to write various components every day, the transfer of values is a necessary link between components, cannot jump. So be sure to learn well.

Section 15: React Advanced – Monomial data streams and others

This class we speak something theoretical, such as: the React single data stream, the React with other frame work and functional programming concepts, this lesson may be a bit boring, because is the thing of a theory, but these knowledge both in the interview, or will often encountered in the work, so also is to jump a lesson of the past.

Single data flow

React features a concept called “single-item data flow”. If you are new to React, you may not understand this concept. Let’s take out the Demo of Little Sister Service Menu to explain it to you. For example, we can pass this.state.list directly from the parent component. For example:

<ul>
    {
        this.state.list.map((item,index) = >{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}
                list={this.state.list}
                deleteItem={this.deleteItem.bind(this)}
                />)})}</ul> 

Copy the code

The problem is that you can only use this value, you can’t change it. If you do, let’s say we write code like this:

handleClick(){
    // Key code -- ---------start
    this.props.list=[]
    // Key code -----------end
    this.props.deleteItem(this.props.index)
}
Copy the code

The following error is reported;

TypeError: Cannot assign to read only property 'list' of object '#<Object>'
Copy the code

This means that the list is read-only, a single data stream. So what if I want to change the value of the edge here? Actually, we talked about that last time, by passing in the parent component.

Work with other frameworks

React and jquery can be used together?

Answer: Yes, React can be modular and componentalized. Look at the /public/index.html file, which looks like this:


      
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="# 000000" />
   
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <! -- key code start-->
    <div id="root"></div>
     <! -- key code end-->
   
  </body>
</html>

Copy the code

React only applies to this

. The rest of the DOM outside is unaffected. For example, we’ll write a

underneath it and see what happens.

<div id="root"></div>
<div style="color:red">Had a good time today, the service is very satisfied!</div>
Copy the code

You can add anything to other divs, but it’s rare and I don’t recommend it. I hope you will unify the technology stack.

Functional programming

When interviewing React, one of the most common questions is: What are the benefits of functional programming?

Functional programming makes our code cleaner. Every function is a function.
Functional programming for our code test agent greatly convenient, easier to achieve front-end automation testing.

The React framework is also functional programming, so the benefits are even greater in massively multiplayer projects, making collaboration and communication easier.

Conclusion: Although this lesson is all theoretical knowledge, it is also a must to master because it is often asked in interviews.

Section 16: React Advanced – Installation and use of the debug tool

It’s already easy to write React code, and in my videos, I always use console.log to debug the program. React Developer Tools is a debugger for users who need to use React. In this lesson, learn how to download and use React Developer Tools.

Download React Developer Tools

This needs to be done in Chrome and requires scientific web surfing (I can’t teach this here, so do your own search).

Click on the far right of your browser’s address bar… , then select more tools, then extensions.
Click on the Chrome App store and search React in the search box.
Click Add to Chrome and wait for……….

This is recommended to watch the video, it is not complicated, but all need the diagram, I am too lazy to draw.

React Developer Tools in three states

React Developer Tools has three colors that represent three states:

Gray: This is not allowed to use, the page is not written with React.
Black: The description page is written in React and is in a build environment.
Red: The note page is written in React and is in a debug environment.

React Developer Tools

Open your browser, press F12, open developer Tools, and at the end of the panel, you’ll see React. This is the installed plugin.

Here you can see the React structure clearly, which makes your code much clearer. You can also see the group spacing data transfer, and you don’t need to write console.log to test the application.

Summary: In this lesson, we learned how to install and use the React debugging tool. The front-end debugging is done here, so we have a separate lesson to talk about it.

Section 17: React-advanced PropTypes validates passed values

The parent component uses properties, also known as props, to pass data to its children, but the little Sister service menu case doesn’t have any limitations. This is not allowed at work, because large projects, if you do not check, will become extremely chaotic later, the business logic can not be guaranteed.

Simple application of PropTypes

We passed four values in the xiaojiejie.js component, including strings, numbers, and methods, which can be restricted using PropTypes. PropTypes need to be introduced before use.

import PropTypes from 'prop-types'
Copy the code

After being introduced, we can reference the subcomponent below it. Note that the subcomponent is at the bottom (not inside the class), and write the following code:

XiaojiejieItem.propTypes={
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number
}
Copy the code

I’ll explain what that means in the video, watch the video. In order to prevent you from writing wrong, I give the code of this xiaojiejieitem. JS file here.

import React, { Component } from 'react'; //imrc
import PropTypes from 'prop-types'

class XiaojiejieItem  extends Component { //cc
   
   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
   }
   
    render() { 
        return ( 
            <div onClick={this.handleClick}>
                {this.props.content}
            </div>
        );
    }

    handleClick(){
        
        this.props.deleteItem(this.props.index)
    }
    
}
 //-------------- main code --------start
XiaojiejieItem.propTypes={
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number
}
 //-------------- main code --------end
export default XiaojiejieItem;
Copy the code

When you look at it in your browser, you don’t see anything, and you have to fix an error check. Let’s say index must be a string.

index:PorpTypes.string
Copy the code

The browser console displays an error message:

Warning: Failed prop type: Invalid prop `index` of type `number` supplied to `XiaojiejieItem`, expected `string`.
    in XiaojiejieItem (at Xiaojiejie.js:28)
    in Xiaojiejie (at src/index.js:5)
Copy the code

That means we’re asking for strings, and we’re passing numbers, so we’re giving a warning.

## verify the required values

For example, if we add an avName attribute and put it in JSX, we will not get an error without passing this value. The code is as follows:

render() { 
    return ( 
        <div onClick={this.handleClick}>{this.props. Avname} do this for you - {this.props. Content}</div>
    );
}
Copy the code

It doesn’t matter if we pass it or not. So let’s say we pass in a property.

<ul>
    {
        this.state.list.map((item,index) = >{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}
                avname='Hatano Knot coat'
                deleteItem={this.deleteItem.bind(this)}
                />)})}</ul>  
Copy the code

The page displays normally, but how do I avoid having to pass the avName attribute value? An error is reported if it is not passed, which requires the isRequired keyword, which indicates that it must be passed, and an error is reported if it is not.

avname:PropTypes.string.isRequired

Copy the code

### defaultProps

Some people are very shy, he is embarrassed to choose, so sometimes it is necessary to have a default person to serve her. DefalutProps can do the default function, for example, now set the default for AVName to “Pine Island Maple” and remove the avName property.

XiaojiejieItem.defaultProps = {
    avname:'Matsushima Maple'
}
Copy the code

In fact, the type of detection is very much, you had better go to the official document to see, can get more comprehensive understanding. The following lessons are useful for specific types and will continue to be explained to you.

Section 18: Use of the React advanced -ref

When writing methods in components, you often encounter code that is semantically ambiguous, which can be a major problem for team development. Reviewing code or collaborating with others can affect development efficiency. Or to this core members leave, the serious impact of the project closure. So we have to pay attention to semantics in react code. Ref is a great tool, so let’s learn it.

In place of`e.target.value`

In the previous case, we wrote the following code, using E.target, which was not intuitive or pretty. We can use ref to solve this situation.

inputChange(e){
    
    this.setState({
        inputValue:e.target.value
    })
}
Copy the code

If you want to use ref, you need to bind in JSX now, preferably using the arrow function in ES6 syntax to bind DOM elements neatly.

<input 
    id="jspang" 
    className="input" 
    value={this.state.inputValue} 
    onChange={this.inputChange.bind(this)}
    // Key code -- ----------start
    ref={(input)=>{this.input=input}}
    // Key code ------------end
    />
Copy the code

After binding, you can rewrite the above class as follows:

inputChange(){
    this.setState({
        inputValue:this.input.value
    })
}
Copy the code

This makes our code much more semantic and elegant. However, from my personal experience, I do not recommend using ref to operate like this, because React is data-driven, so there will be various problems with ref.

`ref`Pit in use

For example, if we want to use the ref binding to get the number of services, we can use the ref binding first.

<ul ref={(ul)=>{this.ul=ul}}>
    {
        this.state.list.map((item,index) = >{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}
                deleteItem={this.deleteItem.bind(this)}
                />)})}</ul>  
Copy the code

After binding, you can get the current

value in the addList() method.

 addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:' '
    })
    // Key code --------------start
    console.log(this.ul.querySelectorAll('div').length)
    // Key code --------------end

}
Copy the code

When you open the console and click the Add service button, how much less will you cash back? React is an asynchronous function with more setState. So setState, there’s a time period for code execution, and if you really want to know, you need to have an understanding of what the virtual DOM is. Simply put, because it is asynchronous, our console.log will be executed before the virtual Dom is rendered.

So what would make this code perfectly normal is that setState actually provides a callback function, which is its second function. So let’s write it this way to get the method we want.

addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:' '
        // Key code --------------start= > {}, ()console.log(this.ul.querySelectorAll('div').length)
    })
    // Key code --------------end
}
Copy the code

Now go to the browser and look at the code, and it’s perfectly normal. This lesson mainly studied the usage of ref and the pit in ref. After you learn it, practice it. You can’t learn code without practice.

Section 19: React Advanced – Life Cycle Tutorial -1

The life cycle of React is very important, so you can read the course about the life cycle of React for several times. I will also try to explain the life cycle of React in detail. I’m going to break the life cycle course into three sections so it’s easier for you to understand.

React life cycle diagram

This graph looks a little complicated, but don’t panic, I’ll break it down for you.

Here you can see the four phases of the React declaration cycle:

Initialization: Initialization phase.
Mounting: Hanging in phase.
Updation: Update phase.
Unmounting: Destruction stage

What is a lifecycle function

If I had to explain the life cycle function in one sentence, I think it can be explained in this sentence:

Lifecycle functions are functions that are automatically invoked and executed by the component at some point in time

Example: write the little sister’s example. The render() function inside is a lifecycle function that executes automatically when state changes. This is a standard autoexecute function.

constructorNot a life cycle function.

Constructor we call the constructor, which is the basic syntax of ES6. Although it has the same properties as a lifecycle function, it cannot be considered a lifecycle function.

But you have to mentally think of it as a lifecycle function. I personally think of it as the Initialization phase of React, defining the props and the state.

Mounting stage

Mounting Stage The Mounting stage is called Mounting stage. Along with the generation of the entire virtual DOM, there are three small life cycle functions:

componentWillMount: executes when the component is about to be mounted to the page.
render: executes when the page state or props changes.
componentDidMount: executed when component mount is complete.

ComponentWillMount code

componentWillMount(){
    console.log('componentWillMount---- The time the component will be mounted to the page ')}Copy the code

ComponentDidMount code

componentDidMount(){
    console.log('componentDidMount---- componentDidMount completed at the time of execution ')}Copy the code

Render the code


render(){
    console.log('Render - component mount....... ')}Copy the code

At this point, we check the console, which will display the following message:

ComponentWillMount ---- executes at the time the component is to be mounted to the page render---- starts the mount render componentDidMount---- executes at the time the component is mountedCopy the code

This is also the order of the life cycle. Some people ask me, “Is there an order in which this function is written?” Which comes first? Which one is behind? In fact, there is no order, you can change the order of them.

Issues for attention

ComponentWillMount and componentDidMount are only executed once on a page refresh, while the render function is executed whenever there are state and props changes.

I’ll give you an example in the video.

Summary: this lesson explains the React function of life cycle, first has a simple to understand the React function the four stages of life cycle, and then a detailed study the Mounting mount the stage of the three life-cycle function. Next time we’ll look at the life cycle functions of the Updation stage.

Section 20: React Advanced – Life Cycle Tutorial -2

This section continues with the Updation phase of the React lifecycle, which is the update phase when components change. This phase is a complex part of the React lifecycle. One is state state changes (which can be clearly seen in the life cycle picture).

ShouldComponentUpdate function

ShouldComponentUpdate is executed automatically before the component is updated. For example, write the following code:

shouldComponentUpdate(){
    console.log('shouldComponentUpdate- executed before component changes')}Copy the code

It requires that the result be returned as a Boolean and must have a return value, which in this case will be true (which is useful in real development).

shouldComponentUpdate(){
    console.log('shouldComponentUpdate- executed before component changes')
    return true
}
Copy the code

You can now see the result in the console console, and the result is that it changes every time the text box changes. If you return false, the component will not be updated. Simply put, return true to allow component updates; Return false to disallow component updates.

ComponentWillUpdate function

ComponentWillUpdate is executed before component updates, but shouldComponenUpdate is executed after. But if shouldComponentUpdate returns false, this function is not executed.

//shouldComponentUpdate returns true to be executed.
componentWillUpdate(){
    console.log('componentWillUpdate- before component update, shouldComponentUpdate after ')}Copy the code

componentDidUpdate

ComponentDidUpdate is executed after a component update and is the last part of the component update.

componentDidUpdate(){
    console.log('componentDidUpdate---- component updates after execution ')}Copy the code

To make it easy to see the result, we can prefix each function with an ordinal number. Finally, we can see the console output as follows:

1-shouldComponentUpdate-- Before componentWillUpdate-- Before componentUpdate, ShouldComponentUpdate function after executing 3-render---- to start mounting render 4-ComponentDidupdate ---- component after updatingCopy the code

The React lifecycle function is the same as the sequence we wrote it in.

ComponentWillReceiveProps function

We can first write this function in the xiaojiejie.js component, such as the following code.

componentWillReceiveProps(){
    console.log('componentWillReceiveProps')}Copy the code

You’ll notice that the function is never executed because xiaojiejie. js is a top-level component that doesn’t receive any props. You can move this function to the xiaojiejieitem.js component.

Every component has a lifecycle function, so a child component has one, and the child component receives props, so the function can be executed.

componentWillReceiveProps(){
        console.log('child - componentWillReceiveProps')}Copy the code

When the preview again, you will see componentWillReceiveProps carried out. Now you can summarize its execution time.

The child receives the arguments from the parent, the parent’s render function is executed again, and the lifecycle is executed.

That is, the first time the component exists in the Dom, the function is not executed;
Functions are executed only if they already exist in the Dom.

This life cycle is a complicated one, and it will take us a while to digest.

In this class, I explained all the life cycle functions in Updation. In the next class, I will try to finish the rest Unmounting and then talk about the practical application of the life cycle.

Section 21: React Advanced – Life Cycle Tutorial -3

This tutorial is a minor supplement to the last React lifecycle function. The function is called componentWillUnmount, which is executed when a component is removed.

ComponentWillUnmount function

This function is executed when the component is removed from the page, such as in xiaojiejieitem.js, and writes the following code:

// Executes when the component is removed from the page
componentWillUnmount(){
    console.log('child - componentWillUnmount')}Copy the code

After writing, we can go to the browser terminal to view the result. When we click on the service item, the service is deleted, and this function is executed.

Summary: After three lessons, we have covered all the life cycle functions of React. In the next lesson, we will talk about the application of life cycle functions in actual development.

Section 22: React Advanced – Life cycle improves application performance

Now that you know the React lifecycle, how can you use it to improve component performance? In this lesson we will use shouldComponentUpdate to improve React component performance. In order to make this lesson more clear, you can delete the life cycle functions from the previous lectures.

The little sister component has a performance problem

Yes, the xiaojie component is already familiar, but it has a performance problem that I haven’t told you about, and that is the frequent useless render of the xiaojiejiejieitem subcomponent. How can we see this problem?

Make sure you have React Developer Tools installed. If you don’t have React Developer Tools installed, you can learn how to install it in the previous tutorial. With this browser plugin, you can find the React TAB in the console, then click on Settings on the right and select Highlight Updates.

When you type in the browser text box, you can clearly see that the child component has also been rerendered.

Many programmers will ignore this performance drain as nothing serious, but software lag happens little by little, so performance drain must be reduced.

You can add the following code to the render function of xiaojiejieitem. js to see the problem more directly.

render() { 
    console.log('child-render')
    return ( 
        <div onClick={this.handleClick}>{this.props. Avname} do this for you - {this.props. Content}</div>
    );
}

Copy the code

using`shouldComponentUpdate`To solve

This may seem small, but when your page is complex enough to affect the user experience, don’t kid yourself. ShouldComponentUpdate is a simple way to solve this problem.

Add the following code directly to xiaojiejieitem.js:

shouldComponentUpdate(){
    return false;
}
Copy the code

At this point in the browser view, the problem is no longer. But this is too violent and negates everything, so if you need to change the value attribute value in a real project, you can’t do it. So we can be a little more elegant and write the following code.

ShouldComponentUpdate takes two arguments:

NextProps: Changed properties;
NextState: The changed state;

shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content ! = =this.props.content){
        return true
    }else{
        return false}}Copy the code

The code is now more elegant and less violent. This improves the quality of the code you write, even if the rendering performance of the subcomponents is solved perfectly. In fact, in the React interview, the TODOList app will be written by this to distinguish the level, can write, this is the average programmer; Those who can write and optimize performance are experienced programmers.

Section 23: React Advanced – AXIos data requests

In this lesson, we will learn about remote data requests. As you probably know, Ajax can make remote requests, but it is too complicated to write. We will use Axios, the application’s Ajax request framework, to make remote requests.

Install Axios

The installation of Axios can be done using NPM. You can enter the following code directly in the project root directory.

npm install -save axios
Copy the code

After entering, you can start the installation.

NPM install-save is confused with -save-dev

NPM install XXX: Installs the project into the project directory without writing module dependencies to devDependencies or dependencies.
NPM install -g XXX: -g means to install the module globally, depending on the location of NPM cinfig prefix
NPM install-save XXX: -save means to install the module to the project directory and write dependencies in the dependencies node of the package file.
NPM install-save-dev XXX: -save-dev installs the module into the project directory and writes dependencies to devDependencies in the package file.

As a front end, be aware of the four uses of NPM install to prevent project dependency errors when someone else downloads your code and it doesn’t work.

Axios requests data

After axiso is installed, you need to introduce AXIos where ajax is used. For example, if you want to use axios’ in xiaojiejie.js, write the following code to introduce axios:

import axios from 'axios'
Copy the code

I also recommend executing ajax in componentDidMount (render) because there are a lot of issues with executing ajax in Render. Execute in componentWillMount, and when you use RN, you get collisions. So it’s highly recommended to make ajax requests in the componentDidMount function.

componentDidMount(){
    axios.post('https://web-api.juejin.im/v3/web/wbbr/bgeda')
        .then((res) = >{console.log('Axios succeeded in getting data :'+JSON.stringify(res))  })
        .catch((error) = >{console.log('Axios fails to get data'+error)})
}
Copy the code

The above code makes an Ajax request using an interface from the nuggets as an example. And the data was requested and returned to us. Summary: This lesson learned the simple usage of Axios and requested the data interface of a gold digging website in the simplest way. Ajax requests are often used in your projects as a bridge between reading and writing data, so it’s important to use Axios for Ajax requests as you learn React.

Section 24: React Advanced -Axios requests EasyMock

The last lesson was just a test of skill, using a temporary interface of the Nuggets, this interface is not written by myself, may not be able to use at any time. This process is often called mocking. You can use software to simulate data locally, but as a cloud analyst, I prefer to use easy-mock to simulate interface data.

EasyMock creates a new interface

EasyMock website: www.easy-mock.com/

And then if you don’t register, you have to register, and the rest of the process is going to be in the video, because this is all kind of graphical stuff, and I’ll go through it in detail in the video.

To create the interface, write the following code:

{
  "data": [' basic massage ', 'lying ear picking ',' Herbal foot soaking ']}Copy the code

Then in the Axios code section of the last lesson, change the request to GET, and then preview it to the console to see the result.

componentDidMount(){
    axios.get('Change to your own interface URL')
        .then((res) = >{console.log('Axios succeeded in getting data :'+JSON.stringify(res))  })
        .catch((error) = >{console.log('Axios fails to get data'+error)})
}
Copy the code

At this point you should be able to get the interface data, which means that our interface is made properly, which is very similar to the real interface in our project.

Modify program to dynamic interface

Now that the remote data is available on the client, all that remains is setState, which looks like this:


componentDidMount(){
    axios.get('xxxx')
        .then((res) = >{
            console.log('Axios succeeded in getting data :'+JSON.stringify(res))
           
            this.setState({
                list:res.data.data
            })
          })
        .catch((error) = >{console.log('Axios fails to get data'+error)})
}

Copy the code

You can also use the React application, but instead of writing dead stuff, you can use remote interface data.

In this lesson, you will learn how to use the React remote request interface. You will learn how to use the React remote request interface in the future.

Section 25: React Advanced – Implement React animations with CSS3

Front-end animation technology development to now, can be independent of a post. At present, I do not belong to the animation post, and my ability is limited. I just talk to my friends and do some common front-end effects. In this lesson, we will use CSS3 to create a hidden animation effect in React. Note that this is implemented with CSS3, but React only does business logic.

Create a new Boss component

In fact, you can call this component whatever you want, I also came up with it on the fly.

Need to add a Boss service character to “little sister service menu”, click the button will automatically appear “Boss level character – Sun Wukong “, regardless of what is appropriate or not, we are to practice animation. Create a new boss.js file in the SRC folder. Then generate the basic structure in a fast way:

Before using these commands, make sure you have the Simple React Snippets plug-in installed in VSCode.

First the inputimrcAnd then enter, this is for useimportThe introduction ofReactandcomponent.
Input againcccAnd then press Enter to generate the most basic bandconstructorCode structure.

The following basic code is generated (2 seconds to complete the code below, which is the key to your productivity) :


import React, { Component } from 'react';
class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return(a); }}export default Boss;
Copy the code

Then we’ll start by writing some JSX code to have a text and a button on the page. The code is as follows:

import React, { Component } from 'react';
class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <div>
                <div>BOSS character - Sun Wukong</div>
                <div><button>Call the Boss</button></div>
            </div>); }}export default Boss;
Copy the code

Writing business logic

Currently the component does not have any business logic and only has a UI, which is impossible to animate. The business logic is to change the word when a button is clicked.

‘Show hide. To implement this business logic, start with
constructorAdd the state value in
isShowFor details, see the code below.

this.state = { 
    isShow:true
}
Copy the code

Then put the “word” of ‘

‘section, added
classNameAnd use
isShowControl.

<div className={this.state.isShow ? 'show' : 'hide'}> < div>Copy the code

ToToggole (); toToggole(); toToggole(); toToggole();


toToggole(){
    this.setState({
        isShow:this.state.isShow ? false : true})}Copy the code

This means that when isShow is true, we assign false; When isShow is false, we assign true.

<div><button onClick={this.toToggole}>Call the Boss</button></div>
Copy the code

After writing this event, we still need to bind this to Constructor. The code is as follows:

constructor(props) {
    super(props);
    this.state = { 
        isShow:true
    }
    this.toToggole = this.toToggole.bind(this);
}

Copy the code

In this way, even if our basic business logic is finished, we can add the code to Xiaojiejie component and see the effect.

Add CSS animation

You don’t see any effect on the page, but if you open the browser console you can see that the class changes every time you click the button. The interface didn’t change, we didn’t write CSS. You can now write styles in style.css as follows:

.show{ opacity: 1; transition:all 1.5 sease-in; }.hide{opacity: 0; transition:all 1.5 sease-in; }Copy the code

This is how CSS3 implements React animations. This is the easiest way to do it, so don’t make fun of it. In the next few lessons, we will continue to talk about React animations. Keep learning with tech fat.

Section 26: React Advanced -CSS3 keyFrames animation

You can only do the simplest animations with Transition, and if you want to be a little more complicated, you can’t do transition. At this point, you can animate keyframes with CSS3. This lesson will take a few minutes to learn about keyframes. If you have a good knowledge of CSS3 animations, you can definitely skip this lesson.

Keyframes animation introduction

This attribute is closely related to animation attribute. Keyframes translated into Chinese are keyframes. I first came into contact with the concept of this keyframe in flash, which has retired from the historical stage now. The advantage it has over Transition is that it can define animations in more detail. For example, we set the button hide animation in last class, and we can not only set the transparency, but also set the color.

@keyframes hide-item{
    0% {
        opacity:1;
        color:yellow;
    }
    50%{
        opacity: 0.5 ;
        color:red;
    }
    100%{
        opacity:0;
        color: green; }}Copy the code

This is your animation done, but the animation is not used yet.

Use animation

Use the keyword animation, followed by the name of the animation you created, as in this code.

.hide{ animation:hide-item 2s ease-in ; }
Copy the code

Using a hide-item animation, the duration is 2 seconds, and the effect is slowed from slow to fast (slow at first, then fast).

But you can see that once the animation has been executed it will be restored because of the forward property, which is used to manage the stops until the last frame. Let’s rewrite the code like this.

.hide{ animation:hide-item 2s ease-in forwards; }
Copy the code

Implementation of the complete code

The animation of keyframes has been basically learned, next we will modify all the code to the form of keyframes. All codes are as follows:

.show{ animation:show-item 2s ease-in forwards; }
.hide{ animation:hide-item 2s ease-in forwards; }

@keyframes hide-item{
    0% {
        opacity:1;
        color:yellow;
    }
    50%{
        opacity: 0.5 ;
        color:red;
    }
    100%{
        opacity:0;
        color: green; }} @keyframes show-item{
    0% {
        opacity:0;
        color:yellow;
    }
    50%{
        opacity: 0.5 ;
        color:red;
    }
    100%{
        opacity:1;
        color: green; }}Copy the code

Summary: Keyframes can only achieve very simple animation effects. It is better to use wheels made by others for some complex animations. Next class, we will continue to learn animation in React.

Lesson 27: React-advanced -react-transition-group

React has an excellent development ecosystem. Any basic requirements for development can be found in official or god made wheels, and animation is no exception. There are many third party animation components in the React ecosystem, so you should learn the React -transition-group animation component. At present, I have good performance in my work and can meet the needs of daily animation development.

The most important reason to recommend it is that it is also an official React animation transition library with a well-documented API (so good that I’m embarrassed to mention it again).

Install the react – the transition – group

To use it, you need to install it first. NPM is used to install it, and YARN can also be used.

Use VSCode to open the root directory of the project, then open the terminal, and enter the following command to install:

npm install react-transition-group --save
Copy the code

Once installed, you can check out the documentation on Github, which has three core libraries (or components).

Transition
CSSTransition
TransitionGroup

Use CSSTransition # # #

In fact, this library is similar to the root of nG-animate, so let’s look at how to use CSSTransition.

Use import to start with the following code:

import { CSSTransition } from 'react-transition-group'
Copy the code

Once introduced, it is ready to use, just as you would with a custom component:

, and you no longer need to manage the className, which is managed by CSSTransition. Modify the render field in the boss.js file from last class.

render() { 
    return ( 
        <div>
            <CSSTransition 
                in={this.state.isShow}// Is used to determine whether the state is presenttimeout={2000}// Animation durationclassNames="boss-text"   //classNameValue to prevent duplication >
                <div>BOSS character - Sun Wukong</div>
            </CSSTransition>
            <div><button onClick={this.toToggole}>Call the Boss</button></div>
        </div>
        );
}
Copy the code

Note that the classNames attribute belongs to S, so if you forget to write classNames, you will get confused with the original ClassName.

We modified the code from last time so that you can rewrite the style in CSS. Before changing the style, there are those class names.

Xxx-enter: the CSS style before entering.
Xxx-enter-active: enter the CSS style until the animation is finished;
Xxx-enter-done: enter the finished CSS style;
Xxx-exit: CSS style before exit (exit);
Xxx-exit-active: Exit animation knows the CSS style before completion.
Xxx-exit-done: CSS style when the exit is complete.

Now that you know what CSS to set, you can delete the original CSS and write the following:

.input {border:3px solid #ae7000}

.boss-text-enter{
    opacity: 0;
}
.boss-text-enter-active{
    opacity: 1;
    transition: opacity 2000ms;

}
.boss-text-enter-done{
    opacity: 1;
}
.boss-text-exit{
    opacity: 1;
}
.boss-text-exit-active{
    opacity: 0;
    transition: opacity 2000ms;

}
.boss-text-exit-done{
    opacity: 0;
}
Copy the code

Your animation style will now be normal, and you’ll notice that we don’t have to manage the classnames ourselves anymore, we’ve got to hand it all over to the React-transition-group.

UnmountOnExit properties

Learn here, will feel so write also did not simplify how much, more no special effect, technology fat you play me again.

In fact, this is not true. For example, if we add unmountOnExit to

, this means that when the element exits, the DOM is automatically deleted, which is not possible with CSS animation before.

For example, let’s write our code like this:

render() { 
    return ( 
        <div>
            <CSSTransition 
                in={this.state.isShow}// Is used to determine whether the state is presenttimeout={2000}// Animation durationclassNames="boss-text"   //classNameValue to prevent duplicationunmountOnExit
            >
                <div>BOSS character - Sun Wukong</div>
            </CSSTransition>
            <div><button onClick={this.toToggole}>Call the Boss</button></div>
        </div>
        );
}
Copy the code

React: React-transition-group (react-transition-group) Next time, we’ll continue learning about hook functions and transition-groups in the animation library.

Section 28: React Advanced – Multi-DOM animation and writing

We learned in the last section that we can only animate one DOM element, and we can animate multiple react-transition-groups. In this tutorial you will learn how to control multiple DOM animations.

use`TransitionGroup`

It is responsible for the animation of multiple DOM elements, let’s take the example of the little sister, now you can add any service items, but all appear directly, no animation, now add animation to it. To add an animation, introduce transitionGrop first.

Open the/SRC/xiaojie. js file directly, and then at the very top at the same time

import {CSSTransition , TransitionGroup} from 'react-transition-group'
Copy the code

Once imported, this component is ready to use by adding the
tag to the outer layer.

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
    {
        this.state.list.map((item,index)=>{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}
                deleteItem={this.deleteItem.bind(this)}
                />)})}</TransitionGroup>
</ul> 
Copy the code

This needs to be placed outside of the loop to form a group animation, but this
alone is not enough, you still need to add

to define the animation.

join`<CSSTranstion>`The label

We can completely imitate the experience of last class, add specific animation Settings for Xiaojiejie component, and realize the animation effect of multiple DOM elements. The code is as follows:

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
    {
        this.state.list.map((item,index)=>{
            return (
                <CSSTransition
                    timeout={1000}
                    classNames='boss-text'
                    unmountOnExit
                    appear={true}
                    key={index+item}  
                >
                    <XiaojiejieItem 
                    content={item}
                    index={index}
                    deleteItem={this.deleteItem.bind(this)}
                    />
                </CSSTransition>)})}</TransitionGroup>
</ul>  
<Boss />
</Fragment>

Copy the code

Summary :React animation has a lot of knowledge and can produce a lot of cool effects, which can be divided into a separate position. I use simple animation in my work, and the use of React-transition-group animation can fully meet my daily development needs. If you want to learn more about React animations, check out the documentation or books.

After learning the basics of React, we will start with Rudex in the next class. I hope you can continue to learn from the technology fat and make progress together.

Technology fat 315 video town building

1-React (New) Basic free video tutorial

React Introduction (315)
React vs. Vue (314)
React Development Environment (313)
Introduction to the Project Catalog generated by scaffolding (312)
HelloWorld and Components (311)
React JSX syntax introduction
React Instance – Little Sister Service Menu (309)
React instance – A good sword grind, a good theory (308)
React instance – Boss I need to add a clock
React instance – The sword is too old to bear (306)
React Advanced -JSX anti-tread pit (305)
React Advanced -Simple React Snippets(304)
React Advanced – Components Split (303)
React Advanced – Parent and child components pass values (303)
React Advanced – Monomial Data Streams and Others (302)
React Advanced – Install and Use the React Debugging tool (301)
React Advanced PropTypes check pass value (300)
React-advanced ref (299)
React Advanced – Life Cycle Tutorial -1(298)
React Advanced – Life Cycle Introduction -2(297)
React Advanced – Life Cycle Tutorial -3(296)
React Advanced – Lifecycle Improvements to Application Performance (295)
React Advanced – Axios Data Requests (294)
React Advanced -Axios Request EasyMock(293)
React Advanced – CSS3 React Animation (292)
React Advanced -CSS3 KeyFrames Animation (291)\
The React senior – React – the transition – group (290).
React Advanced – MultiDOM Animation and Writing (289)

The basics of 2-FLUTTER Video Tutorial

Get to know Flutter(288)
Build a Flutter Development Environment for Windows (287)
Build a Mac Version of Flutter Development Environment (286)
Install the AVD vm Flutter to run
How to play with Flutter(284)
Write a HelloWorld program (283)
Use of Text Components in Text Widgets (282)
Use of Container Components 1(281)
Use of Container Components 2(280)
Use of Image components (279)
Introduction to ListView Components (278)
Use of horizontal Lists in ListView (277)
The Use of ListView Dynamic List (276)
GridView Grid List Component (275)
Use of Flutter- Horizontal layout Row (274)
Flutter- Vertical Layout Column Component
Stack layout of Flutter (272)
21. Stack’s toy attribute (271)
Card Component Layout (270)
General Page Navigation and Return (269)
Transmission and Reception of navigation parameters (1)
Transmission and Reception of navigation parameters (2)
Page jump and return data (266)
Processing of Static Resources and project images (265)
Package the Flutter client (264)

3-Flutter 20 short examples of practice

Bottom navigation bar crafting -1(263)
Bottom navigation bar crafting -2(262)
Irregular bottom toolbar making -1(261)
Irregular bottom toolbar Making -2(260)
Cool Route Animation -1(259)
Cool Route Animation -2(258)
Frosted Glass Effect Making (257)
Keep the page state (256)
Keep the page state -2(255)
A not simple search bar -1(254)
A Not simple Search bar -2(253)
Add Photo Effects to Streaming Layout Simulation (252)
Expansion and Closure Case (251)
Expand closed list case (250)
Bessel curve cutting (249)
Bezier curves in wave Form (248)
Example of opening application flash animation (247)
Right click back to previous case (246)
ToolTip Control instance (245)
Draggable Control Instance (244)

Free Video Tutorials for ES6 (18 episodes)

ES6 Development Environment Construction (243)
New Forms of declaration (242)
Deconstructive Assignment of variables (241)
Extended and REST operators (240)
String Template (239)
ES6 Digital Operations (238)
New Array knowledge in ES6 (1) (237)
New Array knowledge in ES6 (2) (236)
Arrow functions and Extensions in ES6 (235)
ES6 functions and arrays (234)
Objects in ES6 (233)
The Role of Symbol in objects (232)
Set and WeakSet data structure (231)
Map Data Structure (230)
Preprocessing with Proxy (229)
Use of Promise objects (228)
Use of the Class class (227)
Modular Operation (226)

Nginx free Tutorial (11 episodes)

Introduction to Nginx and environment Preparation (225)
Nginx Quick Build (224)
Nginx basic configuration file
Nginx service start, Stop, Restart (222)
Customizing error pages and access Settings (221)
Nginx access permissions (220)
Nginx Setting up a virtual host (219)
Nginx using domain names to set virtual hosts (218)
Nginx Reverse Proxy Setup (217)
Nginx for PC or Mobile Devices (216)
Gzip Configuration for Nginx (215)

6-TypeScript With Deno Preview (15 episodes)

I met TypeScript (214).
Installation of the Development Environment (213)
Things about variable types (212)
TypeScript Functions (211)
Three Definitions of Functions (210)
Scope of variables in a function (209)
Reference Type – Array (208)
Reference type – String (207)
Reference Types – Date Objects (206)
Reference Types – Regular Expressions (205)
Object-oriented Programming – Declaration and Use of Classes (204)
Object-oriented Programming – Modifiers (203)
Object-oriented Programming – Inheritance and Rewriting (202)
Object-oriented Programming – Interfaces (201)
Object-oriented Programming – Namespaces (200)

Nuxt.js – Start SSR rendering with nuxt.js

Introduction to NuxtJS Courses (199)
Hello World with Nuxt (198)
Nuxt Common Configuration Items (197)
Nuxt Routing Configuration and Parameter Passing (196)
Dynamic Routing and Parameter Verification for Nuxt (195)
Nuxt Routing Animation (194)
Default Templates and Default layouts for Nuxt (193)
Nuxt error pages and personality meta Settings (192)
AsyncData method to fetch data (191)
Static resources and packaging (190)

8- Free videos from CocosCreator from basics to combat

About CocosCreator and HelloWorld(189)
Software Interface Introduction and Bouncing Ball (188)
Scene Introduction and Basic Operations (187)
Player input event monitor (186)
Prefab and Timer (185)
Field games – Introduction and Project Analysis (184)
Combat -UI Layout (183)
Action – Listening and beating of the Main Character (182)
Combat – Randomly generated Thorns (181)
Combat – Click to generate spikes and movement (180)
Combat – Collision Detection (179)
Actual Combat – Countdown and score increase (178)
Actual Combat – Writing code for welcome Interface (177)
Actual Combat – Adding Sound effects (176)
Combat – Release game (175)

9- Full Stack MongoDB Basics

Understanding and Installing MongoDB(174)
Mongo Basic Commands -1(173)
Mongo Basic Commands -2(172)
Write mongo command with js file (171)
The correct Way to Batch Insert (170)
Modified: Update common errors (169)
Update modifier (168)
Modify: Update array modifier (167)
Modified: State Return and Security (166)
Query: Unequal modifier for find (165)
Query: multi-conditional query for find (164)
Query: array query for find (163)
Query: use of find parameters (162)
Query: How to use find in JS text (161)
Index: Constructing Mega Data (160)
Indexing: An Introduction to Indexing (159)
Index: Composite index (158)
Index: Full-text Index (157)
Management: Creating, Deleting, and Modifying users (156)
Management: Backup and Restore (155)
Management: Graphical Interface Management (End) (154)

10- Challenge Koa2 Free Video Tutorial (13 episodes)

Koa Development Environment Construction (153)
Use of async/await (152)
Receiving of Get requests (151)
How to receive a POST request (1) (150)
How to receive a POST Request (2) (149)
Koa – BodyParser Middleware (148)
Koa2 Native Routing Implementation (147)
Koa-router Middleware (1) Introduction (146)
Koa-router Middleware (2) Level (145)
Koa-router Middleware (3) Parameters (144)
Using cookies in Koa2 (143)
Introduction to Koa2 Templates (EJS) (142)
Koa – Static Resource Middleware (141)

React free Video Tutorial – Getting Started and Components

React
Environment Setup and HelloWorld program (139)
Introduction to JSX Syntax (138)
Advanced JSX Syntax (137)
React component: State member (136)
React component: props and Render members (135)
React Component: Lifecycle (134)
React Component exercises (133)
React component: this.props. Children (132)
React component: Props Properties Validation (131)
React component: Get real DOM node (130)

React: How to Use Forms

Event response and Bind reuse of forms (129)
React form name reuse (128)
React Form – Controllable Components (127)
React Form – Uncontrollable Components (126)

How to Build and Route a React Project

Build: Create-React-app Fast scaffolding (125)
Construction: the generator – the react – webpack (124).
Build: WebPack Build Step by step 01(123)
Build: WebPack Builds Step by step 02(122)
Route: Hello React Route (121)
Routing: Common option in NavLink (120)
Routing: 404 Settings and Jump Settings (119)
Routing: The Method of sending values through Routing (118)
Routing: Attributes and Routing patterns in the Router (117)
Route: Prompt

Vue2.0 video tutorial – internal instructions (8 episodes)

Walk my Vue2.0(115)
V-if V-else V-show command (114)
The V-for directive: Solving template loops (113)
v-text & v-html(112)
V-on: Bind event listener (111)
V – model instruction (110).
V – bind instruction (109).
Other internal commands (V-pre & V-cloak & V-once)(108)

15- [season 2] Vue2.0 video tutorial – global API(9 episodes)

Vue.directive Custom directive (107)
Extension of vue.extend constructor (106)
Vue. Set Global operation (105)
Vue lifecycle (Hook functions) (104)
Template Making Template (103)
Component introduction (102)
Component Props Properties Settings (101)
Component Parent-child relationship (100)
Component tag (099).

16- [season 3] Vue2.0 video tutorial – options (6 episodes)

PropsData Option Global extension data transfer (098)
Computed Option Computing Options (097)
Methods Option (096)
Watch option monitoring data (095)
Extends Option Extends Option (094)

17- [season 4] Vue2.0 video tutorial – examples and built-in components (4 episodes)

Getting Started – Instance Properties (093)
Example method (092)
Instance Events (091)
Built-in Components – Slot Explanation (090)

18- VuE-CLI Free Video Tutorial

Vue-cli, Let’s go SAO Years (089)
Vue-cli Project Structure Explanation (088)
Interpreting vuE-CLI Templates (087)

19- Vue-Router free Video Tutorial

Vue – introduction to the router (086).
Vue-router Configuring child Routes (085)
How to transmit parameters to vue-router (084)
Single-page Multi-Routing Area Operation (083)
Vue-router passes parameters using URL (082)
Vue-router Redirection-Redirect (081)
Use of aliases (080)
Routing Transition Animation (079)
Setting mode and handling 404 pages (078)
Hooks in routes (077)
Programmatic Navigation (076)

20- Vuex Free Video Tutorial (6 episodes)

A little Demo(075)
State Access state object (074)
Mutations modify the status
Getters calculates filter operations (072)
Actions Asynchronously change state (071)
Module Group (070)

21- Vue Actual Combat Video – Fast Food Cashier System (11 episodes)

Mockplus draws our ideas (069)
Vue-cli Setup development Environment (068)
Iconfont(067)
Write a standalone sidebar navigation component (066)
Unseal Element (065)
Quick Layout with Element (1) (064)
Quick Layout with Element (2) (063)
Axios reads data from remote (062)
Core Functions of Order Module Making -1(061)
Core Functions of Order Module Making -2(060)
Project packaging and launch (059)

22-WEEX Free Video Tutorials – From Getting Started to Getting Crazy (17 episodes)

Course Introduction (058)
Development Environment Installation (1)(057)
Development Environment Installation (2)(056)
Weex Common Commands and Hot Updates (055)
Android Studio development Settings
Weex and Vue’s Love/Hate (054)
Custom components and Text components
Input Components and Introductory built-in modules (053)
Image and Video Components (052)
Make a list together (051)
Fetching data from back-end servers (050)
Rotating picture Effects (049)
A Components and Web Components (048)
General events and Animation (047)
Teach yourself weeX (046)
Navigator and WebView Module (046)
Using vue-Router (045)

23-Fabric.js Free Video Tutorial (13 episodes)

Introduction to the simple and powerful Fabric.js library (044)
Draw simple graphics on Canvas (043)
Insert image on Canvas and set rotation property (042)
Fabric.js Drawing irregular shapes with paths (041)
Animating Settings for fabric.js (040)
Image filters for fabric.js (039)
Color modes and interconversion of fabric.js (038)
Gradient fill for fabric.js (037)
Text Settings for fabric.js (036)
The Event System for fabric.js (035)
Grouping of fabric.js (part 1) (034)
Group Rendering of Fabric.js (2) (033)
Serialization and deserialization of fabric.js (032)

24-CSS3 Free Video Tutorials (31 episodes)

Getting dressed and eating (031)
CSS3 New Features and Browser Support (030)
CSS3 Pseudoclass selector 1(029)
CSS3 Pseudo-class selector 2 Structure pseudo-class selector (028)
CSS3 pseudoelement (027)
CSS3 draw a circle with border-radius (026)
CSS3 Draw triangles and dialog box (025)
CSS3 Draw a diamond and a paralleling quadrilateral (024)
Draw five-pointed stars and six-pointed stars (023)
CSS3 Draw five-pointed stars and six-pointed stars (022)
CSS3 Draw hearts and eggs (021)
CSS3 Drawing Taiji Yin and Yang Diagram (020)
CSS3 Making transparent Background Layer (019)
CSS3 Color Mode (1)(018)
CSS3 Color mode (2) – Example imitation tmall product Display effect (017)
CSS3 Linear gradient (016)
CSS3 Radial gradient radial radial-gradient(015)
CSS3 Repeatability gradient (014)
CSS3 Box Shadow Effect Box-shadow (013)
CSS3 Making Slowly Growing Squares (Transition Effects) (012)
CSS3 Making Slow Rectangles (Transition Effects) (011)
CSS3 timing-function CSS3 timing-function
CSS3 Simulated Tmall Special Transition Effect Example (009)
SS3 Imitation Tmall category transition effect production (008)
CSS3 animation @keyframes explanation (007)
CSS3 Animation compound properties explain (006)
CSS3 Animation Synthesis Instance Production – Content loading Animation Implementation (005)
CSS3 Loading Animation Example 2(004)
CSS3 production luminous word, stereo word, Apple font (003)
CSS3 Solving text Overflow Problem (002)
CSS3’s new font unit REM-Final (001)

Still in continuous recording…………….

The dirtiest react16. x video tutorial (25,000 words)

Video list

Lesson 01: Introduction to React

Introduction of the React

React Advantages

Required prior knowledge

Teaching methods and learning essentials

Video update frequency

Add QQ group to study together

Section 02: React Introduction vs. Vue

Introduction of the React

React vs. Vue

conclusion

Section 03: React Environment setup

Installation Node. Js

Erection of scaffolding

Create your first React project

Section 04: Introduction to the scaffolding generated project catalogue

Files in the project root directory

Public Folder introduction

SRC folder introduction

Section 05: HelloWorld and Components

Entry file preparation

Writing of APP components

Section 06: React JSX syntax introduction

JSX profile

Component and normal JSX syntax differences

Ternary operators are used in JSX

Section 07: React Instance – Little Sister Service menu

Create a new little sister component

Component outer wrapping principle

Fragment tag

Verse 08: React Instance – Sword sharpening is as good as theory

Responsive design and binding of data

The binding event

Lesson 09: React instance – Boss I need to add a clock

Digitize the list

Adding service options

Resolve the key error

Verse 10: React Example – A sword is too old to bear

Array subscript passing

writedeleteItemmethods

Officially deleting data

Section 11: React Advances -JSX anti-stomp pits in several places

JSX code comments

Class traps in JSX

In the JSXhtmlAnalytical problem

tag in the text box and render it. The default doesn’t work, just prints the < H1 > tag to the page, which is not what I want. If you have this requirement at work, you can use the dangerouslySetInnerHTML attribute to resolve it. The specific code is as follows:

In the JSX<label>The pit of the label

Section 12: React Advanced -Simple React Snippets

The installationSimple React Snippets

Fast class generation

Section 13: React Advanced – Component splitting

Create a service menu component

Section 14: React Advanced – Passing values to parent and child components

Parent component passes value to child component

The child component passes data to the parent

Section 15: React Advanced – Monomial data streams and others

Single data flow

Work with other frameworks

Functional programming

Section 16: React Advanced – Installation and use of the debug tool

Download React Developer Tools

React Developer Tools in three states

React Developer Tools

Section 17: React-advanced PropTypes validates passed values

Simple application of PropTypes

Section 18: Use of the React advanced -ref

In place ofe.target.value

refPit in use

Section 19: React Advanced – Life Cycle Tutorial -1

React life cycle diagram

What is a lifecycle function

Mounting stage

Section 20: React Advanced – Life Cycle Tutorial -2

ShouldComponentUpdate function

ComponentWillUpdate function

componentDidUpdate

ComponentWillReceiveProps function

Section 21: React Advanced – Life Cycle Tutorial -3

write`deleteItem`methods

In the JSX`html`Analytical problem

In the JSX`<label>`The pit of the label

The installation`Simple React Snippets`

In place of`e.target.value`

`ref`Pit in use

using`shouldComponentUpdate`To solve

use`TransitionGroup`

join`<CSSTranstion>`The label