1 Review

module.exports = {
entry: {},
output: {},
plugins: [],
module: {},
resolve: {},
devServe: {}
}

2、react

2.1 copy relevant documents

index.html / .babelrc / package.json / webpack.config.js

Vue delete related files

2.2 Creating day02 / src, modify file and directory entry webpack @ symbol

entry: { // object 类型写法 ---- 推荐写法
  app: './day02/src/index.js' // 会将本项目打包成为一个js文件  app.js
},
resolve: {
  extensions: ['.js', '.jsx'], // 代表缺省的后缀名，引入时可以省略的后缀名 --- import axios from './request'; 而不用 import axios from './request.js';
  alias: { // 别名
    '@': path.join(__dirname, './day02', 'src') // src 的别名为 @
  }
}

3, react components

Js react syntax of the {}

src / index.js entry file

import React from 'react'; // 必不可少
import ReactDOM from 'react-dom'; // 将组件渲染至DOM节点

import App from './App'; // 导入组件 ---- 后缀名可以省略，配置过缺省的后缀名

// 将App 组件渲染至真实的DOM节点
// 组件使用就是标签形式，可以是双闭合标签，也可以是单闭合标签
// 组件的首字母必须大写
// 小写为HTML标签
ReactDOM.render(
  <App />,
  document.getElementById('app')
)

3.1 ---- component class in the class ES6

import React from 'react'; // 组件必须导入

// 使用es6的class实现react的组件，组件的首字母大写
// 要实现组件，必须继承React的Component
// 必须调用super()方法 ---- 类的构造方法中调用 ----- 如果组件中使用this
// 子类必须在constructor方法中调用super方法，否则新建实例时会报错
// 这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
class Com extends React.Component {
  constructor (props) { // 父类可以调用的所有的属性和方法都在props值中
    super(props)
  }

  // render 函数 继承自父类，是react生命周期的一部分
  // 返回一段HTML代码，表示当前组件的结构(相当于vue中的template)，HTML代码一般使用()包裹
  // 返回的HTML结构的代码的语法 ---- jsx语法 --- javascript xml - 类xml语言
  // 只有一个顶级标签
  render () {
    return (
      <div>
        hello world
      </div>
    )
  }
}

// 暴露组件
export default Com;

3.2 Functional assembly ---- ES6 arrow function

import React from 'react'; // 组件必须导入

// 箭头函数返回一段HTML代码
// const Com = () => {
//  业务逻辑  
//   return (
//     <div>
//       hello react函数式组件
//     </div>
//   )
// }

// 箭头函数的自带返回值，返回()表示直接返回HTML代码
const Com = () => (
  <div>
    hello react函数式组件-简写
  </div>
)

// 暴露组件
export default Com;

3.3 When using class components, functional components when used

All components can be used class components, the component containing state (initialization data component) must use class components (temporarily)

Functional assembly has been called UI component and stateless component

---- ----- initialization data status of data similar vue

---- state of the state 4 react

4.1 setting data initialization

import React from 'react'; // 组件必须导入

class Com extends React.Component {
  // 状态放置的位置在构造方法内
  // 子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法
  constructor (props) { // props父类同样的实例属性和方法
    super(props);
    this.state = { // react初始化数据 ---- 类似于vue中的data
      msg: 'hello react + state'
    }
  }

  render () {
    return (
      <div>
        { this.state.msg }
      </div>
    )
  }
}
// 暴露组件
export default Com;

4.2 jsx Notes ---- render -> return ()

return (
  <div>
    {
      // 111 -- 单行注释
    }
    {
      /*
      222222   --- 多行注释     
      */
    }
  </div>
)

4.3 data traversing ---- edge traversal side rendering

js traversal, add {} Variable react traversal traverse option returns jsx syntax structure

Single-traversal

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      msg: 'hello world',
      list: ['aa', 'bb', 'cc', 'dd'] // ++++++++++++++
    }
  }

  render () {
    return (
      <div>
        { this.state.msg }
        {
          // +++++++++++++++++++++++++++++++++++++++++++++++++
          this.state.list.map((item, index) => {
            return (
              <p key={ index }>
                { item }
              </p>
            )
          })
        }
      </div>
    )
  }
}

export default Com;

------ multilayer traversed returned html code syntax must conform jsx

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      msg: 'hello world',
      // ++++++++++++++++++++++++
      list: [
        {
          brand: 'iphone',
          arr: ['iphone6', 'iphone7', 'iphone8', 'iphonex', 'iphone11']
        },
        {
          brand: 'huawei',
          arr: ['p20', 'p30', 'meta20', 'meta30']
        }
      ]
    }
  }

  render () {
    return (
      <div>
        { this.state.msg }
        {
          // +++++++++++++++++++
          this.state.list.map((item, index) => {
            return (
              <div key={ index }>
                <h1>{ item.brand }</h1>
                {
                  // ***********************
                  item.arr.map((itm, idx) => {
                    return (
                      <p key = { idx }>{ itm }</p>
                    )
                  })
                }
              </div>
            )
          })
        }
      </div>
    )
  }
}

export default Com;

Expand --16 previous version

var Com = React.createClass({
  initialState () {
    return {
      msg: ''
    }
  }
  render () {
    return ()
  }
})

4.4 ---- traverse data after the first traverse rendering

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      msg: 'hello world',
      list: ['aa', 'bb', 'cc', 'dd'],
      list1: [<p key="1">aaa</p>, <p key="2">bbb</p>]
    }
  }

  render () {
    // ++++++++++++++++++
    let arr = [];
    this.state.list.map((item, index) => {
      arr.push(
        <p key={ index }> { item } </p>
      )
    })
    // +++++++++++++++++++
    return (
      <div>
        { this.state.msg }
        {
          this.state.list
        }
        { this.state.list1 }
        {
          // ++++++++++++++++++
          arr
        }
      </div>
    )
  }
}

export default Com;

4.5 conditional

The most common conditional ---- entirely of grammar js

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      flag: true
    }
  }

  render () {
    if (this.state.flag) {
      return (
        <div>
          如果条件为真我就显示
        </div>
      )
    } else {
      return (
        <div>
          如果条件为假我就显示
        </div>
      )
    }
  }
}

export default Com;

Ternary operator -----

import React, { Component } from 'react'; // 解构赋值

class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      flag: false
    }
  }

  render () {
    return (
      <div>
        {
          // +++++++++++++++++++++++++++++++++
          this.state.flag ? <p>真</p> : <p>假</p>
        }
      </div>
    )
  }
}

export default Com;

5 Notes

Components must import React
Add a status constructor must be added constructor must perform super ()
Do not use if the jsx syntax - else, you can use three head operations, or operations, and operations
Do not use a for loop in jsx syntax, the use of map cycle

6, preview

Custom Functions
Lifecycle hook function
Modify status
Package
Components by value

react Configuration