React 学习笔记

1. JSX 与模板语法

创建一个 React 项目：

在 React 中实现循环遍历

import React from 'react'
import ReactDOM from 'react-dom'
// JSX == JavaScript + xml
// 循环绑定 使用 map
const arr = [1, 2, 3]
// DOM 对象
const ulEle = arr.map((item, index) => 
{item}
)
// ReactDOM.render(DOMObj, document.querySelector('#root'))
ReactDOM.render(
{ulEle}
, document.querySelector('#root'))

2. React 创建组件的两种方式

2.1 函数组件

本质上是一个函数

// props 携带参数
function Welcome(props) {
  return 
hello,{props.name}
}
ReactDOM.render(, document.querySelector('#root'))

2.2 类组件

// 1.必须继承 React.Component
class App extends React.Component {
// 2.必须有 render 函数
  render() {
// 3.一定要返回 DOM 元素
    return 
App,{this.props.name}
  }
}
ReactDOM.render(, document.querySelector('#root'))

3. React 组件拆分

创建一个公共组件：

// App.js
import React, { Component } from 'react'

// App => MyBtn
class MyBtn extends Component {
  render() {
    return {this.props.title}
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    // 遵循单向数据流
    this.user = {
      name: '李诗瑶',
      content: '这是我的react组件',
      date: new Date().toLocaleDateString()
    }
  }
  render() {
    return (
      

        
hello,{this.props.name}
        
        

          {/* 用户信息 */}
          
name:{this.user.name}
          {/* 内容 */}
          
common:{this.user.content}
          {/* 时间 */}
          
date:{this.user.date}
        
      
    )
  }
}

export default App

调用 App 组件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(, document.querySelector('#root'))