前言
记录学习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文件
未完，待续。
