React学习记录：基本环境安装 (填坑记录)

React.js并不能像D3.js一样直接在js里面包含一个文件即可，而是需要一堆工具和库来辅助，这里呢，有一个非常方便的工具create-react-app，可以直接一键生成需要的工具目录，免去全家桶的安装和配置

根据官方文档先安装了creat-react-app

1	npm install -g create-react-app

接着就可以按照文档说明创建一个react工程

1
2
3

npx create-react-app my-app
cd my-app
npm start

npm start失败

然后，执行到这一步的时候就挂了，npm start失败了，报错信息是

1	npm ERR! code ELIFECYCLE

在项目的Issues里面找到了这个问题的解决方案

Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove “babel-loader” from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.

If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if /Users/Dylan/myapp/node_modules/babel-loader is outside your project directory.For example, you might have accidentally installed something in your home folder.
Try running npm ls babel-loader in your project folder.This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight check in case you want to proceed anyway.

结果是，都没有用

网上的解决方案也是如出一辙

Step1：npm cache clean --force
Step2：rm -rf node_modules
Step3：rm -rf package-lock.json
Step4：npm install
npm install 成功之后再次启动 npm start

也没有效果，当时我是感觉，完蛋了，要去装React全家桶了，最后在stackoverflow上找到了不太一样的答案

我觉得应该是破案了，刚前几天做一个东西的时候把node.js版本从10.16更新到了12.0，大家的回复表示这个版本的node应该是会有一些奇怪的bug的，那现在需要的就是一个node.js的版本回退了

nvm装完npm无效

想着node.js的版本可能以后还得切，所以干脆装个包管理工具，于是装了个nvm

surprise，新锅出现了，我的npm没了……

这个问题好像就比较普遍了，但是错误原因也是花里胡哨的

最后是通过这个方法解决的：[博客链接]

这个时候再start一下

看到这个react的图标，算是真的完成了环境搭建

在src文件中就是我们可以修改的页面了

npm start失败

nvm装完npm无效

🍊欢迎光临本站