1.React基础

等待书写中...

🍡第一部分:React初探

1.React简介

  • react是由Facebook在2013年5月推出的一个前端框架,带来一种函数式编程风格
  • react比vue更灵活一些,Vue比react多一些api,使用起来更简单

2.React开发环境搭建

使用脚手架工具来生成

  • 前置条件:有Node环境
  • 安装React脚手架:npm i create-react-app -g
  • 生成工程:create-react-app my-app

3.工程目录文件简介

  • public
    • manifest.json 给PWA使用
  • src 工程文件夹
  • index.js 程序入口文件
  • App.js 组件
  • App.test.js: 测试文件

4.React中的组件

// 这就是一个组件,为什么要引入 React呢,因为下面的 div 是JSX的标签,需要引入react进行编译
import React from 'react';

function App() {
  return (
    <div>
      Hello 朱昆鹏
    </div>
  );
}

export default App;

5.最基础的JSX语法

// 自定义标签 JSX 要求以大写字母开头

🥗第二部分:React基础精讲

1.使用React编写ToolList功能

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

class TooLlist extends Component {

  constructor(props) {
    super(props)
    // 组件的状态
    this.state = {
      inputValue: '',
      list: ['学习英文', '学习React']
    }
  }

  render() {
    return (
      <Fragment>
        <div>
          <input 
            value={this.state.inputValue} 
            onChange={this.handleInputChang.bind(this)} 
          />
          <button onClick={this.handleButtonClick.bind(this)}>提交</button>
        </div>
        <ul>
          {
            // 我去,这种写法就是比 v-for 要灵活一些
            this.state.list.map( (item, index) => {
              return (
                <li 
                  key={index} 
                  onClick={this.tooLlistDelete.bind(this, index)}>{item}
                </li>
              )
            })
          }
        </ul>
      </Fragment>
    )
  }

  // 输入框绑定事件(感觉Vue的双向数据绑定很香)
  handleInputChang(e) {
    this.setState({
      inputValue: e.target.value
    })
  }

  // 按钮提交方法
  handleButtonClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }

  // ToolList Item 删除事件
  tooLlistDelete(index) {
    // immutable | state 不允许我们直接做任何的改变
    const list = [...this.state.list]
    list.splice(index, 1)

    this.setState({
      list: list
    })
  }
}

export default TooLlist

2.JSX语法细节补充

  • 用 className 代替 class 书写类名
  • 用 {//} {/***/} 书写注释(虽然我用之前的写法也没问题吧)
  • label 标签中用的 for 代替 htmlFor

3.拆分组件与组件之间的传值


🍝第三部分:React高级内容


📚参考列表(致敬)