Ready to work

Copy public folder, .babelrc, webpack.config.js, package.json, delete vue related modules, install dependencies
Question: What is the wording of element?

React jsx

React uses JSX instead of regular js
JSX is a JavaScript extension that looks a lot like XML
Do I have to use jsx?

JSX performs efficiently because it is optimized after being compiled into js code
Type safety, errors can be found during compilation
Using jsx to write templates is simpler and faster

Question: Can the attributes of HTML tags be added casually?
Because jsx is actually js, some identifiers such as class and for are not recommended as xml attribute names (class is the keyword of the class, for is the keyword of the loop). Instead, className and htmlFor are used in ReactDOM to correspond to class and for

className 和 htmlFor

Class in jsx
Correct writing
for in jsx (for example in form label)
Correct writing

js expression

vue {{ 1 + 1 }} // 2
react { 1 + 1 } // 2

How to write inline styles

Insert picture description here

jsx comment writing

Comments should be written in {}
Single-line comments
Multi-line comments

Array

Insert picture description here

Not writing a unique key value will warn

react component

Functional components-functions of the used js
Class components — classes that use es6

Functional component

Also called UI components, stateless components
Only responsible for data rendering

const HelloWorld = () => (<div>函数式组件</div>)

Class component

Universal components
Use the classes in es6 to implement components

Use es6 class inheritance to be converted into a normal class a class components react to
be inherited from the parent class using the method of the render **, ** return section of code jsx

Import and export of components

vue define component export component import component register component use component
react define component export component import component use component
What about functional components?

Component status

Functional components / class components
Functional components are also called stateless components-class components

Review es6 classes and inheritance

class Student {
  // 构造方法  this 代表当前的实例
  // constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
  constructor (age,username) {
    this.age = age
    this.username = username
  }

  run () {
    console.log(this.username + '跑步')
  }
}

// const stu = new Student(18, 'zywoo')
// stu.run()

// Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多
// Pupil 和 Student 类一模一样
// class Pupil extends Student {}
// const stu = new Pupil(18, 'zywoo')
// stu.run()

// 子类添加自己的属性和方法
class Pupil extends Student {
  constructor (age, username, hobby) {
    // super 表示父类的构造函数，用来新建父类的this对象
    // 子类必须在constructor方法中调用super方法，否则新建实例时会报错
    // 因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
    // ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。 -- 我是李刚的爸爸
    // ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。 -- 我爸是李刚
    super(age, username)
    this.hobby = hobby
  }

  run () {
    console.log(this.username + '玩' + this.hobby)
  }
}

const stu = new Pupil(18, 'zywoo', '篮球')
stu.run()

Component status

Component list rendering-single layer traversal

The map method will return an array, react will expand the array by default

import React from 'react'
// 组件的状态
class HelloWorld extends React.Component{
  constructor (props) {
    super(props) // 继承了父类的属性和方法
    // 添加状态 - 得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法
    this.state = { // 添加当前组件的状态  ----  类似于vue的data
      message: 'hello world',
      list: [
        'html',
        'css',
        'js'
      ]
    }
  }
  render () {
    return (
      <div>
        <h1>{ this.state.message }</h1>
        <ul>
          {   // react 使用 map 遍历数据（通用）
            this.state.list.map((item, index) => {
              // item 代表的数据的每一个元素
              // index 代表索引值
              // 返回一段遍历之后的JSX语法代码
              // 遍历必写key，key具有唯一性 跟vue思想中保持一致
              return (
                <li key={index}>{ item }</li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

export default HelloWorld

Component list rendering-multi-layer traversal

import React from 'react'
// 组件的状态
class HelloWorld extends React.Component{
  constructor (props) {
    super(props) // 继承了父类的属性和方法
    // 添加状态 - 得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法
    this.state = { // 添加当前组件的状态  ----  类似于vue的data
      message: 'hello world',
      list: [
        {
          a: 'html',
          arr: ['H5']
        },
        {
          a: 'css',
          arr: ['C3']
        },
        {
          a: 'js',
          arr: ['ES6','jQuery']
        },
      ]
    }
  }
  render () {
    return (
      <div>
        <h1>{ this.state.message }</h1>
        <ul>
          {   // react 使用 map 遍历数据（通用）
            this.state.list.map((item, index) => {
              // item 代表的数据的每一个元素
              // index 代表索引值
              // 返回一段遍历之后的JSX语法代码
              // 遍历必写key，key具有唯一性 跟vue思想中保持一致
              return (
                <li key={index}>web前端课程{ item.a }
                  <ol>
                    {
                      item.arr.map((itm, idx) => {
                        return (
                          <li key={idx}>{itm}</li>
                        )
                      })
                    }
                  </ol>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
export default HelloWorld