react入门项目（react基础入门）

科技前沿 • 2025-06-03 17:38 • 阅读 29

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

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <blockquote>

讯享网

本来自己还是更喜欢学习Vue的（学起来相比Angular和React都容易一些），但是公司最近突然想用react（主要用 Ant-Disign 这个UI框架）重构之前的项目，所以暂时只有把Vue放一边了，开始学习React~~

前言

需要自己先安装好node和npm（或者cnpm）

按照官方文档，把项目跑起来吧

先放文档地址：React文档英文版；React文档中文版

安装 React.js

使用 React.js不管在开发阶段生产阶段都需要一堆工具和库辅助，编译阶段你需要借助 Babel；需要Redux等第三方的状态管理工具来组织代码；如果你要写单页面应用那么你需要 React-router。这就是所谓的“React.js全家桶”。React官方推荐的工具是create-react-app，

1.安装 create-react-app构建项目并启动项目

讯享网

2.引入react-router和ant design（ant-design是我的项目所需）

Ant-DesignUI库PC端官网

Ant-DesignUI库移动端官网

讯享网

此时的目录结构如图：
create-react-app创建的项目目录结构
3.以目前的项目结构配置，运行ant design的组件时，会加载ant design全部代码，为了能够提高性能，做到按需加载，需要进行配置。

讯享网

此时的目录结构如图：
create-react-app创建的项目目录结构所有内建的配置暴露出来
4.引入一个按需加载的组件

5。修改配置，使按需加载生效

我目前知道的有两种方式：一种是ant-design光放文档中的方式，这是地址，请自行阅读：使按需加载生效，另一种方式感觉比较简单一点，修改package.json文件

在package.json文件中的“bable”下加入如下代码：

讯享网

然后将修改代码中的组件引入方式：

到此刻，使用Ant-Design这个UI框架的环境搭建完成了，接下来就可以进行前端其他的开发工作了！

react入门项目（react基础入门）

前言

安装 React.js

相关推荐