react项目搭建-路由(react-router-dom)-按需加载(react-loadable)-请求封装(fetch)-整合UI框架(蚂蚁ant)

时间:2021-1-18 作者:admin

REACT从入门到项目搭建

1.入门从官方文档开始

这文档的风格个人还是比较喜欢,干货满满没有废话!!!跟着文档把里面把那个小游戏写下基本就ok了

react.docschina.org/

2.使用官网脚手架搭建项目,配置路由(react-router-dom)和按需加载(react-loadable)

使用官网脚手架搭建项目,接下来我们要去找一个合适路由(react-router-dom),react是没有提供路由这个模块的不像angular什么都给你整好了,所以需要发动群众的智慧。翻阅了一些资料,大家用的比较多的就是react-router这个包,作者还是很良心的,分了几个版本,web开发选用react-router-dom,还有其他版本有兴趣的同学可以去官网了解。

  • 安装包

npm i react-router-dom -D

npm i react-loadable -D

  • 配置如下:

    • 在src目录下建一个route文件夹,在里面新建一个文件名为Routes.js的文件,代码如下:

    • 注意里面的LoadingComponent是加载动画组件

    • 按需加载我用的包是react-loadable他的核心就是import(),路由到那个页面就去加载那个页面,打开浏览器F12可以直观的看到加载文件的请求

3.请求封装(fetch)

  • 安装包

npm install fetch --D

  • 在src目录下新建http文件夹,在里面新建一个文件名为fetch.js的文件,代码如下

4.整合UI框架(蚂蚁ant)

  • 安装包

npm install antd

  • 官网讲的很清楚,需要的自行查阅,友情提示:只看这个就好了

ant.design/docs/react/…

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。