React 学习笔记

1. JSX 与模板语法

创建一个 React 项目:
React 学习笔记_第1张图片

在 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'))

    image.png

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

    2.1 函数组件

    本质上是一个函数

    // props 携带参数
    function Welcome(props) {
      return 

    hello,{props.name}

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

    image.png

    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'))

    image.png

    3. React 组件拆分

    创建一个公共组件:

    // App.js
    import React, { Component } from 'react'
    
    // App => MyBtn
    class MyBtn extends Component {
      render() {
        return 
      }
    }
    
    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'))

    React 学习笔记_第2张图片

    你可能感兴趣的:(前端)