从代码中学习React

前言

近期在学习react，为记录学习过程，我创建了一个仓库，用案例展示知识，从代码中进行学习。

react基础部分已经过完，目前正在二刷react课程加强学习，在学习过程中我将每一块的内容以单独形成案例的形式进行了学习记录和总结，目前仓库里已经对react基础内容的知识总结完了，后期我会持续更新下去，希望这个学习项目能够帮组到你的学习，期待你的Star?

项目展示

已包含内容：

• jsx
• react基础
• 组件
• 事件
• 路由
• 组件通信
• props
• 生命周期
• hooks基础
• mobx状态管理
• 等等…

部分学习代码展示：

import React, { Component } from "react";

//函数式组件的创建和渲染
//创建：首字母要大写
//渲染：<Hello></hello>
function Hello() {
  return <span>hello</span>;
}

//类组件的创建和渲染
//创建：首字母要大写，类要继承React.Component父类，这样可以使用父类的render方法
//渲染：<HelloClass></HelloClass>
class HelloClass extends React.Component {
  render() {
    return <div>this is class Component</div>;
  }
}
//类组件也可以这样写，配合：import React, { Component } from "react";将Component解构出来
class Ahello extends Component {
  render() {
    return <div>999</div>;
  }
}
function App() {
  return (
    <div className='App'>
      {/* 渲染hello函数组件 */}
      <Hello></Hello>
      {/* 渲染HelloClass类组件 */}
      <HelloClass></HelloClass>
      <Ahello></Ahello>
    </div>
  );
}

export default App;

仓库地址

学习笔记仓库地址：
https://gitee.com/ailjx/react-study-demo