一、环境安装
第一种:使用原生搭建(可以从国内下载配置镜像、也可以从国外下载)
指令: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 = 120
let 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
// 定义一个变量marry
let ismarry = true
return (
<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