文章目录

前言
一、创建一个react项目
- 启动项目
- 项目打包
- 打包命令
- npm run eject的作用
- 入口文件分析
- react的设计理念
二、创建一个react+typescript的项目
- - 创建项目命令
  - 如何让react支持json引入不报错
- react为什么使用jsx
- - jsx特点
  - jsx命令规范
  - jsx表示对象
  - 如何在jsx中防止注入攻击？
  - jsx的5种模式:
- 如何在react中配置css样式
- - 配置css module
  - - 如何架构项目中的样式文件?
    - 将css样式转化为javascript对象

前言

记录学习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的作用

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

入口文件分析

Created with Raphaël 2.3.0 访问入口 index.html index.tsx App.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文件

未完，待续。

react17+ts 学习相关推荐

TS学习笔记04 JS创建对象的方式
TS学习笔记04 JS创建对象的方式首先我们回顾下JS中创建对象的方式比如说我按照下面的创建了两个对象分别为stu1和stu2,比如说我现在想给这两个对象都添加一个新的方法,但是这两个对象 ...
【TS学习和在react中的简单应用】
TS学习和在react中的简单应用 1. ts基础 1.1 ts基本类型 1.2 数组 1.3 对象 1.4 函数 1.5 class类 1.6 枚举enum 1.7 typeof 1.8 TS中的泛 ...
TS学习笔记 ---未完待续....
TS学习笔记 1 .ts文件与.tsx文件有什么区别 2.使用TS之前需要配置 3.TS特性泛型和类型注解有什么区别? 3.什么是泛型参数? 4.函数.类.接口有什么区别? 4.1 一个class不 ...
React+TS学习和使用（三）：React Redux和项目的路由配置
开启学习react+ts,本篇主要是学习使用React Redux和项目的路由配置一.React Redux 需求:使用TS+React Redux实现一个累加. A. 安装 $ yarn add ...
禁忌搜索算法TS(学习笔记_04)
1. 特点禁忌准则:禁忌表和禁忌对象的设置,使算法避免迂回搜索藐视准则(特赦准则):对禁忌策略的放松新解为优良解的概率高:局部搜索能力强优于best so far的解非禁忌的最优解(可以接受 ...
「1.8W字」2020不可多得的 TS 学习指南
阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中,那时候 TypeScript 还没有进入大众的视野.而现在学习 TypeScript 的小伙伴越来越多了,本文阿宝哥将从 ...
硬干货！1.8W字TS 学习指南，我不信你一口气能读完（建议收藏）
阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中,那时候 TypeScript 还没有进入大众的视野.而现在学习 TypeScript 的小伙伴越来越多了,本文阿宝哥将从 ...
TS学习(二) :安装ts与ts配置
一.安装TypeScript npm i -g typescript 二.安装完成后创建ts 使用ts语法可能遇到的报错问题在啥都没配置的默认情况下,TS会做出下面几种假设: 假设当前的执行环境 ...
TS学习(九) :TS中的泛型
为什么要使用泛型 function fn(arr, n: number) {return arr } 在上面函数中第一个参数是个数组,第二个参数我们可以确定是个number类型的数字,但是第一个参数我 ...

react17+ts 学习