create-react-app的安装和项目的创建

本文介绍了如何安装create-react-app以及创建React项目。首先,可以通过全局安装或使用npx来创建项目。接着,项目创建过程中会安装react、react-dom和react-scripts。当看到特定提示时,表示项目创建成功。要运行项目,只需进入项目目录并运行npm start。文章还提到了可能遇到的问题,如npm安装失败,建议切换npm镜像或使用yarn,并给出了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

create-react-app

全局安装create-react-app

$ npm install -g create-react-app

如果不想全局安装,可以直接使用npx

$ npx create-react-app your-app	//也可以实现相同的效果

创建一个项目

$ create-react-app your-app 注意命名方式

Creating a new React app in /dir/your-app.

Installing packages. This might take a couple of minutes. 安装过程较慢,可以推荐使用yarn
Installing react, react-dom, and react-scripts... 

这需要等待一段时间,这个过程实际上会安装三个东西

  • react: react的顶级库
  • react-dom: 因为react有很多的运行环境,比如app端的react-native,
    我们要在web上运行就使用react-dom
  • react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面,表示创建项目成功:

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!

根据上面的提示,通过cd your-app命令进入目录并运行npm start即可运行项目。
生成项目的目录结构如下:

├── README.md				使用方法的文档
├── node_modules			所有的依赖安装的目录
├── yarn-lock.json			锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json			整个项目的依赖配置文件
├── public					静态公共目录
└── src						开发用的源代码目录

常见问题:npm安装失败

  • 切换为npm镜像为淘宝镜像
  • 使用yarn,如果本来使用yarn还要失败,还得把yarn的源切换到国内
yarn config set registry https://registry.npm.taobao.org // 配置yarn镜像源

yarn config list // 查看yarn 镜像列表
  • 如果还没有办法解决,请删除node_modules及yarn-lock.json然后重新执行`cnpm install命令
  • 再不能解决就删除node_modules及yarn-lock.json的同时清除npm缓存npm cache clean --force之后再执行npm install命令
  • 环境变量问题
  • react-scripts 版本过高问题 ( 降低版本 react-script@2.1.8)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值