1,步骤如下
准备工作:你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6
第一步,下载脚手架,并创建一个my-app文件
npx create-react-app my-app
注意:第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。
执行完成后,会创建一个包含如下目录的文件夹
如果所生成的文件不是如上,可能是文件存在缺失,参考问题一。
第二步,进入文件目录,开始运行项目
cd my-app
npm start
如果顺序的话,你就启动成功了。
但是 如果启动过程中报webpack版本引起的如下错误,可参考问题二
2,常见问题汇总
问题一
利用create-react-app创建项目后,所创建的项目文件不完整(create-react-app所创建的文件 没有[src] 文件夹)。
造成问题原因:
是因为官方已经弃用了独立安装包 create-react-app 这个 cli 脚手架,如果没有及时卸载 就会出现这个问题。
解决方法
方法一 卸载全局安装包
npm uninstall -g create-react-app
或者
yarn global remove create-react-app
然后使用 旧的cli 测试一下 => create-react-app --version,如果执行了就说明 安装包还存在。—— 卸载就好。
如果返回了 一个路径如/ usr / local / bin / create-react-ap 就使用 rm -rf / usr / local / bin / create-react-app 手动删除
方法二 带上参数忽略本地的cli,使用这种方式来创建文件
npx --ignore-existing create-react-app my-app
参考链接 https://blog.csdn.net/Chad97/article/details/104295012
问题二
如果你之前本地安装过webpack,受版本冲突限制,安装react脚手架后项目启动不了的问题。
启动时报错如下
造成问题原因
webpack版本不一致问题。create-react-app所需要的webpack版本为4.41.5版本,而我本地安装的并不是这个版本。
解决方法
方法一 先卸载不符合版本的webpack 与 webpack-dev-server,再安装相应版本的即可。
命令为:
卸载
npm uninstall webpack
npm uninstall webpack-cli
npm uninstall webpack-dev-server
再次安装符合要求的版本即可。
npm i webpack@4.41.5
npm i webpack-cli
npm i webpack-dev-server@3.10.2
方法二 直接在项目目录下建立.env文件。.env文件
文件里写入:SKIP_PREFLIGHT_CHECK=true即可
原文链接:https://blog.csdn.net/weixin_46452514/article/details/104609548