react+tsx+webpack

最新推荐文章于 2024-07-28 00:56:04 发布

pzmyg

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量7.6k

点赞数

分类专栏：框架

本文链接：https://blog.csdn.net/pzmyg/article/details/85262818

版权

本文详细介绍了如何使用React、TypeScript和Webpack搭建项目，包括初始化工程、Webpack打包过程中的问题及解决方案，如处理SVG、CSS导入，解决模块加载问题，并通过webpack-dev-server实现热更新。在配置过程中遇到的难点包括CSS加载顺序、Webpack配置错误和目录设置，最终成功实现了项目构建和页面渲染。

摘要由CSDN通过智能技术生成

一、初始化工程

1、创建tsx初始化工程
create-react-app app-demo-ts --scripts-version=react-scripts-ts
2、编写组件类Hello，渲染至页面
3、npm build、npm start，运行正常

二、webpack打包

4、安装webpack，webpack-cli
npm install -g webpack
npm install -g webpack-cli
5、安装ts与webpack整合依赖
npm install --save-dev typescript awesome-typescript-loader source-map-loader
6、webpack执行
报错：TS2307: Cannot find module ‘./logo.svg’
解决：
1）安装 url-loader，file-loader，svg-sprite-loader【最后发现每个都可以】
2）tsconfig.json文件中，增加

  "files": [ 
    "images.d.ts" 
  ]

images.d.ts为项目初始化自带文件

declare module '*.svg'
declare module '*.png'
declare module '*.jpg

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

pzmyg

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react+webpack热更新、保存react状态

01-20

在开发React应用时，为了提高开发效率，我们通常会使用Webpack进行模块打包，并结合热更新功能，以便在修改代码后无需手动刷新浏览器就能看到实时变化。本文将详细讲解如何在React + Webpack环境中实现热更新，并...

React+tsx实现拖拽效果 (PC端+移动端)

wpb1109的博客

09-16

506

tsx代码 import './index.less' import { Component, createRef } from 'react' interface Props { } interface State { } class Drag extends Component<Props, State> { disX: number = 0; disY: number = 0; dragElement = createRef<HTMLDivElemen

参与评论您还未登录，请先登录后发表或查看评论

React框架学习笔记

qq_45192089的博客

05-07

3288

React系列知识点一、项目初始化1、react-script2、TSX3、【组件化】配置React的CSS模组（1）使用React最大的优势是模组化（CSS module）：（2）TS的定义声明（3）css类型声明（4）CSS in JS（5）把css转化为了js对象，那么typescript也可以实现css的类型3、Ant Design（UI框架）二、 react-router-dom1、什么是SPA（单页网站应用）？2、什么是路由，什么是虚拟路由？(1) React-router(2) React-r

Webpack--入门只看这一篇就够了(图文＋代码）

最新发布

weixin_46714216的博客

07-28

4036

代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。

第三章 React之JSX、TSX语法

Etc.End的博客

11-30

3083

TSX语法在保留了HTML的标记语言的同时，增加了类型注解和JSX语法的特点，并通过构建工具将它们结合在一起，为构建大型、复杂的Web应用提供了更高效、更灵活的编程方式。在下一篇文章中我将讲解typescript的使用。我是Etc.End。

react学习小记

wajueju的博客

08-05

1275

react

React 使用JSX或者TSX渲染页面

Python私教

05-29

1755

在本节中，我们将实现必需的“Hello, World”JSX应用程序。在这一点上，我们只是把脚趾伸进水里;后面会有更深入的例子。我们还将讨论是什么使这种语法能够很好地用于声明性UI结构。

React18入门（第一篇）——JSX、TSX语法详解

做笔记/记录遇到的前端bug

10-03

3754

React18入门之JSX语法详解，TSX语法详解

react-webpack-typescript-template:react + typescript + webpack模板

05-18

react-webpack-typescript-template master分支是使用打字稿来编译tsx。开发者 npm run dev 生产将转换为es5并缩小 npm run build

vite-react-zhihu:vite + react + typescript仿知乎

03-31

1. **Vite**: Vite是由Vue.js作者尤雨溪开发的新型前端构建工具，它颠覆了传统的Webpack构建流程，提供了更快的热更新和开发环境启动速度。Vite利用ES模块的原生加载能力，无需预构建即可快速启动项目，极大地提高了...

基于 react + typescript + webpack 的旅游网站（手机+PC 端）.zip

05-30

这是一个使用React、TypeScript和Webpack构建的旅游网站项目，涵盖了前端开发中的多个核心知识点。以下是对这个项目中涉及技术的详细解析： 1. **React**： - React是Facebook开发的JavaScript库，用于构建用户...

【ReactJs 中使用 TSX】基本、组件、方法、实现类的类型标注

云散的博客

01-04

1057

可以使用自定义的接口或类型来标注JSX元素或组件的属性user: User;

React+tsx实现选项卡功能

wpb1109的博客

09-16

738

tsx代码 import { Component } from "react"; import './index.less' interface Props { } interface User { ID: string, text: string } interface Con { ID: string, text: string } interface State { ButtonIndex: number ButtonList: User[]

react+tsx开发总结

weixin_43900374的博客

03-16

818

setData改变data的值，dom中的data也会随之改变。

【React+TS】从零开始搭建react+typescript+router+redux+less+pxToVw自适应+sass+axios反向代理+别名@+Antd-mobile

weixin_42582523的博客

12-08

9049

【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+antd-mobil，如有问题，请及时留言，看到后会及时解答的本次修改原因：提供两种方式px2rem和pxToVw配置自适应，删减重复步骤

React项目加入 TS

赵乘风_i

10-31

1万+

1、全局安装ts npm i -g typescript 2、创建tsconfig.json tsc --init 修改tsconfig.json，开启jsx和allowJs配置， 3、安装开发环境依赖 npm install --save-dev typescript @types/react @types/react-dom ts-loader 4、修改webpack.config.js ....

React 生命周期中12个函数详解（2）

g1437353759的博客

10-11

599

最好连接上一篇文章一起查看，能更好的理解该文章： react生命周期函数执行过程： https://editor.csdn.net/md?not_checkout=1&articleId=109010693 1、constructor(props) React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。官方建议不要在construc

最详细教程【React+TS】从零开始搭建React+TypeScript+Router+Redux+Less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile

热门推荐

weixin_56529964的博客

08-17

1万+

你需要准备好node.js版本不低于6.14.8 和 git文章内容比较长(保姆级别教程)，全是干货，请耐心看完注: 项目名称不可以出现大写字母出现Happy hacking! 就说明项目搭建成功打开vscode查看项目当项目中出现tsx 就说明项目搭建成功然后启动项目 npm start / npm run start下载路由 src目录下创建views文件夹，views内创建Home，Contact，About，Navbar四个tsx文件，其中Navbar用来控制路由，其他三个

react+webpack+antd框架自定义使用阿里iconfont图标。

05-19

步骤如下： 1. 在阿里iconfont官网上选择所需图标，添加到购物车中，并下载对应的图标字体文件。 2. 将字体文件复制到项目中的一个合适的目录下，比如 `src/assets/fonts`。 3. 在项目中安装 `@iconify/react` 和 `@iconify/icons` 包，用于渲染图标。 ``` npm install @iconify/react @iconify/icons --save ``` 4. 在 `webpack.config.js` 文件中配置字体文件的加载器，以及 `less-loader` 和 `css-loader` 的配置。 ``` const IconfontWebpackPlugin = require('iconfont-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { outputPath: 'fonts' } } ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader', options: { lessOptions: { modifyVars: { 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, 'icon-font-path': '"../assets/fonts/iconfont"' } } } } ] } ] }, plugins: [ new IconfontWebpackPlugin({ resolve: { extensions: ['.tsx'] } }) ] }; ``` 其中，`IconfontWebpackPlugin` 是用于自动将 `@iconify/icons` 中的图标转换成 React 组件，并导出到指定目录的插件。 5. 在代码中使用图标： ``` import { Icon } from '@iconify/react'; import userIcon from '@iconify/icons-ant-design/user'; const MyComponent = () => { return ( <div> <Icon icon={userIcon} /> </div> ); }; ``` 其中，`userIcon` 是从 `@iconify/icons-ant-design` 包中导入的，可以替换成其他需要使用的图标。`Icon` 组件会自动根据图标名称找到对应的字体文件，并渲染出图标。