react入门

目录

        安装

        创建和嵌套组件

标签使用规则

添加样式

显示数据

响应事件

条件渲染 

渲染列表

---

安装

使用过的的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>

        )

    }