目录
安装
使用过的的vite集成项目:
- npm init vite @latest
- 给项目命名
- 选择安装react项目
- 勾选JavaScript或者typescript语言
- cd <你创建的项目名>
- npm i 安装依赖包
- npm run dev 启动你的react项目
创建和嵌套组件
React 应用程序是由组件组成的。一个组件是 UI(用户界面)的一部分,它拥有自己的逻辑和外观。React 组件必须以大写字母开头,而 HTML 标签则必须是小写字母。
标签使用规则
大多数 React 项目会使用 JSX,JSX 比 HTML 更加严格。你必须闭合标签,如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中,比如 <div>...</div> 或使用空的 <>...</> 包裹 :
添加样式
在 React 中,你可以使用 className 来指定一个 CSS 的 class。它与 HTML 的 class 属性的工作方式相同:
<div className="a">box3</div>
然后,你可以在一个单独的 CSS 文件中为它编写 CSS 规则,如果你想要让这个CSS文件有一个局部的作用,你需要将文件命名为Box3.module.css类型,并且在想要使用这段CSS样式的文件中,使用import obj from './Box3.module.css' 类型进行导入,在使用classname指定class时,要使用 <div className={obj.a}>box3</div> 格式。
显示数据
JSX 会让你把标签放到 JavaScript 中。而大括号会让你 “回到” JavaScript 中,这样你就可以从你的代码中嵌入一些变量并展示给用户。例如:
return (
<div>
<div>{arr}</div>
</div>
)
img标签内的src={el.user.profile_image_url}会读取JavaScript的el.user.profile_image_url 变量,然后将该值作为 src 属性传递:
<img src={el.user.profile_image_url} alt="" />
响应事件
可以通过在组件中声明 事件处理 函数来响应事件,导入useState可以把数据变成响应式数据:
import {useState} from 'react'
export default function Box4() {
let [arr, setarr] = useState(123)
let setmsg = () => {
let num=arr+1
console.log("修改", num);
setarr(num)
}
return (
<div>
<button onClick={setmsg}>修改</button><br />
<b>{arr}</b>
</div>
)
}
条件渲染
在 React 中,没有特殊的语法来编写条件。因此,需要使用与编写常规 JavaScript 代码时相同的技术。例如:三目运算:
let flag = false;
let b1 = <i>666</i>
return (
<div>
<div>{flag ? "react1" : "react2"}</div>
</div>
)
除此之外,你还可以自己编写判断条件:
<div>{flag || "666"}</div>
<div>{flag && b1}</div>
渲染列表
在 React 中,没有特殊的语法来编写条件。因此,需要使用与编写常规 JavaScript 代码时相同的技术。例如 for
循环 和 array 的 map()
函数 来渲染组件列表。
render() {
let arr = ["scss", "css", "ts", "js", "html"]
let arr1 = []
let arr2 = []
arr2 = arr.map(el => <span key={el}>{el}</span>)
for (let i = 0; i < arr.length; i++) {
arr1.push(<div key={i}>{arr[i]}</div>)
}
return (
<div>
<div>{arr}</div>
<div>{arr1}</div>
<div>{arr2}</div>
</div>
)
}