React 学习文档

Tips

// !(非空断言)的作用是为了骗过编辑器这个数据一定是存在的
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

安装

1. 脚手架创建项目

npm init vite

Ok to proceed? (y) y
◇ Project name:
│  react-base
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript + SWC

2. 安装依赖包

 npm install --save-dev @babel/core @babel/cli @babel/preset-env

关闭严格模式

严格模式是通过 <React.StrictMode> 包裹你的应用启用的。

要关闭它，你只需要把它删掉 / 去掉包裹即可

ReactDOM.createRoot(document.getElementById('root')).render(
	// <React.StrictMode>
	<App />
	// </React.StrictMode>
);

基础

事件支持泛型函数

// 纠正泛型<T,>
const fn = <T,>(params: T) => {
  console.log(params)
}
return(
  <>
    <div onClick={(e) => fn(123)}></div>
  </div>
)

绑定 html 片段

类似于 vue 的 v-html

let html = '<h1>hello world</h1>';
return (
	<>
		<div dangerouslySetInnerHTML={{ __html: html }}></div>
	</>
);