React基础入门

本教程涵盖React基础知识与进阶内容,包括核心JSX语法、组件化开发、React生命周期、Redux状态管理、React Router路由配置及Hooks使用等。通过丰富的实例与讲解,帮助读者深入理解React并提高开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.基础知识

邂逅React开发

React系列(一) -邂逅React开发

React系列一 - 核心JSX语法一

点击博客
官方网站
React内容整体比较多,比较接近原生,使用起来更加灵活。相比于Vue,更接近模板,使用起来比较简单,很多东西不用考虑。就和手动挡汽车和自动档车子有点像。

React系列二 - 核心JSX语法二

点击博客

React系列三 - 阶段案例练习

点击博客

React系列四 - React脚手架

点击博客

React系列五 - 组件化开发(一)

点击博客

二. 创建React组件
2.1. 创建类组件
类组件的定义有如下要求:

  • 组件的名称是大写字母开头的(无论类组件还是函数组件)
  • 类组件需要继承自 React.Component
  • 类组件必须实现render函数
    【注意】
  • 标签HTML标签是不区分大小写的
    在这里插入图片描述
  • 在JSX中是严格区别大小写的()
    小写指的就是普通HTML标签元素,大写开头就是组件,如果你把标签名字写成大写,它就会把这个标签当成组件,而你没有定义这个组件,也没有导入这个组件,它就会报如下错误。
    在这里插入图片描述

快速开发react的两个方式
vscode中一键生成react代码块以及快速补全react代码
vscode中一键生成react代码块以及快速补全react代码2

  • 在VScode中定义代码块(把类组件和函数组件定义方式定义成代码块)
  • 下载插件,该插件帮助我们定义了特别多的React代码块,包括一些东西的导入,Redux/React Hooks/React Native/PropTypes
    具体请自行查看。
    在这里插入图片描述
    ①例如类组件生成方式的快捷键是rcc
    在这里插入图片描述
    ②函数式组件的生成方式rfc
    在这里插入图片描述

组件的生命周期代码演示方法调用顺序

(1)挂载阶段

import React, {
   
    Component } from 'react'

export default class App extends Component {
   
   

  constructor(){
   
   
     super();
    
     console.log("执行了组件的constructer方法");
  }

  render() {
   
   
    console.log("执行了组件的Render方法");

    return (
      <div>
        我是App组件
      </div>
    )
  }

  componentDidMount(){
   
   
    console.log("执行了组件的componentDidMount方法");
  }
}

在这里插入图片描述
(2)更新阶段

import React, {
   
    Component } from 'react'

export default class App extends Component {
   
   

  constructor() {
   
   
    super();
    this.state = {
   
   
      counter: 0
    }
    console.log("执行了组件的constructer方法");
  }

  render() {
   
   
    console.log("执行了组件的Render方法");

    return (
      <div>
        我是App组件
        <h2>当前计数:{
   
   this.state.counter}</h2>
        <button onClick={
   
   e => this.increment()}>+1</button>
      </div>
    )
  }
  
  increment(){
   
   
    this.setState({
   
   
      counter:this.state.counter + 1
    })
  }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值