前端之行，任重道远！

关于博客系统，相信大家早已驾轻就熟，网上有很多以markdown驱动的博客框架，如vuepress，hexo等，这类框架的本质是生成静态站点，而个人开发的博客系统大多是使用数据库的全栈项目，这两种方式各有各的好处，这里就不做比较了这篇文章我们将使用Next.js自己独立去开发并部署一个以markdown驱动的静态站点博客............

从0到1搭建你的react18项目一，项目搭建安装脚手架CRA保留核心代码二、使用gitee管理项目三、使用scss预处理器四、配置路由基础路由在非组件环境下拿到路由信息路由懒加载五、组件库antd使用六、配置别名路径安装@craco/craco@别名路径提示七、安装dev-tools调试工具八、封装axios工具模块九、使用mobx模块化配置组件中使用mobx九、项目本地预览十、 打包体积分析一，项目搭建安装脚手架CRA使用create-react-app生成项目 npx create-r

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

这里写目录标题一，render-props模式：推荐使用children代替render属性：代码优化：二，高阶组件：概述：思路分析：使用步骤：设置displayName：传递props：一，render-props模式：//创建Mouse组件class Mouse extends React.Component{ //鼠标位置state state={ x:0, y:0, } //鼠标移动事件的事件处理程序 handleMou

这里写目录标题组件的生命周期生命周期的三个阶段：1.创建时（挂载阶段）2.更新时（更新阶段）3.卸载时（卸载阶段）组件的生命周期注：只有类组件（class组件）才有生命周期。生命周期的三个阶段：1.创建时（挂载阶段）执行时机：组件创建时（页面加载时）执行顺序：import React from 'react';import ReactDOM from 'react-dom';import './index.css';class App extends React.Component

React之propsprops校验使用步骤：约束规则：props默认值props校验使用步骤：安装失败的可以使用：npm install --save prop-types约束规则：更多规则见：使用 PropTypes 进行类型检查 – React (reactjs.org)props默认值使用defaultProps设置默认值（默认值在未传入props时生效）：import React from 'react';import ReactDOM from 'react-dom';

import React from 'react';import ReactDOM from 'react-dom';import './index.css';// 创建context得到两个组件const {Provider, Consumer} = React.createContext()//最外层父组件class Parent extends React.Component { render() { return ( // pink..

话不多说上代码：import React from 'react';import ReactDOM from 'react-dom';import './index.css';//父组件class Parent extends React.Component { // 提供共享状态 state = { count: 0 } //提供修改状态的方法 onIncrement = () => { this.setStat.

一，父组件向子组件传值这里包含了表单处理受控组件的知识//{ useState }是用于函数组件中使用state状态import React , { useState } from 'react';import ReactDOM from 'react-dom';import './index.css';//父组件：使用类创建组件 类组件负责更新UI，能让页面动起来class Parent extends React.Component { state = { l

1.初始化项目：npx create-react-app my-appmy-app为自己需要创建的项目名称（自定义）执行上述指令后会有以下提示：需要安装 create-react-app，输入y点击回车即可Need to install the following packages: create-react-appOk to proceed? (y) 等待安装，出现下图情况表示安装完成：然后执行：cd my-appnpm start点击链接打开：react脚