快速学习react 从入门到入土

react是什么

• 官方解释 react是用于构建用户界面的 JavaScript 库

React的起源

• React是2013年 Facebook开源的JavaScript框架
• 

React的特点 – 声明式编程

• 声明式编程是目前整个大前端k开发的模式：Vue React Flutter 等
• 它允许我们只需要维护自己的状态，当状态改变时，react可以根据最新的状态去渲染我们的界面

React开发依赖

• react开发必须依赖三个库
  • react：包含react所必须的核心代码
  • react-dom：react渲染在不同平台所需要的核心代码
  • babel：将jsx转换成React代码的工具
• 暂时我们直接通过CDN引入，来演练下面的示例程序：

1
2
3

React初体验hello World

• 第一步：在界面上通过React显示一个Hello World
  • 注意：这里我们编写React的script代码中，必须添加 type=“text/babel”，作用是可以让babel解析jsx的语法

    

    

1
2
3
4
5
6
7

1. ReactDOM.render函数
   • 参数一：传递要渲染的内容，这个内容可以是HTML元素，也可以是React的组件
   • 参数二: 将渲染的内容，挂载到哪一个HTML元素上
2. 我们可以通过{}语法来引入外部的变量或者表达式

安装react脚手架

安装之前要先查看自己是否安装了 node.js
react 脚手架 npm i -g create-react-app
安装之后安装一下依赖包
中index.js中就是他的入口文件 App.js就是我们写代码的地方(你也可以写其他地方)
index中我们可以看到 这个是代表严格模式，在渲染过程中，会把渲染过程中的错误抛出，并且在抛出错误的时候，会把错误信息打印出来。

react基础

• 基本的渲染 文本

import React from "react";
import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    // 定义数据
    this.state={
      name:'张三'
    }
  }
  render() {
    return (
      // 使用
      <div> {this.state.name} </div>
    )
  }

}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 列表数据的渲染
  • react渲染是通过 map遍历来渲染的

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fruits: ["香蕉", "雪梨", "苹果"],
    };
    
  }
  handClick(name){
    console.log(name);
  }
  render() {
    return (
      <div>
      <ul>
        {
          this.state.fruits.map((item,index)=>{
            return <li key={index} onClick={this.handClick.bind(this,item)}>{item}</li>
          })
        }
      </ul>
      </div>
    )
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

• 事件绑定
  • react 事件绑定都是通过 onxxx来绑定的 onClick onChange
  • 绑定的时候我们要对他的this进行一个修改 默认他是指向this的

// 第一种 this.handClick.bind(this) 绑定this
 <h2 onClick={this.handClick.bind(this)}>第一种this</h2>
// 第二 this.handClick = this.handClick.bind(this)
constructor(props) {
   this.handClick = this.handClick.bind(this)
}
<h2 onClick={this.handClick}>第二种this 配合constructor使用</h2>   
// 第三 {()=>{this.handClick()}}
<h2 onClick={()=>{this.handClick()}}>第三种this</h2>
1
2
3
4
5
6
7
8
9

计数器案例

class App extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
                count:0
            };
         }
        render(){
            return (
                <div>
                    <h2>当前计数：{this.state.count} </h2>
                    <button onClick={this.add.bind(this)}>count++</button>
                    <button onClick={this.reduce.bind(this)}>count--</button>
                    <button onClick={this.add.bind(this,10)}>count+10</button>
                </div>
                )
        }
        add(num){
            if(typeof(num) === 'number'){
                this.setState({
                count:this.state.count+10
                })
                return
            }
            this.setState({
                count:this.state.count+1
            })
        }
        reduce(){
            this.setState({
                count:this.state.count-1
            })
        }
    }
    ReactDOM.render(<App/>,document.querySelector('#app'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

• 组件传值
  react的父传子 通过props 子传父通过props 事件传

// 子组件
class ChildCom extends React.Component {
  constructor(props){
    super(props)
    this.state={
      name:'我是子组件传递的数据'
    }
  }
  handClick(){
    this.props.getMsg(this.state.name)
  }
  render(){
    return(
      <div>
          <p>父组件数据：{this.props.msg}</p>
          <button onClick={this.handClick.bind(this)}>点击给父组件传数据</button>
      </div>
    )
  }
}

// 父组件
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg:'我是父组件传给子组件的数据',
      childData:''
    };
    
  }
  getChildMsg(msg){
      this.setState({
        childData:msg
      })
  }
  render() {
    return (
      <div>
        <h1>子组件</h1>
        {/* 父传子 */}
        <ChildCom msg={this.state.msg} getMsg={this.getChildMsg.bind(this)} />
        <h1> 父组件 </h1>
        <p>传的数据：{ this.state.childData } </p>
      </div>
    )
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49