https://github.com/szlsay/hello-react

https://github.com/szlsay/hello-react

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/szlsay/hello-react
• Owner: szlsay
• License: mit
• Created: 2023-07-31T03:39:47.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-03T08:40:42.000Z (over 1 year ago)
• Last Synced: 2023-08-03T08:52:32.891Z (over 1 year ago)
• Language: TypeScript
• Size: 3.09 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hello-react

前端框架的核心价值: 组件化 和 数据驱动视图

## mock

npm init -y

## 3、Hooks

### useState

### useEffect

### 其他内置 Hooks - useRef useMemo useCallback

### 自定义 Hooks

### 第三方 Hooks

### Hooks 使用规则

## 2、JSX语法

标签

首字母小写 - HTML tag, 首字母大写为自定义组件 如  和  就不一样

JSX 里的标签必须是闭合的， 
 这样写在 JSX 会报错（在 HTML 中不会报错），必须闭合 

每一段 JSX 只能有一个根节点，或者使用 <>> （ Fragment ）

属性

和 HTML 属性基本一样

class 要改为 className

style 要写成 JS 对象（不能是 string），key 采用驼峰写法

for 要改为 htmlFor

事件

onXxx 的形式

注意 TS 的写法

```

function clickHandler(event: React.MouseEvent) {

    event.preventDefault()

    console.log('clicked')

}

return 
hello world

```

如果要想传递参数，可以通过如下方式

```

  function clickHandler(event: React.MouseEvent, x: string) {

    event.preventDefault()

    console.log('clicked', x)

  }


  return (

    
) => clickHandler(e, 'hello')}>

        hello world

    

  )

 ```

PS：Event handlers must be passed, not called! onClick={handleClick}, not onClick={handleClick()}.


## TS练习

https://www.tslang.cn/play/index.html

```

const str: string = "123";

function fn(a: number, b: number) { 

    return a + b;

}

console.log(fn(10, 20))

function print(info: T) { 

    console.log(info)

}

print(12)

print("we")

class Foo  { 

    info: T

    setInfo(newInfo: T) { 

        this.info = newInfo

    }

}

const foo1: Foo = new Foo()

foo1.setInfo(12)

console.log(foo1.info)

// foo1.setInfo('ui') // 报错

// console.log(foo1.info)

```

### JS 表达式

{xxx} 格式表示一个 JS 变量或表达式，可用于

普通文本内容，或判断、循环

属性值

用于注释

### 判断

JS 一般使用 if...else 做判断，但不能用于 JSX 的 {xxx} 中。

所以，可以选择其他方式做判断

运算符 &&

三元表达式 a ? b : c

用函数封装

```

const flag = true

return 


    {flag && 
hello
}

    {flag ? 
你好
 : 
再见
}



```


或者用函数封装

```

function Hello() {

    if (flag) return 
你好

    else return 
再见

}


return 

```

### 循环

使用 map 做循环

```

  const list = [

    { username: 'zhangsan', name: '张三' },

    { username: 'lisi', name: '李四' },

    { username: 'shuangyue', name: '双越' },

  ]

  const ul = 


    {list.map(user => {

        return 
{user.name}

    })}

  

```

JSX 循环必须有 key - 帮助 React 识别哪些元素改变了，比如被添加或删除。


同级别 key 必须唯一

key 是不可改变的 —— 尽量不用 index ，要用业务 ID （也不要用随机数）

key 用于优化 VDOM diff 算法（后面再说）

## vite安装

https://cn.vitejs.dev/

npm create vite@latest react-demo-vite --template react-ts

## 1、安装

### 安装node.js

https://nodejs.org/en

### Create React App 中文文档

https://create-react-app.bootcss.com/

### react官网

https://react.dev/

https://zh-hans.react.dev/ 

### 安装命令

npx create-react-app react-ts-demo --template typescript