2025年react入门项目（react 快速入门）

大家好，我是讯享网，很高兴认识大家。

项目搭建

需要自己改造项目

在React开发过程中，使用ant design这个UI组件库来完成开发。

这个UI组件库蚂蚁金服开源的uI组件库，目前国内针对React项目用的最

多的一个库

React版本地址为：ant-design.antgroup.com/docs/react/…

antd也提供vue的版本。你可以在Vue2或者Vue3中使用antd

Vue版本地址为：www.antdv.com/docs/vue/in…

目前本文档截至使用的版本5.9.0

以后在项目中，需要什么组件就自己引入这个组件就可以了。

antd5的版本默认已经实现了按需打包。引入过后用过组件才会打包，

antd的样式无需引入，antd4需要手动引入样式。打包的时候，默认就针对你用到组件打包样式

目前antd5中，大部分的组件都基于函数组件来开发的。

况下，如果你启动项目。打包项目的时候，你需要给项目配置webpack内容。必须在package.json中

craco插件第三方的插件，使用这个插件来替代react-scripts来启动项目。

你可以自己配置启动的webpack，或者一些环境变量等等

下载完成后，我们需要在启动环境中替换为craco

(2)找到package.json

在项目根目录下面创建文件craco.config.js

这个文件名字不能写错。默认采用craco来加载项目，读取这个文件。

可以在这个文件中配置webpack相关的内容

antd底层默认采用less来设计的代码

我们自己引入样式也有less来设计

下载完成后，想要让craco启动项目能加载less环境。

打开craco.config.js文件。配置less的加载规则

在assets/styles/antdcomp.module.less文件中

引入到组件中

antd使用组件库每个组件都默认设置了蓝色的主题。

如果需要修改主题色，参考antd官方给的配置。

全局配置，也可以局部配置

主题配置文档：ant-design.antgroup.com/docs/react/…

在antd4.x版本中，如果要配置主题色，我们在配置文件中全局配置。无法支持局部配置

讯享网

控制所有组件主题色。需要在App.jsx这个根组件中，配置主题色

ConfigProvider：这个组件antd5提供一个配置项组件，theme的属性可以设置新的主题颜色，覆盖默认的antd主题色。

可以针对某一个组件，组件中某一个局部区域进行主题色修改

需要在布局代码中使用ConfigProvider

Header.jsx子组件中，配置主题色

类组件开发特点：

函数组件开发特点：

hooks：实际上封装好的一系列函数，我们可以再函数组件中引入这些hook函数。辅助我们开发。

函数组件基础结构

用箭头函数来设计，并返回当前这个函数。页面加载你这个函数返回JSX模板。

说明：暴露出去的函数。外部直接调用。并不会实例化这个函数

目前公司中React项目开发，80%的项目都会采用函数组件来设计。采用类组件配合函数组件一起使用

跟类组件不一样的地方，在于子组件接受外部参数的时候。通过函数组件参数来接受props

Login函数后面的参数，默认接受props对象。你可以解构出来。

在函数组件中定义函数，推荐用箭头函数

React官方为了解决函数组件没有内部状态。提供了一系列函数来辅助我们开发。

我们将这些函数称为hooks函数。

其中第一个要学习的函数useState，用于定义组件内部状态

useState来定义组件内部状态特点：

useMemo是React官方提供出的计算属性函数。可以用于页面数据进行数据处理

语法一：

指定监控页面上某个属性，当这个值发生允许计算属性。

语法二：

监控页面上所有的数据，只有数据变化，计算属性都要执行一次。

这种写法比较消耗性能。页面很多数据可能都更新。

这个函数也是计算属性。

语法和useMemo一样。

但是返回值不是结果，而是一个函数，使用的需要调用一下

useCallback用于父子组件通信，解决页面更新问题。

完整版内容可评论区回复：完整版，小蜗分享给你哦！

2025年react入门项目（react 快速入门）

相关推荐