react18create-react-app系列

前言最近在学习react，想通过写文章加深理解。用create-react-app创建的项目以后有时间再写。请期待。小demo是Followhttps://gitee.com/shenghaibin...1.使用create-react-appnpxcreate-react-appmy-demo创建的项目2.安装项目所需的依赖npminstallreact-router-domnpminstallmobxmobx-react-litesassdayjsechartsuuid-Dnpminstallreact-vant@2.0.0-alpha.32-D3。修改index.js入口文件添加路由console.log('index.js');importReactfrom'react';importReactDOMfrom'react-dom/client';import'./index.css';importAppfrom'./App';importreportWebVitalsfrom'./reportWebVitals';import{BrowserRouter}from'react-router-dom'constroot=ReactDOM.createRoot(document.getElementById('root'));root.render();//如果你想开始测量应用程序的性能，请传递一个函数//来记录结果（例如：reportWebVitals(console.log)）//或发送到一个分析端点。了解更多：https://bit.ly/CRA-vitalsreportWebVitals()；4.首先来文件名设置别名由于重新Act官方默认隐藏了webpack配置。您需要运行npmrunejec来显示webpack配置。直接运行npmruneject会报错。需要切换到根目录初始化仓库，在webpack.config.js文件中找到resolve代码贴在下面，修改配置文件后记得重启项目~//运行gitinitgitadd.gitcommit-m'init'npm在根目录下运行弹出//webpack.config.jsresolve:{alias:{'@':path.resolve(__dirname,'../src/'),'views':path.resolve(__dirname,'../src/views/'),},}5.错误提示#Usingbabel-preset-react-apprequiresyouspecifyNODE_ENVorBABEL_ENVenvironmentvaria由于执行npmruneject打开项目配置project，会出现错误提示，虽然不影响代码的正常运行，但是影响美观。需要在eslintConfig//package.json"eslintConfig":{"extends":["//react-app","react-app/jest"]}中注释配置，6.这里添加其他设置别名的方法.第四点不推荐。如果执行npmruneject，将不可逆亲测有两种方法
1.使用craco命令2.使用react-app-rewired代码如下1.craco方法npminstall@craco/craco@7.0.0-alpha.5-D在根目录新建一个craco.config.js//craco目录中的.config.jspath=require('path')module.exports={webpack:{alias:{'@':path.resolve('src'),views:path.resolve('src/views'),common:path.resolve('src/common')}}}//package.json"脚本":{"开始"：“cracostart”，“build”：“cracobuild”，“test”：“cracotest”，“eject”：“react-scriptseject”}，2.react-app-rewirednpminstallcustomize-crareact-app-rewired-D在根目录下新建config-overrides.js//config-overrides.jsconstwebpack=require('webpack');constpath=require('path');const{override,addWebpackAlias,}=require('customize-cra');module.exports=override(addWebpackAlias({'@':path.resolve(__dirname,'./src'),'views':path.resolve(__dirname,'./src/views'),'common':path.resolve(__dirname,'./src/common'),}));//package.json"scripts":{"start":"react-app-rewiredstart","build":"react-app-rewiredbuild","test":"cracotest","eject":"react-scriptseject"},重启运行即可7.最后附上gitee地址https://gitee.com/DoraZC/reac。..（第6点代码不包含）后续会搭建一个即用型移动端工程，敬请期待！感谢您的收看，我们下期再见！