01 React开发环境搭建

时间：2024-10-30 08:15:45

安装环境准备​

  1. node.js 建议安装18以上版本，或者使用nvm管理node版本
  2. vscode插件安装 可选 (Simple React Snippets) react的代码片段

初始化react项目 

这里是使用得react 18版本，用vite搭建

npm init vite

  • 执行完成之后会让你输入项目名称 例如 react-demo
  • 接下来会让你选择一个框架 这时候选择 react
  • 然后选择 TypeScript + SWC 如果你不会ts就选择js

swc比babel再4核得情况下70倍,天然支持ts,底层是Rust语言编写

oxc比swc还要*倍，后续vite底层也要接入oxc。地址oxc.rs

目录介绍 

  • public 公共目录
  • src
    • assets 静态资源
    • App.css 根组件样式
    • App.tsx 根组件
    • index.css 全局css文件
    • main.tsx 全局tsx文件
    • vite-env.d.ts 声明文件
  • .eslintrc.cjs eslint配置文件
  • .gitignore git忽略文件
  • index.html 入口文件index.html
  • package.json 项目依赖模块文件
  • tsconfig.json ts配置文件
  • tsconfig.node.json 是vite-ts配置文件
  • vite.config.ts vite配置文件
FAQ:​
  • public公共目录和assets静态资源有什么区别?

答：public目录的资源编译之后会存放到根目录，而静态资源assets是会随着项目一起打包的，public则不会被编译(就是不会被压缩也不会生成hash的文件名原封不对的放到根目录下)。

  • 为什么main.tsx的document.getElementById('root')!要加一个!

答：因为document.getElementById('root')返回可能为空，这时候就会报错。!是非空断言，告诉编辑器这个表达式不会为空。

tsx语法入门

tsx跟jsx有什么区别​

答: 基本没有没有区别只是在jsx语法上增加了类型。

jsx是什么？​

答：jsx是js的语法扩展，允许在js中编写html代码。

例如：const fn = () => <div>嗨喽</div>

 tsx语法编写

1.使用tsx绑定变量{value}

插值语法{} 支持字符串 数字 数组{[1,2] 元素{<sapn>123</sapn>} 三元表达式 api调用num.toFixed(2)

function App() {
  const num: number = 333
  const fn = () => 'test'
  return (
    <>
     <div>
        {'11' /** 字符串用法 */}
        {num /** 变量用法 */}
        {fn() /** 函数用法 */}
        {new Date().getTime() /** 日期用法 */}
        {num?'真'，'假' /**vue中使用的是v-if */}
         {
           num? <div>真的</div> : <div>假的</div>
        }
      </div>
        
    </>
  )
}

2 对象和数组的使用

不允许编写switch if 变量声明 或者直接放入对象本体

对象展示需要序列化{JSON.stringify({a:1})}

去遍历数组vue中使用v-for ，react中使用map

function App() {
  const arr = [1, 2, 3]
  const obj = { name: 'cookie' }
  return (

    <>
      <div>
        {obj.name}
        {JSON.stringify({ a: 1 })}

      </div>
      <div>{
        arr.map((item) => {
          return <div>{item}</div>
        })
      }

      </div>

    </>
  )
}

3 如何添加点击事件驼峰写法on[Click] onClick onBlur

  • onClick - 当用户点击元素时触发。
  • onMouseDown - 当鼠标按钮被按下时触发。
  • onMouseUp - 当鼠标按钮被释放时触发。
  • onMouseMove - 当鼠标指针移动时触发。
  • onMouseEnter - 当鼠标指针进入元素时触发。
  • onMouseLeave - 当鼠标指针离开元素时触发。
  • onDoubleClick - 当用户双击元素时触发。
  • onChange - 对于表单元素（如<input>、<select>和<textarea>），当值改变时触发。
  • onInput - 当元素内容被用户输入时触发。
  • onSubmit - 当表单提交时触发。
  • onFocus - 当元素获得焦点时触发。
  • onBlur - 当元素失去焦点时触发。
  • onKeyDown - 当键盘上的按键被按下时触发。
  • onKeyUp - 当键盘上的按键被释放时触发。
  • onKeyPress - 当键盘上的字符键被按下并且生成一个字符时触发（不推荐使用，因为不会对所有按键做出响应）。
  • onLoad - 当页面或图像加载完成时触发。
  • onScroll - 当元素的滚动条被滚动时触发。
  • onWheel - 当滚轮被滚动时触发。
  • onError - 当发生错误时触发，比如图片加载失败。
  • onContextMenu - 当用户尝试打开上下文菜单时触发。

点击事件若传参使用高阶函数，不需要传参直接使用函数体即可

function App() {
  const value: string = 'cookie'
  const fn = () => {
    console.log('123');

  }
  const clickTap = (params: string) => console.log(params)

  const getEvent = (params: string, e) => console.log(e)
  return (
    <>
      <div>
        {JSON.stringify({ a: 1 })}

      </div>

      <div onClick={fn}>
        点击事件不需要传参直接使用函数体即可

      </div>

      <div onClick={() => {
        clickTap(value)
      }
      }>
        点击事件传参使用高阶函数

      </div>
      <div onClick={(e) => {
        getEvent(value, e)
      }
      }>
        接收event

      </div>
    </>
  )
}

4 tsx如何使用泛型

正常写泛型语法会跟tsx语法冲突，他会把泛型理解成是一个元素节点如<div</div>，解决方案后面加一个,即可

function App() {
  const value: string = 'cookie'
  const clickTap = <T,>(params: T) => console.log(params)

  return (
    <>
      <div onClick={() => {
        clickTap(value)
      }
      }>
        点击事件传参使用高阶函数

      </div>

    </>
  )
}

5 tsx如何渲染html代码片段(dangerouslySetInnerHTML)

function App() {
  const value: string = '<section style="color:red">cookie</section>'
  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: value }}></div>
    </>
  )
}

6 绑定class(className) 多个class style

绑定class(className) id 属性等等 都是一样的

function App() {
  const value: string = 'A'
  const styles = { color: 'yellow' }
  return (
    <>
      <div className={value} id={value} data-index={value}>className</div>
      <div className={`${value} class2`}>多个class</div>

      <div style={{ color: 'red' }}>style</div>
      <div style={styles}>styles</div>
      <div></div>
    </>
  )
}

相关文章