一、【react】初识react

中文官网：https://react.docschina.org/

1、创建一个react项目

这里推荐vite创建

vite:官网

执行

npm create vite@latest

按照提示输入项目名称
选择react+ts+swc
进入项目目录
执行

#安装依赖
npm install
#运行项目
npm run dev

看到这个界面就算运行成功了

2、项目结构

主要文件介绍：
main.tsx 程序入口
App.tsx 初始界面
package.json 管理插件的
index.xml 单页面应用的最原始的页面

main.tsx，连接index.xml和App.tsx的关键文件

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  //这个是严格模式
  <StrictMode>
    <App />
  </StrictMode>,
)

3、tsx是什么

要说tsx先说jsx
JSX是JavaScript XML的缩写，是一种JavaScript的语法扩展。它允许我们在JavaScript代码中编写类似HTML的结构，使得React组件的书写更为直观和易于理解。然而，JSX并不是真实的JavaScript，它最终需要通过Babel等编译器转换为纯JavaScript代码才能被浏览器解析执行。
tsx就是jsx的typescript版本，更推荐使用tsx