React 创建 js 与 ts 项目

简介: React 创建 js 与 ts 项目

一、npx 创建

  • 创建 js 工程
$ npx create-react-app demo
  • 创建 ts 工程
$ npx create-react-app demo --template typescript

二、npm 创建

  • 全局安装 create-react-app
# 如果之前安装过,可先移除,保证最新版本
$ npm uninstall -g create-react-app
# 安装
$ npm install -g create-react-app
  • 查看安装版本
$ create-react-app -V
  • 创建 js 工程
$ create-react-app demo
  • 创建 ts 工程
$ create-react-app demo --template typescript

三、$ npm run eject 释放配置文件

  • 通过脚手架创建完项目后,会发现没有任何 配置文件(例如 webpack 相关配置文件):
    create-react-app 的背后,隐藏着一个 webpack。一般情况下来说,webpack 是默默隐藏的幕后英雄,不需要修改它的配置,只需要简单无脑使用即可。
    create-react-app 本身的 webpack 配置文件存在于node_modules/react-scripts/ 目录下面,但是这个目录是 node_modules/,里面的源码都是不建议修改的。
    某些情况下要修改 webpack 配置。那么如何才能完成修改 webpack 配置这个需求呢?
    create-react-app 提供了一个命令,用于释放这些配置。命令是:
$ npm run eject
  • 注意:eject 的翻译是:喷出,就是说把这些配置文件,从隐藏的位置给喷出来。而且 create-react-app 并不推荐大家这么做,因为这个步骤无法逆转。
  • 这里经常遇到问题,产生报错,无法往下进行 npm run eject 报错,详解,所以执行之前,一定要做好备份工作,因为这个步骤不可逆转,也不是官方推荐执行的命令。
    执行完毕后,项目根目录下面就有 configscripts 两个目录生成。同时,package.json 里面的 scripts,也更新了新的命令。

    上面命令内容变成了下面命令内容:

    多出来的 configscripts 配置文件夹,用于自定义配置:



相关文章
|
28天前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
39 11
|
25天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
44 4
|
27天前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
87 10
|
1月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
63 5
|
2月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
|
29天前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
34 0
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
2月前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
32 1
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。