react实战之cnode—01环境配置

系统管理员 2022-03-01 02:18 247阅读 0赞

从零开始

> 1.create-react-app my\_cnode(竟然创建如此顺利，要哭了。)
> 
> 2.安装redux  npm i redux -S
> 
> 3.将redux,react做一下整合，用这个npm i react-redux -S
> 
> 4.异步更新redux里面的数据，需要安装 npm i redux-thunk -S
> 
> 5.路由跳转需要安装npm i react-router-dom -S
> 
> 6.数据走的异步，所以关于数据的获取使用axios组件npm i axios -S
> 
> 7.安装ui组件库npm i antd -S

现在我们需要的所有东西已经装好了，截图看下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

关于antd这块，为了不造成性能的浪费，我们要做到按需加载组件，具体查看官网

修改配置环境，以适应 antd([官网参考][Link 1])

*  `npm i react-app-rewired -D`
 *  修改package.json的启动配置 `"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject" }`
 *  `npm i babel-plugin-import -D`
 *  项目根目录创建config-overrides.js `const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config); return config; };`

执行npm start即可把项目跑起来

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220301/6128947368d64505818d6f00dec2cb62.png
[Link 1]: https://ant.design/docs/react/use-with-create-react-app-cn

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 react-native环境配置

一、Node环境安装下载地址：[http://nodejs.cn/download/][http_nodejs.cn_download] 如果用不到最新特性的话，一般

小灰灰/ 2023年06月26日 10:39/ 0 赞/ 49 阅读

相关 React基础-配置React与TypeScript工作环境

React基础知识点总结 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

比眉伴天荒/ 2022年11月14日 10:27/ 0 赞/ 196 阅读

相关 react环境配置

1.安装软件 (1) nodejs [ node下载链接][node] (2) npm包管理 (安装nodejs的时候已经安装了npm包管理) 2.更换

太过爱你忘了你带给我的痛/ 2022年07月10日 23:50/ 0 赞/ 310 阅读

相关 React Native环境配置之Windows版本搭建

接近年底了，回想这一年都做了啥，学习了啥，然后突然发现，这一年买了不少书，看是看了，就没有完整看完的。悲催。然后，最近项目也不是很紧了，所以抽空学习了H5。自学啃书还是很

待我称王封你为后i/ 2022年06月16日 08:29/ 0 赞/ 513 阅读

相关初识react之react+webpack+es6环境配置步骤整理

今天下午在朋友的帮助下，我顺利完成了react的环境安装配置，怀着激动的心情，写下这篇文章，希望能帮助更多刚进入react学习的朋友们。接下来，就进入配置吧： 1. 从官网下

Myth丶恋晨/ 2022年06月12日 10:47/ 0 赞/ 233 阅读

相关 react-native 环境配置（一）

感觉native的入手还是比一般的文档相对来说比较麻烦的，尤其是各种环境的需求，缺一不可，本博文将从环境配置到入门，剩下的还是看native中文网的文档为主。安装

叁歲伎倆/ 2022年05月17日 07:41/ 0 赞/ 168 阅读

相关 react实战之cnode—02视图划分及路由基本配置

1.视图划分我们首先看一下cnode的官网 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

╰+攻爆jí腚メ/ 2022年03月01日 08:20/ 0 赞/ 169 阅读

相关 react实战之cnode—01环境配置

从零开始 > 1.create-react-app my\_cnode(竟然创建如此顺利，要哭了。) > > 2.安装redux npm i redux -S > >

系统管理员/ 2022年03月01日 02:18/ 0 赞/ 248 阅读

相关 react实战之cnode—03-antd初体验

直接上代码 index.css ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

柔情只为你懂/ 2022年02月27日 07:10/ 0 赞/ 224 阅读

相关 react 配置环境变量

1、安装 cnpm install -D env-cmd 2、和src同级新建.env-cmdrc文件 { "dev

你的名字/ 2021年07月24日 13:48/ 0 赞/ 669 阅读