React 入门课程 - 使用CDN编程React

1. 第一个React

注意:在vscode里,使用Live Server来运行html文件。
index.html

<html><head><link rel="stylesheet" href="index.css"><script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script></head><body><div id="root"></div><script src="index.js" type="text/babel"></script></body>
</html>

通过内容分发网络(CDN)可以引入React和ReactDOM库,这样可以直接在网页中使用这两个库,而不需要下载和本地存储。

  • React 是一个用于构建用户界面的JavaScript库,主要负责视图层的逻辑和组件的构建。
  • ReactDOM 是一个帮助将React组件渲染到实际DOM节点的库,负责将React的虚拟DOM映射到网页的实际DOM上。
  • crossorigin 属性的使用是为了控制在跨域请求(即从一个域访问另一个域的资源)时如何共享资源。这在从CDN加载React或其他库时尤为重要。
  • 引入一个可以在浏览器中直接使用的 Babel 版本。通常,Babel 是在构建过程中(如使用 Webpack)运行的,但 Babel Standalone 允许在不设置构建工具的情况下直接在浏览器中转换 JavaScript 代码。这在快速测试和开发原型时非常有用。
  • Babel Standalone 可以将 ES6+ 或 JSX 代码转换为旧版 JavaScript,直接在浏览器中运行。

index.js

ReactDOM.render(<p>Hi, my name is Bob!</p>, document.getElementById("root"))
  • 将React组件渲染到页面的目标位置。通过在HTML中为React组件准备好一个空的<div>容器,然后在JavaScript代码中使用ReactDOM.render方法将组件插入该容器中。

index.css

html, body {margin: 0;padding: 0;
}

在这里插入图片描述

2. React is composable

index.html, index.css不用更改,修改index.js

function MainContent() {return <h1>I am learning React!</h1>
}ReactDOM.render(<div><MainContent /></div>, document.getElementById('root'))

在这里插入图片描述

3. JSX

更新index.js

const navbar = (<nav><h1>Bob's Bistro</h1><ul><li>Menu</li><li>About</li><li>Contact</li></ul></nav>
)ReactDOM.render(navbar, document.getElementById("root"))

在这里插入图片描述

4. 完成后的project可以部署到netlify上。

5. 添加图片

在这里插入图片描述
index.js

const page = (<div><img src="./react-logo.png" width="40px" /><h1>Fun facts about React</h1><ul><li>Was first released in 2013</li><li>Was originally created by Jordan Walke</li><li>Has well over 100K stars on GitHub</li><li>Is maintained by Facebook</li><li>Powers thousands of enterprise apps, including mobile apps</li></ul></div>
)ReactDOM.render(page, document.getElementById("root"))

6. Custom Components

index.js

function Page() {return (<ol><li>It's a popular library, so I'll be able to fit in with the cool kids!</li><li>I'm more likely to get a job as a developerif I know React.</li></ol>)
}ReactDOM.render(<Page />, document.getElementById("root"))
function Page() {return (<div><header><nav><img src="./react-logo.png" width="40px" /></nav></header><h1>Reasons I'm excited to learn React</h1><ol><li>It's a popular library, so I'll be able to fit in with the cool kids!</li><li>I'm more likely to get a job as a developerif I know React</li></ol><footer><small>© 2021 Ziroll development. All rights reserved.</small></footer></div>)
}ReactDOM.render(<Page />, document.getElementById("root"))

7. Parent/ Child Components

function Header() {return (<header><nav><img src="./react-logo.png" width="40px" /></nav></header>)
}function Footer() {return (<footer><small>© 2021 Ziroll development. All rights reserved.</small></footer>)
}function MainContent() {return (<div><h1>Reasons I'm excited to learn React</h1><ol><li>It's a popular library, so I'll be able to fit in with the cool kids!</li><li>I'm more likely to get a job as a developerif I know React</li></ol></div>)
}function Page() {return (<div><Header /><MainContent /><Footer /></div>)
}ReactDOM.render(<Page />, document.getElementById("root"))

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

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

相关文章

23isctf

where_is_the_flag 1.打开环境&#xff0c;上面有一句话木马&#xff0c;直接蚁剑上 flag1&#xff1a;蚁剑连接上就可以直接看见&#xff0c;FLAG1:Yunxi{d0c0 flag2:在根目录下就有 797a-4697- flag3&#xff1a; 在主页面有一个start.sh里面有提示信息 4dfe-9b48-50ff…

MySQL 【流程控制】函数

目录 1、CASE 语句用于流程控制中的多分支情况。 2、IF() 函数根据测试条件是否为真分别返回指定的值。 3、IFNULL() 函数&#xff0c;如果第一个参数为 NULL&#xff0c;返回第二个参数&#xff0c;否则返回第一个参数。 4、NULLIF() 函数根据两个参数是否相等决定返回 NUL…

【Rust中多线程同步机制】

Rust中多线程同步机制 多线程编程Rust中的多线程编程thread::spawnmove Rust中的线程间同步机制Rust线程间同步机制之MutexRust线程间同步机制之读写锁Rust线程同步机制之条件变量Rust中的信号量Rust中的Atomic Rust中线程间的数据传递总结 多线程编程 多线程编程&#xff0c;…

传统RAG流程;密集检索器,稀疏检索器:中文的M3E

目录 传统RAG流程 相似性搜索中:神经网络的密集检索器,稀疏检索器 密集检索器 BGE系列模型 text-embedding-ada-002模型 M3E模型 稀疏检索器 示例一:基于TF-IDF的稀疏检索器 示例二:基于BM25的稀疏检索器 稀疏检索器的特点与优势 传统RAG流程 相似性搜索中:神经…

黑马程序员linux学习【持续更新】

Linux基础 一、Linux简介 1.分类 不同领域的主流操作系统&#xff0c;主要分为下 几类&#xff1a;桌面操作系统、服务器操作系统、移动设备操作系统、嵌入式操作系统。 桌面操作系统 操作系统特点Windows用户数量最多MacOS操作体验好&#xff0c;办公人士首选Linux用户数…

2024强网杯Proxy

代码审计 首先分析go语言代码 package mainimport ("bytes""io""net/http""os/exec""github.com/gin-gonic/gin" )type ProxyRequest struct {URL string json:"url" binding:"req…

02多线程基础知识

目录 1. 线程与进程 进程&#xff08;Process&#xff09; 线程&#xff08;Thread&#xff09; 2. 并发和并行 并发&#xff08;Concurrency&#xff09; 并行&#xff08;Parallelism&#xff09; 3. CPU 调度 定义 类型 调度算法 上下文切换 4.线程间的状态流转…

Spring常用过滤器(Filter)-AuthorizationFilter

AuthorizationFilter&#xff1a;授权过滤器&#xff0c;用于执行访问控制决策。 1.1 定义与作用&#xff1a; 1.1.1 定义&#xff1a;AuthorizationFilter是ASP.NET MVC中用于安全性检查的过滤器&#xff0c;它通过实现IAuthorizationFilter接口来定义。该接口提供了一个OnAu…

java中函数式接口

函数式接口 supplier提供者 无中生有 () -> 结果 function 函数 一个参数一个结果 (参数) -> 结果 两个参数一个结果的 BiFunction (参数1,参数2) -> 结果 consumer 消费者 一个参数没有结果 (参数) -> void 两个参数的 BiConsumer (参数1,参数2) -…

np.clip函数

np.clip 是 NumPy 中的一个函数&#xff0c;用于将数组中的元素限制在指定的范围内&#xff08;即对数组的值进行截断&#xff09;。超出范围的值会被替换为指定的上下限值。 函数语法 numpy.clip(a, a_min, a_max, outNone, *, whereTrue)参数说明 a&#xff1a; 输入的数组&…

brainpy 动力学编程基础

文章参考&#xff1a; 《神经计算建模实战——基于brainpy》 吴思 【brainpy学习笔记】基础知识2(动力学模型的编程基础)-CSDN博客 Brainpy手册 文章目录 积分器&#xff1a;定义ODE函数数值积分方法 更新函数和动力系统计算介绍什么是brainpy.DynamicalSystem&#xff1f;如…

macos中安装和设置ninja

1、在安装ninja的过程中需要先安装re2c(github地址&#xff1a;https://github.com/skvadrik/re2c): git clone https://github.com/skvadrik/re2c.git&#xff08;也可直接下载最新的release压缩包&#xff0c;并解压。下载地址&#xff1a;https://github.com/skvadrik/re2c…

Go 项目中实现类似 Java Shiro 的权限控制中间件?

序言&#xff1a; 要在 Go 项目中实现类似 Java Shiro 的权限控制中间件&#xff0c;我们可以分为几个步骤来实现用户的菜单访问权限和操作权限控制。以下是一个基本的实现框架步骤&#xff1a; 目录 一、数据库设计 二、中间件实现 三、使用中间件 四、用户权限管理 五…

数据结构之二叉树--前序,中序,后序详解(含源码)

二叉树 二叉树不能轻易用断言&#xff0c;因为树一定有空 二叉树链式结构的实现 在学习二叉树的基本操作前&#xff0c;需先要创建一棵二叉树&#xff0c;然后才能学习其相关的基本操作。 typedef int BTDataType; typedef struct BinaryTreeNode {BTDataType _data;struct B…

市场营销应该怎么学?

别一听市场营销就觉得是那些大公司玩的高深莫测的游戏&#xff0c;其实它就在你我身边&#xff0c;无处不在&#xff0c;影响着咱们生活的方方面面。 记得去年双十一&#xff0c;你是不是被各种优惠券、预售、秒杀整得头晕眼花&#xff0c;最后还是忍不住剁了手&#xff1f; …

【NativeUI下的data table备注信息的快捷输入-会议签到补充】

NativeUI下的data table备注信息的快捷输入-会议签到补充 概述结构本文任务子组件在列中定制显示父组件的备注补充父组件的便捷输入按钮父组件快捷按钮给子组件的备注用最后固定在底部 概述 本文讲述Vue3的数据和函数在父组件,子组件的交互,以NativeUI的datatable为载体,实现签…

一七五、HTML 不同类型的事件及其说明和示例

HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。 Window 事件 1. onresize 当浏览器窗口的大小发生变化时触发。 <!DOCTYPE html> <html lang"en"> <head><m…

从本地到云端:Linux上快速搭建Cloudreve云盘并实现远程管理

文章目录 前言1. 安装Docker2. 使用Docker拉取镜像3. 创建并启动Cloudreve容器4. 本地访问测试5. 公网远程访问本地Cloudreve5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 前言 大家好&#xff01;今天我们要聊聊如何在Linux系统上&#xff0c;…

如何简化App Store提现?——作为游戏开发者的跨境收款体验分享

目录 如何简化App Store提现&#xff1f;——作为游戏开发者的跨境收款体验分享跨境收款常见的几个问题使用万里汇收款后的体验1. 结算流程简单&#xff0c;到账更快2. 多场景收付更灵活3. 多种支付方式支持 使用后的效果&#xff1a;资金管理更高效个人建议 如何简化App Store…

JavaScript void 运算符

void定义&#xff1a; void 运算符对给定的表达式进行求值&#xff0c;然后返回undefined。void是一个一元运算符&#xff0c;接受单个操作数&#xff0c;可以是任何类型&#xff0c;返回一个 undefined。 void语法&#xff1a; void 在表达式的左边&#xff0c;void 右边的…