React基础入门

文章目录

    • 创建项目
    • 组件和事件
    • 更新状态
    • 导出组件
    • jsx

react是目前最流行的前端框架,几乎也不用太介绍了。

创建项目

首先下载node.js,安装成功后,最好换成国内的源

npm config set registry https://registry.npm.taobao.org

然后就可以使用脚手架创建一个项目了

npx create-react-app hello-world

然后进入新建的目录,就可以运行并体验这个项目了

>cd hello-world
>npm start

服务开启后,会自动在浏览器中弹出项目地址localhost:3000,就可以看到这个示例了。

打开项目文件,将App.js中的App函数改成下面这种最简单的形式

function App() {return (<p>微小冷</p>);
}

则网页内容变为

在这里插入图片描述

由此可知,App.js文件中,App函数的返回值,最终呈现在了网页中。但网页的标题以及图标显然不是我们自行设计的,说明React的逻辑是,把App的返回值嵌入到了某个网页之中。

在浏览器中按下F12,可以查看html代码,这个网页对应的html文件,实则是public文件夹下的index.html文件。将其删至最简

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>微小冷</title></head><body><noscript>这里可以放js语句</noscript><div id="root"></div></body>
</html>

这样网页标题也变成了微小冷。

组件和事件

React提供了一系列UI组件,这些组件都以大写字母开头,有了这些,就可以创建一个用户友好的应用程序。接下来在页面中添加一个按钮,首先创建一个按钮函数

function OneButton(){function handleClick(){alert("你好!")}return (<button onClick={handleClick}>微小冷</button>)
}

其中嵌套的handleClick就是按钮点击事件,其返回值则是一个携带了点击事件的按钮。然后更改一下主函数


function App(){return (<OneButton/>);  
}export default App;

效果如下

在这里插入图片描述

更新状态

当App返回一个按钮后,这个按钮的属性往往是已经确定了的,如果想更改按钮显示的内容,就需要引入useState。

import {useState} from 'react';

然后通过useState更新按钮组件

function OneButton(){const [count, setCount] = useState(0);function handleClick(){setCount(count + 1);}return (<button onClick={handleClick} style={{width:100, height:40, fontSize:20}}> 点了{count}</button>)
}

效果如下

在这里插入图片描述

导出组件

上述代码将按钮写在了App.js中,当代码量较少的时候当然没有问题,但随着组件越来越多,这种写法会让整个项目变得混乱起来,为此,可将组件写到单独的文件里。

App.js的同级目录下新建Btn.js,内容如下

import { useState } from 'react';export default function OneButton(){const [count, setCount] = useState(0);function handleClick(){setCount(count + 1);}return (<button onClick={handleClick} style={{width:100, height:40, fontSize:20}}>点了{count}</button>)
}

函数OneButton和在App.js中相比,多了一个export default的修饰,表示该函数可以导出给其他组件调用。

然后修改App.js的内容,在挪走了OneButton之后,还要通过import的方式将其导入进来,如下所示。由于这个改动并未引起功能上的变化,效果与上面相同。

import Btn from './Btn.js';function App(){return (<OneButton/>);  
}export default App;

jsx

jsx相当于把html装入了js,使得前后封闭的html标签可以嵌入js代码中,很多js库都支持这种扩展语法,react亦然。例如上面的OnButton函数便是典型的jsx语法,在return后面的括号里,出现了html特有的封闭尖括号。

这段代码体现出jsx中花括号的两个用法

  • 单花括号,可调用js中的变量
  • 双花括号,可用于设置css样式

由于要嵌入一门编程语言,所以jsx的语法要比html更加严格,主要体现在

  1. 每个组件只能返回一个根元素
  2. 标签必须闭合
  3. 命名避免与js发生冲突

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/170235.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI动画制作 StableDiffusion

1.brew -v 2.安装爬虫项目包所必需的python和git等系列系统支持部件 brew install cmake protobuf rust python3.10 git wget pod --version brew link --overwrite cocoapods 3.从github网站克隆stable-diffusion-webui爬虫项目包至本地 ssh-add /Users/haijunyan/.ssh/id_rs…

jQuery 第十一章(表单验证插件推荐)

文章目录 前言jValidateZebra FormjQuery.validValValidityValidForm BuilderForm ValidatorProgressionformvalidationjQuery Validation PluginjQuery Validation EnginejQuery ValidateValidarium后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&…

入门指南:介绍Python库——Pandas

个人网站 本文首发于公众号小肖学数据分析 Pandas是一个功能强大、灵活易用的Python数据处理库。 无论你是数据分析师、数据科学家还是Python初学者&#xff0c;掌握Pandas都将为你提供高效、便捷的数据处理和分析能力。 本文将为你详细介绍Pandas的基本概念、常用功能和使…

mysql 更改密码

由于两台设备的mysql数据库的密码不一样&#xff0c;开发时每次连接数据库都需要更改配置文件&#xff0c;所以想修改一下mysql数据库的密码。 mysql 修改密码千万不要直接修改&#xff0c;直接修改的话会出现两种情况&#xff1a; 1&#xff0c;修改成功&#xff0c;无法登录。…

为人基本操守

“Not all of us can do great things, but we can do small things with great love.” “我们此生中可能很难成就大事&#xff0c;但是我们可以在小事中成就大爱。” 希望同学们在今后的人生中&#xff0c;坚持走正道&#xff0c;做好人&#xff0c;关怀身边及远方的弱势人群…

jQuery_06 基本过滤器的使用

什么是过滤器&#xff1f; 过滤器就是用来筛选dom对象的&#xff0c;过滤器是和选择器一起使用的。在选择了dom对象后在进行过滤筛选。 jQuery对象中存储的dom对象顺序与页面标签声明有关系。 声明顺序就是dom中存放的顺序 1.基本过滤器 使用dom对象在数组中的位置来作为过滤条…

基于时隙的多重冗余流指纹模型

文章信息 论文题目&#xff1a;基于时隙的多重冗余流指纹模型 期刊&#xff08;会议&#xff09;&#xff1a;网络与信息安全学报 时间&#xff1a;2023 级别&#xff1a;CCF C 概述 为确保内生网络流量安全可信&#xff0c;本文在研究流水印及其扩展的流指纹机制的基础上&a…

小程序中的大道理之二--抽象与封装

继续扒 接着 上一篇 的叙述, 健壮性也有了, 现在是时候处理点实际的东西了, 但我们依然不会一步到底, 让我们来看看. 一而再地抽象(Abstraction Again) 让我们继续无视那些空格以及星号等细节, 我们看到什么呢? 我们只看到一整行的内容, 当传入 3 时就有 3 行, 传入 4 时就…

明道云伙伴成果与展望

摘要&#xff1a;这篇文章介绍了明道云在过去一年的成果以及未来的计划。明道云将把更多资源和精力投入到伙伴身上&#xff0c;提供更全面的支持&#xff0c;包括产品特性、展业支持和 GTM &#xff08;Go-To-Market&#xff09;支持三个方面。在产品特性方面&#xff0c;明道云…

算法基础之KMP算法

KMP算法 核心思想: 回退处理 和 next前缀数组 ne[N]前缀数组表示 模式串当前位置的最长相当前后缀 当一个字符不匹配时 可以回退到上一个前后缀相等的位置 再次开始匹配 不用再遍历一次 #include <iostream>using namespace std;const int N 100010, M 1000010;int…

【C++初阶】STL之学习string的用法

目录 前言&#xff1a;一、认识下string1.1 什么是string1.2 为什么要有string 二、string 类的接口使用2.1 初始化与析构2.1.1 初始化2.1.2 析构 2.2 容量操作2.2.1 长度大小——size和length2.2.2 空间总大小——capacity2.2.3 判空——empty2.2.4 清空——clear2.2.5 预留空…

学习视频剪辑方法:AI智剪助力,批量处理短视频无忧

随着短视频的兴起&#xff0c;越来越多的人开始关注如何有效地制作和发布这些内容。但是&#xff0c;短视频的制作并不容易&#xff0c;要耗费大量的时间和精力。现在有很多AI智能剪辑工具可以快速、高效地制作短视频。其中&#xff0c;AI智剪是一款非常受欢迎的视频剪辑功能&a…

原生javascript实现放大镜效果

效果图 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>放大镜</title><style&g…

图论|知识图谱——详解自下而上构建知识图谱全过程

导读&#xff1a;知识图谱的构建技术主要有自顶向下和自底向上两种。其中自顶向下构建是指借助百科类网站等结构化数据源&#xff0c;从高质量数据中提取本体和模式信息&#xff0c;加入到知识库里。而自底向上构建&#xff0c;则是借助一定的技术手段&#xff0c;从公开采集的…

【Python】Playwright模块进行自动化测试

playwright是由微软开发的Web UI自动化测试工具&#xff0c;支持Node.js、Python、C# 和 Java语言&#xff0c;本文将介绍Python版本的Playwright使用方法。 微软开源了一个非常强大的自动化项目叫playwright-python&#xff0c;项目地址&#xff1a;https://github.com/micros…

[图片来源BZhan]最小生成树(Prim➕Kruskal)、最短路径(Dijkstra➕Floyd)

文章目录 0.基础知识0.1图的存储结构0.2算法复杂度1.BFS和DFS2.Prim和Kruskal 1.最小生成树1.1Prim算法1.算法思想2.Prim代码实现 1.2Kruskal算法1.算法思想2.Kruskal代码实现[demo] 2.最短路径2.1问题抽象:2.2两种常见的最短路径问题:1.Dijkstra: 单源最短路径O(N^2)2.Floyd: …

⑥【bitmap 】Redis数据类型: bitmap [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Redis bitmap ⑥Redis bitmap 基本操作命令1. …

C语言每日一题(38)无重复字符的最长字串

力扣 3 无重复字符的最长字串 题目描述 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: 输入: s…

记录一些免费的 API接口

主要记录一些日常开发中可以使用到的一些免费api接口&#xff0c;目前包括 ip地址查询、天气查询 通过 IP 查询地址 ip-api (不支持 https) &#x1f4a1; api接口文档 &#x1f579; 调用接口 $ curl http://ip-api.com/json&#x1f4dd; 返回信息&#xff08;位置信息&…

easyx的基本使用<一>(万字解析)

easyx的基本使用 一.基本框架1.创建文件2.创建窗体-initgraph,closegraph,getchar 二.简单的绘制1.圆形-circle2.坐标系统-setorigin,setaspectratio 三.简单图形1.绘制点-putpixel2.简单的直线-line3.矩形-rectangle4.椭圆-ellipse5.圆角矩形-roundrect6.扇形-pie7.圆弧-arc 四…