react入门（1）之阮一峰react教程

阮一峰老师的github地址：React Demos

React 入门实例教程

2、ReactDOM.render()

// ReactDOM.render() 将模板转化为 HTML 语言
// 参数一：被渲染的标签
// 参数二：被插入的父元素
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

3、JSX 语法

import React, { Component } from "react"

export default class User extends Component {
  render() {
    const arr = [1, 2, 3, 4]
    return (
      <div>
        {arr.map(item => (
          <span style={{color: 'red'}}> {item}</span>
        ))}
      </div>
    )
  }
}

{}中可以键入javascript代码，可以用来遍历数组，对象等；

在其中可以使用return来返回标签。

数组直接写在{}中就能遍历

import React, { Component } from "react"

export default class User extends Component {
  render() {
    const arr = [<h1 key="1">Hello world!</h1>, <h2 key="2">React is awesome</h2>]
    return (
      <div>
        {arr.map(item => (
          <p style={{ color: "red" }}> {item}</p>
        ))}
      </div>
    )
  }
}

4、组件

代码如上：

组件类的第一个字母必须大写

组件类只能包含一个顶层标签

组件类必须以 / 结尾

组件类都必须有自己的 render 方法，用于输出组件

5、this.props.children

相当于Vuejs中的插槽

this.props.children：表示组件的所有子节点。

import React, { Component } from "react"

class NotesList extends React.Component {
  render() {
    return (
      <ol>
        {React.Children.map(this.props.children, child => <li style={{backgroundColor: 'yellow'}}>{child}</li>)}
      </ol>
    )
  }
}
export default class User extends Component {
  render() {
    return (
      <div>
        <NotesList>
          <h1 key="1">Hello world!</h1>
          <h2 key="2">React 2019-12-02</h2>
        </NotesList>
      </div>
    )
  }
}

6、PropTypes

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

指定组件中的属性类型

import React, { Component } from "react"
import PropTypes from "prop-types"
class NotesList extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired
  }
  render() {
    return (
      <ol>
        <li style={{ color: "red" }}>{this.props.title}</li>
        {React.Children.map(this.props.children, child => (
          <li style={{ backgroundColor: "yellow" }}>{child}</li>
        ))}
      </ol>
    )
  }
}
export default class User extends Component {
  render() {
    const title = "这是父组件给子组件传递的值"
    return (
      <div>
        <NotesList title={title}>
          <h1 key="1">Hello world!</h1>
          <h2 key="2">React 2019-12-02</h2>
        </NotesList>
      </div>
    )
  }
}

7、获取真实的DOM

获取DOM节点，在输入框中赋值，并触发得焦方法

import React, { Component } from "react"

export default class User extends Component {
  constructor(props) {
    super(props)
    // 将dom元素赋值在 this 上
    this.myTextInput = React.createRef()
    // 将 handleClick 事件绑定到 this 上，并重新命名
    this.click = this.handleClick.bind(this)
  }
  handleClick() {
    // 输入框赋值
    this.myTextInput.current.value = '123'
    // 输入框触发得焦事件
    this.myTextInput.current.focus()
  }
  render() {
    return (
      <div>
        {/* 通过ref属性获取dom元素，和vue相似 */}
        <input type="text" ref={this.myTextInput} />
        <input
          type="button"
          value="点击按钮使输入框得到焦点"
          onClick={this.click}
        />
      </div>
    )
  }
}

8、this.state

import React, { Component } from "react"

export default class User extends Component {
  // 构造器创建 state
  constructor(props) {
    super(props)
    this.state = {
      liked: true
    }
    // p 标签上的 方法
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(event) {
    // state 下的 liked 状态改变
    this.setState({ liked: !this.state.liked })
  }
  render() {
    var text = this.state.liked ? "开心" : "不开心"
    return <p onClick={this.handleClick}>点击切换心情 ---  {text}</p>
  }
}

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。

一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

9、表单

类似 vue 的 v-model 双向绑定属性

import React, { Component } from "react"

export default class User extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: "Hello!"
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    // 设置 input 的值
    this.setState({ value: event.target.value })
  }
  render() {
    var value = this.state.value
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    )
  }
}