React 基础案例

React的特点:

1、声明式编程

2、组件化开发

3、多平台适配yuan

原生实现:

    <h2 class="title"></h2><button class="btn">改变文本</button><script>let msg = "Hello World";const titleEl = document.querySelector(".title");titleEl.innerHTML = msg;const btnEl = document.querySelector(".btn");btnEl.addEventListener("click", (e) => {msg = "Hello React";titleEl.innerHTML = msg;});</script>

React实现:

React开发必须依赖三个库

1、react:包含react所必须的核心代码

2、react-dom:react渲染在不同平台所需要的核心代码

3、babel:将jsx转换成React代码的工具

(1)引入依赖

1、直接CDN引入

2、下载后,添加本地依赖

3、npm管理(脚手架使用)

  <body><!-- 添加React依赖 crossorigin属性作用将js脚本的一些错误显示出来 --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app">app</div><!-- 使用jsx ,并且希望script中的jsx代码被解析,必须在script标签中添加一个属性--><!-- jsx特点:多个标签最外层只能有一个根标签 --><script type="text/babel">let msg = "Hello World";function btnClick() {msg = "Hello React";render();}// 渲染的内容,挂载的对象function render() {ReactDOM.render(<div><h2>{msg}</h2><button onClick={btnClick}>改变文本</button></div>,document.getElementById("app"));}render();</script></body>

代码组件化 

<body><!-- 添加React依赖 crossorigin属性作用将js脚本的一些错误显示出来 --><scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/react-dom.development.js"crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><div id="app">app</div><!-- 使用jsx ,并且希望script中的jsx代码被解析,必须在script标签中添加一个属性--><!-- jsx特点:多个标签最外层只能有一个根标签 --><script type="text/babel">// 封装App组件 想让app是个组件必须先继承class App extends React.Component {// 构造器定义属性constructor() {super(); // 初始化父类实例,才可以使用this// 当数据变化引起页面的变化,不能直接定义在对象里面,必须写在state对象里面this.state = {msg: "Hello World",};}render() {return (<div><h2>{this.state.msg}</h2><button onClick={this.btnClick.bind(this)}>改变文本</button></div>);}btnClick() {//直接修改页面不会发生变化 this.state.msg = "Hello React";// 必须通过一个函数执行 数据更新操作render函数this.setState({msg: "Hello React",});}}ReactDOM.render(<App />, document.getElementById("app"));</script></body>

(2)使用脚手架

原生使用的是命令式编程,react使用的是声明式编程

命令式编程:每做一个操作,都是计算机(浏览器)一步步命令

声明式编程:表明想要做什么,应该做什么,但是不指定具体怎么做

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

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

相关文章

P6397 [COI2008] GLASNICI

题目描述 一条直线上有 &#x1d45b; 个信使&#xff0c;将他们按照从左至右的顺序以 1 至 &#x1d45b; 编号。换句话说&#xff0c;设 &#x1d456; 号信使的的坐标为 &#x1d451;&#x1d456;​&#xff0c;则对于 1≤&#x1d456;<&#x1d45b;&#xff0c; &am…

TCP协议建立连接的过程及其意义

目录 三次握手 四次挥手 三次握手的意义 在客户端与服务器传输数据之前&#xff0c;要在两台主机之间先建立连接&#xff0c;然后再传输业务数据。三次握手&#xff0c;就是建立连接的过程&#xff0c;是在传输业务之前&#xff0c;就要先进行。握手好了&#xff0c;才能进行…

【新手入门】Github与Git使用教程

Github与Git 一、Github基础教程 1.1 基本操作 点击代码文件可以直接查看文件的内容&#xff0c;支持在线修改文件&#xff0c;只需要点击(文件内容)右上角的编辑按钮即可进行编辑。 README.md一般介绍项目的功能&#xff0c;用法&#xff0c;注意事项&#xff1b;有时还有…

LeetCode //C - 93. Restore IP Addresses

93. Restore IP Addresses A valid IP address consists of exactly four integers separated by single dots. Each integer is between 0 and 255 (inclusive) and cannot have leading zeros. For example, “0.1.2.201” and “192.168.1.1” are valid IP addresses, bu…

虚拟机有线已连接但无法上网—·可能性之一

背景 VMware虚拟机&#xff0c;搭建了三台Linux服务器&#xff0c;组成Hadoop集群&#xff0c;由于在Hadoop102上有一些经常与Mysql数据库交互的任务&#xff0c;需要经常打开运行&#xff0c;而Hadoop103和104则经常处于关闭状态&#xff0c;一段时间后再次启动集群时候&…

ES6 笔记03

01 回调地狱 回调地狱: 回调函数嵌套回调函数 嵌套过深导致维护不方便 02 promise语法的基本使用 promise语法的基本使用: 1.new Promise 对象 并接收新对象 2.在构造函数里面传入回调函数 3.回调函数里面有两个形参: resolve reject resolve 表示积极状态 reject 表示消极状…

Springboot整合 Spring Cloud Gateway

1.Gateway介绍 1.是spring cloud官方推出的响应式的API网关框架&#xff0c;旨在为微服务架构提供一种简单有效的API路由的管理方式&#xff0c;并基于Filter的方式提供网关的基本功能&#xff0c;例如&#xff1a;安全认证&#xff0c;监控&#xff0c;限流等等。 2.功能特征…

【逆天OP懒狗的JAVA自学笔记--5.判断和循环】第二阶段始篇

文章目录 前言一、流程控制语句1.顺序结构&#xff08;最简单&#xff09;2.分支结构2.1 if 语句2.1.1 if语句的三种格式2.1.2 if 的注意事项 2.2 switch 语句2.2.1switch 的扩展知识 3.循环结构3.1 for 循环 扩展小点&#xff1a;//1.求和的变量不能定义在循环的里面&#xff…

php全局变量

PHP 全局变量 PHP中预定义了几个超级全局变量&#xff08;superglobals&#xff09; &#xff0c;这意味着它们在一个脚本的全部作用域中都可用。 你不需要特别说明&#xff0c;就可以在函数及类中使用。 PHP 超级全局变量列表: $GLOBALS$_SERVER$_REQUEST$_POST$_GET$_FILE…

解决finalshell无法连接,一直提示登陆密码

问题描述 在使用FinalShell连接配置虚拟机时&#xff0c;无法正常连接&#xff0c;一直提示输入登录密码&#xff0c;即使输入的密码是正确的。 切换到root 模式,输入密码 su root 此时需要输入root账户的密码&#xff0c;但是我们又不知道root的密码&#xff0c;怎么办&…

嵌入式STM32中I2C控制器外设详解

STM32中的I2C外设主要负责IIC协议与外界进行通信,就像USART外设一样,我们在学习的过程中,需要抓住I2C应用的重点。 STM32在使用I2C协议时,可以通过两种方式, 一是软件模拟协议 意思是使用CPU直接控制通讯引脚的电平,产生出符合通讯协议标准的逻辑。例如,像点亮LED那样…

大数据模型的选择与安装

大数据模型的选择和安装是一个复杂的过程&#xff0c;涉及多个因素&#xff0c;包括模型的通用能力、特定任务的性能、数据效率、评估完整性、成本以及部署的硬件和软件环境。以下是一些关于大数据模型选择与安装的考虑因素和步骤&#xff1a; 选择大数据模型的考虑因素&#…

VUE基础之scoped和TodList

目录 scoped样式 总结TodoList案例 scoped样式 作用&#xff1a;让样式在局部生效&#xff0c;防止冲突。 写法&#xff1a;<style scoped> <style scoped> .demo{background-color: pink; } </style> 注&#xff1a;如果在APP.vue中写style代码则是所有组…

绝地求生:经典艾伦格即将回归!绝地求生艾伦格进化史

29.2版本经典艾伦格地图将会回归&#xff0c;让我回顾一下艾伦格地图的改动历史吧&#xff01; 回归时间 2016年早期A测 A测 4.1版本&#xff1a;艾伦格-新视界 主要区域变动 Military Base(军事基地) Military Base Mylta Power&#xff08;大电&#xff09; Mylta Power …

微信小程序开发题库

一. 单选题&#xff08;共12题&#xff0c;60分&#xff09; 1. (单选题) 有如下HTML代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Document</title> <style> ul,li{ margin:0; p…

Vue组件化开发

Vue.js 的组件化开发是 Vue 的核心特性之一&#xff0c;它允许你将复杂的 UI 拆分成更小的、可重用的部分&#xff0c;即组件。每个组件都包含了自己的模板、逻辑和样式&#xff0c;可以独立开发和测试&#xff0c;然后与其他组件组合起来形成完整的应用程序。 以下是 Vue 组件…

【计算机网络】数据链路层 组帧 习题4

组帧 发送方根据一定的规则将网络层递交的分组封装成帧(也称为组帧)。 组帧时&#xff0c;既要加首部&#xff0c;也要加尾部&#xff0c;原因是&#xff0c;在网络信息中&#xff0c;帧是以最小单位传输的。所以接收方要正确地接收帧&#xff0c;就必须清楚该帧在一串比特串中…

SQLite 创建数据库

语法 sqlite3 命令的基本语法如下&#xff1a; $sqlite3 DatabaseName.db 通常情况下&#xff0c;数据库名称在 RDBMS 内应该是唯一的。 实例 如果您想创建一个新的数据库 <testDB.db>&#xff0c;SQLITE3 语句如下所示&#xff1a; $sqlite3 testDB.db SQLite ver…

EasyExcel 中实体类的注解@ExcelProperty

ExcelProperty(value "职务", index 0) value 与index 的优先级, 实测得出下面结论. 1、只有value : 按照value 的匹配 2、只有index: 按照index 的匹配 3、 同时有value和index: 按照index的匹配. 结果: 按照index的匹配, 找到的数据 {"administrat…

大模型管理工具:SWIFT

目录 一、SWIFT 介绍 二、SWIFT 安装 2.0 配置环境(可选) 2.1 使用pip进行安装 2.2 源代码安装 2.3 启动 WEB-UI 三、部署模型 3.0 deploy命令参数 3.1 原始模型 3.2 微调后模型 一、SWIFT 介绍 SWIFT&#xff08;Scalable lightWeight Infrastructure for Fine-Tuni…