Preparación

Copie la carpeta pública, .babelrc, webpack.config.js, package.json, elimine los módulos relacionados con vue, instale dependencias
Pregunta: ¿Cuál es la redacción del elemento?

Reaccionar jsx

React usa JSX en lugar de js regular
JSX es una extensión de JavaScript que se parece mucho a XML
¿Tengo que usar jsx?

JSX funciona de manera eficiente porque está optimizado después de ser compilado en código js
Escriba seguridad, se pueden encontrar errores durante la compilación
Usar jsx para escribir plantillas es más simple y rápido

Pregunta: ¿Se pueden agregar los atributos de las etiquetas HTML de manera casual?
Como jsx es realmente js, algunos identificadores como class y for no se recomiendan como nombres de atributos xml (class es la palabra clave de la clase, for es la palabra clave del bucle). En cambio, className y htmlFor se usan en ReactDOM para corresponder a la clase y para

className 和 htmlFor

Clase en jsx
Escritura correcta
para en jsx (por ejemplo, en la etiqueta del formulario)
Escritura correcta

expresión js

vue {{1 + 1}} // 2
reaccionar {1 + 1} // 2

Cómo escribir estilos en línea

Inserte la descripción de la imagen aquí

escritura de comentarios jsx

Los comentarios deben escribirse en {}
Comentarios de una sola línea Comentarios de
varias líneas

Matriz

Inserte la descripción de la imagen aquí

No escribir un valor clave único advertirá

componente de reacción

Componentes funcionales-funciones de los js utilizados
Componentes de clase: clases que usan es6

Componente funcional

También llamados componentes UI, componentes sin estado
Solo responsable de la representación de datos

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

Componente de clase

Componentes universales
Use las clases en es6 para implementar componentes

Uso ES6 clase herencia a ser convertido en una clase normal de una clase de componentes reaccionan para
ser heredado de la clase padre usando el método de la render sección de retorno **, ** de JSX código

Importación y exportación de componentes.

vue definir componente exportar componente importar componente registrar componente usar componente
reaccionar definir componente exportar componente importar componente usar componente
¿Qué pasa con los componentes funcionales?

Estado del componente

Componentes funcionales / componentes de clase Los componentes
funcionales también se denominan componentes de clase sin componentes

Repase las clases y la herencia de es6

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()

Estado del componente

Representación de la lista de componentes: transversal de una sola capa

El método de mapa devolverá una matriz, reaccionar expandirá la matriz por defecto

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

Representación de la lista de componentes: transversal de varias capas

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