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

组件化->封装性

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 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import eslintPlugin from 'vite-plugin-eslint'//引入 // 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的部分前一篇讲过就不赘述了，讲讲没讲过的

//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

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

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

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

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

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

也可以使用声明的变量

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里的

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包住，可以自己写一个容器

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，效果都是一样的👇

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】就是局部的写法

这个写法是错误的

局部样式应该这么写👇

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里不能这么写，应该用中括号括起来加引号，这么写：

//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修改配置

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import eslintPlugin from 'vite-plugin-eslint' // vite.dev/config/ export default defineConfig({ plugins: [ react(), eslintPlugin({ include: ['src/*.jsx', 'src/**/*.jsx'], }), ], css: { modules: { localsConvention: 'camelCase' },//在这里修改配置 }, }) <div className={style.headTitle}>hahaha</div> sass的预处理

安装sass

写一个sass的文件：

引入并使用

import './06_sass.scss'//引入 function App() { return ( <> <div className='box3'>aaa</div>//使用 </> ) } export default App

预处理器了解就好

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

classnames

可以管理类名

要安装

npm i classnames

导入

import classNames from 'classnames'

使用

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