1.开始 9.14

npm create vite@latest

1.1安装完已经内置Eslint（代码规范插件）


  "scripts": {
    "dev": "vite",  //开发运行
    "build": "vite build", //生产打包
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives  --max-warnings 0",  //代码规范检查
    "preview": "vite preview"
  },

npm run lint 检查代码规范

写代码中实时提醒-一般不用 npm i vite-plugin-eslint

和 npm run lint效果一致

在vite.config.js配置

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import eslintPlugin from "vite-plugin-eslint";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), eslintPlugin({
    include:['src/*.jsx','src/**/*.jsx']   
    //处理src下所有jsx src下子目录下jsx
  })],
});

2.prettier代码格式化插件

2.知识

1.jsx语法

2.行内样式全局样式局部样式的使用

行内样式写成对象style={对象} 例如style={{width:12px;height:23px}}

1.安装npm i classnames 模块 =>让className更灵活使用对象写 2.文件中引入 import classNames from 'classnames' 3.使用const myClass=classnames({ box1:true; box2:false })

3.事件

import './App.css' //全局样式
import App2 from './Compoent.jsx'
function App() {
  const hander1 = () => {
    console.log('111')
  }
  //用高阶  否则 hander2(222）是underfined
  const hander2 = (num) => {
    return () => {
      console.log(num)
    }
  }
  const hander3 = (e,num) => {
    console.log(e, num)
  }
  return (
    <>
      <button onClick={hander1}>点击</button>
      <button onClick={hander2(222)}>点击2-传参</button>
      <button onClick={(e)=>hander3(e,123)}>点击</button>
      <button onClick={hander3}>点击4</button>
      <App2></App2>
    </>
  )
}

export default App

两种实现组件的点标记写法

作用：后期项目功能分类，相同功能分成一组

1.对象

import './App.css' //全局样式

const Qf = {
  Welocome() {
    return <>hello Welcome2</>
  },
}
//灵活  可以解构-命名
const { Welocome } = Qf
function App() {
  return (
    <>
      hello Welcome
      <br />
      <Qf.Welocome></Qf.Welocome>
      <br />
      <Welocome></Welocome>
    </>
  )
}

export default App

2.函数

import './App.css' //全局样式

const Qf = () => {
  return <>hello Welcome2</>
}
// eslint-disable-next-line react/display-name
Qf.Welcome = () => {
  return <>hello wl</>
}
//灵活  可以解构-命名
function App() {
  return (
    <>
      hello Welcome
      <br />
      <Qf></Qf>
      <br />
      <Qf.Welcome></Qf.Welcome>
    </>
  )
}

export default App

react18

1.开始 9.14

2.知识