react17+ts 学习

简介: react17+ts 学习


前言

记录学习react的过程:

本人项目中需要用到react,学的是基于React17 结合TS的教程。

“前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。


提示:以下是本篇文章正文内容,按照学习先后记录

一、创建一个react项目

https://beta.reactjs.org/learn/start-a-new-react-project

npx create-react-app my-app

npx的作用是什么?

npx是npm5.2以后的新命令。在没有npx以前,想使用react的脚手架工具必须使用执行 npm install -g create-react-app全局安装在电脑里面。 然后再调用create-react-app my-app 工具来创建react应用。而有了npx可以直接使用npx create-react-app my-app这一行命令就可以完成react应用的创建。

启动项目

cd my-app
npm start

项目打包

react-scripts是react打包的核心组件,相当于wepace的傻瓜版

打包命令

打包命令是npm run build。打包完成后会生成一个build文件夹。将build文件夹下的文件拷贝的nginx的某个静态目录就可以直接浏览使用了。

npm run eject的作用

可以弹出项目的配置文件,一般项目不怎么使用。

入口文件分析

访问入口index.htmlindex.tsxApp.tsx各个子组件和css样式等

大体流程 index.html -> index.tsx -> App.tsx -> 各个子组件和css样式等

html的内容最后通过虚拟dom的方式挂载到index.html的 id=root的dom下。

react的设计理念

  • 单向数据流
  • 虚拟DOM

  • 组件化

二、创建一个react+typescript的项目

创建项目命令

npx create-react-app xxx(项目名) --template typescript

如何让react支持json引入不报错

在tsconfig.json文件下。加入

"moduleResolution": "node",
 "resolveJsonModule": true,

react为什么使用jsx

  • React并不强制使用JSX,也可以使用原生JavaScript。
  • React认为视图的本质就是渲染逻辑与UI视图表现的内在统一。
  • React把HTML与渲染逻辑进行了耦合,形成了JSX。
jsx特点
  • 常规的HTML代码都可以与JSX兼容
  • 可以在JSX中嵌入表达式


  • 使用JSX指定子元素


jsx命令规范

jsx表示对象

如何在jsx中防止注入攻击?

React DOM 在渲染所有输入内容之前,默认会进行转义。

它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。

所有的内容在渲染之前都被转换成了字符串

这样可以有效地防止XSS (cross-site-scripting,跨站脚本) 攻击

使用花括号直接引用渲染内容的时候,React会自动转义.

jsx的5种模式:

在tsconfig.json文件下,jsx的有5种模式。

这些模式只在代码生成阶段起作用,类型检查并不受影响

preserve模式

在preserve模式下生成代码中会保留JSX以供后续的转换操作使用.

输出文件会带有.jsx扩展名

react模式

react模式会生成React.createElement,在使用前不需要再进行转换操作了.

输出文件的扩展名为.js

react-native模式

react-native相当于preserve,它也保留了所有的JSX,但是输出文件的扩展名是.js.

指定模式

可以通过在命令行里使用--jsx标记或tsconfig.json里的选项来指定模式.

如何在react中配置css样式

配置css module

如何架构项目中的样式文件?

  • 直接使用引入css样式
    最简单的一种引入css的方式》
  • css module (模组化)
    最推荐的一种css引入方式。

每个jsx或者tsx文件就被视为一个独立存在的原件。

原件所包含的所有内容也同样都应该是独立存在的。

具体做法:

①定义css声明

创建src/custom.d.ts

declare module "*.css" {
  const css: { [key: string]: string };
  export default css;
}

②规范命名

App.css 改为 App.module.css

③以对象的方式使用css

将css样式转化为javascript对象

1: 安装一个插件。此插件仅作用于开发。

npm install typescript-plugin-css-modules --save-dev

2: 配置插件

在tsconfig.json中配置

"plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]

针对vscode工具,还需要在根目录下。创建.vscode文件夹。

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

使用

创建个css文件:

引入模块化的css文件


未完,待续。

相关文章
|
27天前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
68 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
33 0
|
18天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
34 2
|
1月前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
12 1
|
1月前
|
JSON 前端开发 JavaScript
React 进阶阶段学习计划
React 进阶阶段学习计划
|
2月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
28 2
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
前端开发
react学习(22)高阶函数和函数柯里化
react学习(22)高阶函数和函数柯里化
|
2月前
|
前端开发 JavaScript
react学习(21)受控组件
react学习(21)受控组件