Node.js安装

npm -v, 查看npm版本
npm install -g npm, 更新npm版本到最新
npm -g install npm@6.8.0, 更新到指定版本
npm cache clean --force 清理 npm 缓存数据
npm ls react 查看react版本

参考:
https://blog.csdn.net/Nicolecocol/article/details/136788200
版本下载选择 https://nodejs.org/en/download

npm audit fix # 扫描项目中的漏洞并自动修复
npm audit fix --force # 强制修复所有漏洞,是一个用于自动修复项目中安全漏洞的命令。它通过更新依赖包的版本,将其修复到一个安全的版本,从而解决已知的安全问题。

  1. 全局安装创建
    npm install -g create-react-app # 全局安装创建,可以通过全局安装 create-react-app 来创建 React 项目
    npm uninstall -g create-react-app # 卸载命令

给React降低版本
npm install react@17.0.2 react-dom@17.0.2 --save或者yarn add react@17.0.2 react-dom@17.0.2 --save

  1. 创建项目
    安装完成后,切换到想创建项目的目录,输入以下命令创建项目:
    可以通过全局安装 create-react-app 来创建 React 项目。首先在终端输入以下命令进行全局安装:
    create-react-app 项目名称
    然后进入项目目录,启动项目:

  2. 启动项目
    cd 项目名称
    npm start

  3. npx创建项目(官方推荐)
    使用 npx 创建
    npx 是 npm 5.2.0 版本开始引入的工具,用于简化 npm 中工具包的使用。

使用 npx 创建 React 项目无需全局安装 create-react-app,只需在终端输入以下命令:
npx create-react-app 项目名称

安装完成后,进入项目目录并启动项目:
cd 项目名称
npm start

  1. 指定 React 版本安装

如果需要使用特定版本的 React,可以在创建项目后降级 React 版本。例如,降级到 React 17 版本:
npm install react@18.0 react-dom@18.0 react-router-dom --save
npm install react-router-dom --save
npm install react-redux --save
npm install antd
npm install @ant-design/plots
npm install @antv
开发模式与生产模式

React 脚手架提供了多种命令来管理项目的不同模式:

npm start:执行开发模式,运行项目。

npm run build:执行生产模式,打包项目。

npm test:执行测试模式,测试项目。

npm run eject:将 Webpack 相关文件暴露出来,便于修改配置。

默认是创建React+JS的项目,如果想创建React+TypeScript的项目,执行如下命令即可。
create-react-app 项目名称 --template typescript
cd 项目名
npm start

问题1
如何彻底解决 'React' must be in scope when using JSX
解决参考:https://juejin.cn/post/7294468438390915123
https://www.freecodecamp.org/chinese/news/error-error-0308010c-digital-envelope-routines-unsupported-node-error-solved/

React脚手架创建项目
https://blog.csdn.net/weixin_43041894/article/details/136093865
https://www.oryoy.com/news/react-xiang-mu-zhong-ru-he-zheng-que-an-zhuang-he-shi-yong-react-router-dom-jin-xing-lu-you-guan-li.html

参考:React应用中的定时刷新技巧
https://www.oryoy.com/news/jie-mi-react-ying-yong-zhong-de-ding-shi-shua-xin-ji-qiao-gao-bie-shu-ju-zhi-hou-shi-shi-shu-ju-geng.html

posted @   星空28  阅读(1)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示