初始React_代码007

本文介绍: create–react–app是一个快速创建Re ac t 开发1环境的工具，底层由We b p ack 构建，封装了配置细节，开箱即用。2.c re a t–react–app 核心包（固定写法），用于创建Re ac t 项目。– 使用 create–re ac t–app 快速搭建开发环境。3.r e a c t–basic Re a c t 项目的名称（可以自定义）– Re a c t是一个用于构建 web和原生态交互界面的库。// index.js是项目的入口，从这里开始运行。// Re a c t必要的两个核心包。// 导入项目的根组件。

<!DOCTYPE html&g t;

<html>

<head>

</head>

<body>

了解Re act

<!– React是一个用于构建web和原生态交互界面的库

相对于传统DOM开发优势：组件化开发方式，还有不错的性能

相较于其他前端框架的优势：有丰富的生态和跨平台支持

–>

<!– 使用 create–react-ap p 快速搭建开发环境

create–react-ap p是一个快速创建React开发1环境的工具，底层由Web p ack构建，封装了配置细节，开箱即用

执行命令：

npx create–react-app react-basic

1.npx Node.js 工具命令，查找执行后续的包命令

2.creat-react-app 核心包（固定写法），用于创建React项目

3.react-basic React项目的名称（可以自定义）

在创建好的项目里可以看到 package.json 文件

里面的主要依赖是

“react”: “^18.2.0”,

“react-dom“: “^18.2.0”,

核心命令是：

“start“: “react-script s start“,

“build“: “react-script s build“,

刚开始学习建议先把src里的文件清理，只需保留app.js和index.js

–>

组件

<!–

概念：一个组件就是用户界面的一部分，它可以由自己的逻辑外观，组件之间可以相互嵌套，也可以复用多次

组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可（在App内）

// 1. 定义组件

const Button = () => {

// 业务逻辑组件逻辑

return <button>click me!</button>

}

// 箭头函数定义

function Button(){

return <button>click me!</button>

}

// 常规函数定义

function App() {

return (

{/* 2. 使用组件（渲染组件） */}

{/* 自闭和（单标签） */}

{/* 成对标签 */}

</div>

)

}

–>

useState基础使用

<!– useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

本质：和普通JS变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）

const [count,setCount] = useState(0)

// 数组接收useState

1.useState是一个函数，返回值是一个数组

2.数组中的第一个参数是状态变量，第二个参数是set 函数用来修改状态变量

3.useState的参数将作为count的初始值

// useState实现一个计数器按钮

import { useState } from ‘react’

//引入useState

// const是不能改变值，但现在是复杂数据类型，修改的是引入地址里面的值，不是修改了引入地址

function App () {

// 1. 调用useState添加一个状态变量

// count 状态变量

// setCount 修改状态变量的方法

const [count, setCount] = useState(0)

// 2. 点击事件回调

const handleClick = () => {

// 作用:

// 1. 用传入的新值修改 count

// 2. 重新使用新的count渲染UI

setCount(count + 1)

}

return (

<div>

<button onClick={handleClick}>{count}</button>

</div>

)

}

–>

useState修改规则

<!– 在React中，状态被认为是只读，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

function App () {

let [count, setCount] = useState(0)

const handleClick = () => {

// 直接修改无法引发视图更新

// count++

// console.log(count)

setCount(count + 1)

}

return (

<div>

<button onClick={handleClick}>{count}</button>

</di v>

)

–>

<!– 修改对象状态

规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改

const [form, setForm] = useState({ name: ‘jack’ })

const changeForm = () => {

// 错误写法：直接修改

// form.name = ‘john’

// 正确写法：setFrom 传入一个全新的对象（新值替换老值）

setForm({

…form,

// 展开原本有的字段

name: ‘john’

})

}

return (

<di v>

<button onClick={changeForm}>修改form{form.name}</button>

</di v>

)

–>

组件基础样式方案

<!–

1.行内样式（不推荐）

2.class类名控制

// 在js文件里导入样式（css）

import ‘./index.css‘

// 通过类名控制才需要导入

const style = {

color: ‘red‘,

fontSize: ’50px‘

}

function App () {

return (

<div>

{/* 行内样式控制 */}

{/* <span style={color: ‘red‘，fontSize: ’50px‘}>this is span</span> */}

{/* 这样写也行 */}

{/* 通过 class类名控制 */}

<span className=”foo“>this is class foo</span>

{/* className是规定好的名字，不能用class */}

</div>

)

}

–>

</body>

</html>

原文地址:https://blog.csdn.net/m0_59745705/art icle/details/134635236

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_14503.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章

发表回复 取消回复

发表回复取消回复