千峰React:脚手架准备+JSX基础

Au_ust2025-02-19 11:26

组件化->封装性

React提供函数组件实现组件化

React和传统JS的区别就是JS需要手动管理DOM操作，React: 采用组件化开发，通过虚拟DOM提升性能。

MVC 是一种软件设计模式，全称为 Model-View-Controller（模型-视图-控制器）。它将应用程序的逻辑分为三个核心组件，以实现代码的分离和模块化

保证自己的node版本在14.18+、16+

main.jsx是主入口

vite构建的react和vue很像,但是npx构建的完全不像

可以用ESlint检测代码报错

有些错误想忽略，可以在这个位置把报的错误写上，例如：'no-empty':'off'

如果想常态化使用这个插件，可以输入这个命令下载，然后再引入

复制代码 
npm i vite-plugin-eslint
javascript 复制代码 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import eslintPlugin from 'vite-plugin-eslint'//引入

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),
    eslintPlugin({
      include: ['src/*.jsx', 'src/**/*.jsx']//引入要管理的文件，src下的.jsx，*是通配符
    })
  ],

})

每次写完代码在浏览器刷新就会出现报错提示

格式化插件

React和React-dom模块分别起什么作用？

dom操作有两种操作方式：react-dom/client和react-dom/server，一种是对客户端，一种是对服务端，让后端进行操作

React的核心模块除了在浏览器端进行服务，也可以在其他环境使用，比如开发app

这样就不需要dom模块了👇

关于JSX的部分前一篇讲过就不赘述了，讲讲没讲过的

javascript 复制代码 
//main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './01_了解JSX.jsx'
//import './index.css'//注释掉这个，用上面那个
//import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

//01_了解JSX.jsx
function App(){
    return (
        <div>
            Hello App
        </div>
    )
}
// 也可以这么写
// const App = () => {
    
// }

export default App

return后面最好加个小括号，防止后面的程序不执行

jsx的执行过程👇

JSX和HTML之间的写法区别

在 HTML 中，<label> 标签使用 for 属性来关联表单元素的 id，但是在 JSX 中，由于 for 是 JavaScript 的保留字（用于 for 循环），React 使用 htmlFor 来代替 for 属性。

htmlFor 的值 应该与目标表单元素的 id 相同。

两个单词的属性，例如tab-index必须使用驼峰式命名，写成tabIndex

javascript 复制代码 
function App(){
    return (
        <div>
            Hello App
            <label htmlFor="elem">用户名</label>
            <input type="text" id="elem" tabIndex='1'/>
        </div>
    )
}
export default App

但是自定义属性该怎么写就怎么写

javascript 复制代码 
<input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/>
//data-id不报错

大括号里可以写JavaScript，注释也是写在js里的，所以注释符号在大括号里{/*我是注释*/}

javascript 复制代码 
function App(){
    return (
        <div>
            Hello App
            <label htmlFor="elem">用户名</label>
            <input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/>
            <div>
                {1 + 1},{'foo'.toUpperCase()},{[1,2,3].reverse()}
        </div>
        </div>
    )
}
export default App

也可以使用声明的变量

javascript 复制代码 
function App() {
    const username='荷叶饭'
    return (
        <div>
            Hello App
            <label htmlFor="elem">用户名</label>
            <input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/>
            <div>
                {1 + 1},{'foo'.toUpperCase()},{[1, 2, 3].reverse()}
                <br />
                {username}
            </div>
        </div>
    )
}
export default App

对象和函数是不能直接放到JSX里的

javascript 复制代码 
function App() {
    const username = '荷叶饭'
    const obj = { user: '荷叶饭', age: '19' }
    const fn=()=>{}
    return (
        <div>
            Hello App
            <label htmlFor="elem">用户名</label>
            <input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/>
            <div>
                {1 + 1},{'foo'.toUpperCase()},{[1, 2, 3].reverse()}
                <br />
                {username}
                <br />
                {obj}//错
                <br />
                {fn}//错
            </div>
        </div>
    )
}
export default App

属性使用大括号

唯一根元素是指最外层只能有一个div，这样可以被脚手架转为对象

如果不想用多余的div包住，可以自己写一个容器

javascript 复制代码 
import { Fragment } from "react"//提供的容器，渲染时不会渲染


function App() {
    const username = '荷叶饭'
    const obj = { user: '荷叶饭', age: '19' }
    const fn=()=>{}
    return (
        <Fragment>
             <div>
            Hello App
            <label htmlFor="elem">用户名</label>
            <input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/>
            <div>
                {1 + 1},{'foo'.toUpperCase()},{[1, 2, 3].reverse()}
                <br />
                {username}
                <br />
                {obj}
                <br />
                {fn}
            </div>
        </div>
        <div>我是多出来的div</div>
        </Fragment>//容器
    )
}
export default App

Fragment是可以添加key属性的，这里不细讲

style的单位默认是px，不写也可以

说是这么说但是我打印出来的width和body一样宽了

三种样式

这是引入外部样式，效果是全局的，只要className叫box，效果都是一样的👇

javascript 复制代码 
import './04_全局样式.css'

function App() {
  // const myStyle = { width: '100px', height: '100px', background: 'red' }
  return <div className='box'>hello App</div>
}
export default App


//./04_全局样式.css
.box {
  width: 300px;
  height: 300px;
  background-color: rgba(94, 99, 173, 0.299);
}

局部样式这么写，名字后面加【.module.css】就是局部的写法

这个写法是错误的

局部样式应该这么写👇

javascript 复制代码 
import './04_全局样式.css'
import style from './05_局部样式.module.css'

function App() {
  // const myStyle = { width: '100px', height: '100px', background: 'red' }
  return (
    <>
      <div className='box'>hello App</div>
      <div className={style.box2}>aaaaaa</div>
    </>
  )
}
export default App

总结使用局部样式的步骤包括：写一个name.module.css命名规范的css->在其他要使用的jsx里导入，导入的时候要命名->使用对应的选择器给标签命名，例如这里是className={style.box2}

一个细节是在css里可以写短线【-】，在jsx里不能这么写，应该用中括号括起来加引号，这么写：

javascript 复制代码 
//03_style样式.jsx
import './04_全局样式.css'
import style from './05_局部样式.module.css'

function App() {
  // const myStyle = { width: '100px', height: '100px', background: 'red' }
  return (
    <>
      <div className='box'>hello App</div>
      <div className={style.box2}>aaaaaa</div>
      <div className={style['head-title']}>hahaha</div>
    </>
  )
}
export default App



//05_局部样式.module.css
.box2 {
  width: 300px;
  height: 300px;
  background-color: blue;
}
.head-title {
  width: 500px;
  height: 100px;
  background-color: chartreuse;
}

但是有的用点，有的用中括号，这很不好

react脚手架vite里提供了机制可以使用驼峰命名，这样就需要在vite.config.js修改配置

javascript 复制代码 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import eslintPlugin from 'vite-plugin-eslint'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    eslintPlugin({
      include: ['src/*.jsx', 'src/**/*.jsx'],
    }),
  ],
  css: {
    modules: { localsConvention: 'camelCase' },//在这里修改配置
  },
})
javascript 复制代码 
 <div className={style.headTitle}>hahaha</div>

sass的预处理

安装sass

写一个sass的文件：

引入并使用

javascript 复制代码 
import './06_sass.scss'//引入

function App() {
  return (
    <>
      <div className='box3'>aaa</div>//使用
    </>
  )
}
export default App

预处理器了解就好

sass也可以变成局部的，和局部style是一样的

classnames

可以管理类名

要安装

javascript 复制代码 
npm i classnames

导入

javascript 复制代码 
import classNames from 'classnames'

使用

javascript 复制代码 
import classNames from 'classnames'
import './04_全局样式.css'
import style from './05_局部样式.module.css'

function App() {
  const myClass = classNames({
    box1: true,
    box2: false,
    [style.headTittle]: true,
  })
  return (
    <>
      <div className={myClass}>hello App</div>
    </>
  )
}
export default App
相关推荐
崔庆才丨静觅38 分钟前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60611 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅2 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment2 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03UV安装并设置国内源04openclaw配置教程（linux+局域网ollama）05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09Vue-skills的中文文档10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南