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>

    )

  }

}