万字血书React—走近React

配置开发环境

储备知识：终端或命令行、代码编辑器

create-react-app

其是基于Node的快速搭建React项目的脚手架工具。

npx create-react-app testdemo
cd testdemo
npm i

npx命令是npm v5.2.0引入的一条命令，无需安装脚手架包，就可以直接使用这个包提供的命令

React with TypeScript

npx create-react-app testdemo-ts --template typescript
cd testdemo
npm i

About TypeScript

给原生JavaScript添加类型检查
与ES6一样目前无法被主流浏览器直接读取

Compile TypeScript

编译器：ts-loader、awesome-typescript-loader以及babel-loader

{
  "compilerOptions": {
    "noImplicitAny": false, //不需要显示地声明变量的类型any
    "target": "es5", //编译后的目标js版本
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], //库文件，过这些库文件，告诉typescript编译器可以使用哪些功能
    "allowJs": true, //允许混合编译js文件
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true, //允许使用commonJs方式import默认文件
    "strict": true,  
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext", //配置代码模块系统，Node.js的commonJs、ES6的esnext、requireJs的AMD
    "moduleResolution": "node",// 决定编译器的工作方式
    "resolveJsonModule": true,
    "isolatedModules": true, //编译器会将每个文件作为单独的模块使用
    "noEmit": true, //发生错误时候，编译器不会生成Js代码
    "jsx": "react-jsx" //允许编译器支持编译react代码
  },
  "include": [
    "src"
  ] //使用此选项列出我们需要编译的文件，“文件路径”选项需要文件的相对或绝对路径
}

Update to TypeScript

1、npm install --save typescript @types/node @types/react @types/react-dom @types/jest
2、所有js文件改为jsx文件
3、import react

React基础

About React

History of FE

HTML、CSS、JavaScript——Ajax——jQuery——Angular MVC——Vue、React MVVM

Why is React？

单向数据流

React负责渲染UI，并在数据变化时更新UI

虚拟DOM

组件化

保持视觉风格的统一
便于程序员之间的协作

学习一次，随意使用（必杀技）

使用React可以开发移动端原生应用（react-native）
使用React可以开发VR（虚拟现实）（react 360）

What is React?

React是一个用于构建用户界面（HTML页面）的JavaScript库

如果从MVC角度来看，React仅仅是视图层（V），只负责视图的渲染，不提供完整的M和C的功能

起源：Facebook的内部项目

JSX

What is JSX?

const element = <h2>Hello,world!</h2>

这是ReactJS自创的语言：JSX

对于React项目使用js和jsx都可以
ts对应tsx语法

JSX 其实是React.createElement的语法糖，下图的两种写法完全等价：

Why is JSX?

React认为视图的本质是：渲染逻辑与UI视图表现的内在统一
React把HTML与渲染逻辑进行了耦合，形成了JSX

Features of JSX

可以在JSX中嵌入表达式
使用JSX指定子元素

Attention

小驼峰

特殊的属性名：class->className、for->htmlFor、tabindex->tabIndex
如果元素没有子节点可以用/>结束
推荐使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

基本使用

JXS中使用（嵌入）Js表达式

单大括号

const name = '张三'
// 1、使用JSX创建react元素
const title = <h2>Hello {name}</h2>

//2、渲染react元素
ReactDOM.render(title, document.getElementById('root'

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

拓展阅读：如何防止XSS攻击？

JSX的条件渲染

条件渲染：根据条件渲染特点的JSX结构
可以使用if/else或三元运算符或逻辑与运

编程笔记 » 万字血书React—走近React