一、React基础知识

一、环境安装

        第一种：使用原生搭建(可以从国内下载配置镜像、也可以从国外下载)

                        指令：1.国内下载：（1：npm config set registry https://r.npm.taobao.org//

                                                        （2：npm install -g create-react-app:全局安装react脚手架

                                                        （3：create-react-app 项目名：创建项目 

                                                        （4：cd  项目名：进入项目

                                                        （5：npm run start：启动项目

                                2.国外下载：执行（2-（5步骤即可，下载速度较慢

        第二种方式：用vite搭建脚手架（速度较快，建议使用）

                指令：（1.npm init vite@latest：初始化一个新项目

                        （2：编辑项目名，选择react，选择javascript、tscript等等，按需求选择

                        （3：cd 项目名：进入该项目

                        （4：npm init:初始化一个新的 Node.js 项目

                          (5:npm run dev:启动项目

二、JSX相关语法

src文件夹下的main.jsx文件：是整个项目的入口文件，不可移除，其他的按自己需求保留

JSX：完整写法：JavaScript XML(标记语言)：通俗的讲是js语言里面可以插入标签

        XML和HTML的区别：前者不能直接引入外部文件，后者可以引入外部文件（js、ts、css等）

1.组件，创建组件可以分为三种：纯组件、函数组件、类组件

        1.1：纯组件：通过创建jsx对象，包含了多个元素的div标签（三个div标签）。可以将jsx对象当作变量使用在标签的括号中

import React from 'react'
import ReactDOM from 'react-dom/client'let com = <div><h1>这是纯组件部分呀</h1><div>纯组件</div><div>函数组件</div><div>类组件</div>
</div>
//render里面写入com这个jsx对象，即可将其里面的元素展现到页面中去
ReactDOM.createRoot(document.getElementById('root')).render(com)

        1.2：函数组件：通过声明一个函数来创建组件

import React from 'react'
import ReactDOM from 'react-dom/client'
// 声明一个函数
function Hanshu(ARG) {return <div><h1>这是通过函数来创建的组件呀</h1><div>在main.jsx文件里面操作的嘞</div></div>
}
// 11行和12行以及render中的Hanshu（）等价
let res = <Hanshu></Hanshu>
let res2 = Hanshu()ReactDOM.createRoot(document.getElementById('root')).render(Hanshu())

        1.3：通过类来创建组件：

import React from 'react'
import ReactDOM from 'react-dom/client'
//创建一个Type类并继承React的组件部分，是为了继承它的响应式数据功能
class Type extends React.Component {render() {return <div><h1>这是通过class类来创建的组件呀</h1><div>嘿嘿黑</div></div>}
}
// 只能通过这个来实现咯
let res = <Type></Type>
ReactDOM.createRoot(document.getElementById('root')).render(res)

2.jsx插值表达式的使用途径

        （1：变量：直接当作变量通过{}来使用

import { useState } from 'react'
import './test.css'
function test() {// 当作变量来使用let bianliang = 120let arr = ["box1", "box2", "jack", "22岁了", "今天是他生日哦"]let obj = { name: "小红", age: "22", sex: "女", job: "student" }return (<div className=''><div>变量使用：：{bianliang}</div><div>访问数组中的成员::{arr[4]}</div><div>访问对象中的成员::{obj.name}</div></div>)
}
export default test

        （2：对象数组成员访问

import { useState } from 'react'
import './test.css'
function test() {let arr = ["box1", "box2", "jack", "22岁了", "今天是他生日哦"]let obj = { name: "小红", age: "22", sex: "女", job: "student" }return (<div className=''><div>访问数组中的成员::{arr[4]}</div><div>访问对象中的成员::{obj.name}</div></div>)
}
export default test

        （3：js运算表达式

import { useState } from 'react'
import './test.css'
function test() {let isout = "yes"let count = 22// 定义一个变量marrylet ismarry = truereturn (<div className=''>{/*相当于vue中的v-fi： 如果isout的结果为yes，则显示”不出去了吧“，否则显示”出去呀，散步不“ */}<div>{(isout === "yes") ? "不出去了吧" : "出去呀，散步不"}</div>{/* 可以将前面的变量进行加减乘除计算 */}<div>count+21的结果为{count + 21}</div>{/* 判断marry是否为true满足则显示后面的”已经结婚了哦“信息 ，判断为false则不显示*/}<div>{ismarry && "逻辑与的部分"}</div>{/* 若marry判断为false，则显示后面的语句，若为true则显示前面的语句 */}<div>{ismarry || "逻辑或的部分"}</div></div>)
}
export default test

        （4：函数调用

import { useState } from 'react'
import './test.css'
function test() {function diaoyong() {console.log("调用了函数名为diaoyong");}return (// 直接在标签中将diaoyong函数当作变量使用<div className='fa'>111{diaoyong()}</div>)
}
export default test

        （5：jsx对象（给变量赋标签组件）

import { useState } from 'react'
import './test.css'
function test() {// 定义一个jsx对象，包含了多个元素的div标签（）h1,h2,h3,p标签// 可以将jsx对象当作变量使用在标签的括号中let jsxobj = <div><h1>hello</h1><h2>你好</h2><h3>晚上老好了</h3><p>嘿嘿黑</p></div>return (// 将jsxobj这个对象显示到页面中去<div className='fa'>{jsxobj}</div>)
}
export default test

        （6：插值{}可以使用途径

                （6.1：数据循环渲染

import { useState } from 'react'
function test() {// 想要将arr数组里面的元素遍历装到a标签中去// 第一种写法，使用for循环将其取到的元素当作变量放到dive标签中去，再将遍历的得到的div标签添加到新的数组中去let arr = ["你好", "react", "很高兴认识您", "我相信接下来的时间", "我们会相处的很愉快的"]let newarr = []for (let i = 0; i < arr.length; i++) {newarr.push(<div key={i}>{arr[i]}</div>)}return (<div>{newarr}{/* 第二种(最常用)：直接在标签中使用map函数 ,将各个元素取出来放到div标签中当作变量使用*/}<div >{arr.map((el, index) => <div key={index}>{el}</div>)}</div></div>)
}
export default test

小案例：数组中的元素是对象，将每个元素都显示在页面上

import { useState } from 'react'
import './test.css'
function test() {// 将数组arr里面的数据取出来展现到页面上let arr = [{ title: "电脑", discrbe: "真的不错", price: "1231元", location: "四川", comment: "发货快，是正品，下次还来" },{ title: "手机", discrbe: "正品直发", price: "2313元", location: "广东" },{ title: "电话手表", discrbe: "可以聊天的神奇软件", price: "1231元", location: "广东" }]return (// 用map函数将arr里面的元素取出来，然后通过点语法来取元素中的对象<div className='fa'>{arr.map((el, index) => <div className='big' key={index}><h4>{el.title}</h4><div>{el.discrbe}</div><div>{el.price}</div><div>{el.comment}</div></div>)}</div>)
}
export default test

                （6.2：标签事件(以点击事件为例)

import { useState } from 'react'
function test() {// 定义一个函数dianj（没传参数）function dianji() {console.log("触发了点击事件");}function canshu() {console.log("触发了传递参数的函数");}return (<div>{/* 点击事件操作的函数不能加括号，加了括号是不用点击就立即执行 */}<div className="box" onClick={dianji}>点击打印</div><button onClick={canshu}>传参数事件</button></div>)
}
export default test

                （6.3：标签的属性（className,style,src,href.....）

                 （6.3.1：className:     

                      若只想一个类名需要在前面声明一个对象obj={one1：”one“,one2:"two",one3:"three"}

                                格式：className={obj.one1}

                        若想要给一个标签多个类名可以声明一个数组变量arr=【box1,box2,box3】

                                       className={arr.join(' ')}

                                也可以直接claName={【box1,box2,box3,box4】.join(' ')}

                （6.3.2：style:分为全局样式和局部样式

                        全局样式可以直接在main.jsx中引入作为全局样式

/*.index.css文件中为 全局样式 */
.name {width: 100px;height: 100px;border: 1px solid black;
}//app.jsx文件中import { useState } from 'react'
// 引入组件Box
import Box from './jubu.jsx'
function App() {return (<div><div className='name'>全局样式</div><Box></Box></div>)
}export default App

                        局部样式：当项目中有几个组件，组件中的类名重复时，则显示的是后面执行的那个样式，若想要显示各自的样式，需要将各自的样式设置为局部样式（样式文件后缀名修改为module.css）

//jubu.jsx文件中import { useState } from 'react'
// 引入局部样式
import yangshi from './jubu.module.css'
function jubu() {return (<div className={yangshi.name}>局部样式的效果</div>)
}
export default jubu//jubu.module.css文件中
/* 局部样式 */
.name {width: 100px;height: 50px;background-color: yellow;border-radius: 10px;
}

                （6.3.3：src和href：绑定的是一个地址或网址

import { useState } from 'react'
function test() {// 点击跳转到百度首页let tiaozhuan = "https://www.baidu.com"// 图片显示的网络地址，也可以是本地地址let tupian = "https://tse1-mm.cn.bing.net/th/id/OIP-C.De4iKAMeTvWwPQxXNK74ZgHaE8?w=281&h=187&c=7&r=0&o=5&pid=1.7"return (<div><a href={tiaozhuan}>点击跳转到百度首页</a><img src={tupian} alt="" /></div>)
}export default test