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…

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

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

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

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

02多线程基础知识

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

brainpy 动力学编程基础

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

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

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

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

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

从本地到云端: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 右边的…

Apache DolphinScheduler + OceanBase,搭建分布式大数据调度平台的实践

本文整理自白鲸开源联合创始人&#xff0c;Apache DolphinScheduler PMC Chair&#xff0c;Apache Foundation Member 代立冬的演讲。主要介绍了DolphinScheduler及其架构、DolphinScheduler与OceanBase 的联合大数据方案。 DolphinScheduler是什么&#xff1f; Apache Dolph…

快速上手vue3+js+Node.js

安装Navicat Premium Navicat Premium 创建一个空的文件夹&#xff08;用于配置node&#xff09; 生成pakeage.json文件 npm init -y 操作mysql npm i mysql2.18.1 安装express搭建web服务器 npm i express4.17.1安装cors解决跨域问题 npm i cors2.8.5创建app.js con…

Mac上的免费压缩软件-FastZip使用体验实测

FastZip是Mac上的一款免费的压缩软件&#xff0c;分享一下我在日常使用中的体验 压缩格式支持7Z、Zip&#xff0c;解压支持7Z、ZIP、RAR、TAR、GZIP、BZIP2、XZ、LZIP、ACE、ISO、CAB、PAX、JAR、AR、CPIO等所有常见格式的解压 体验使用下来能满足我所有的压缩与解压的需求&a…

深度学习(十):伦理与社会影响的深度剖析(10/10)

深度学习&#xff1a;伦理与社会影响的深度剖析 一、深度学习的伦理挑战 &#xff08;一&#xff09;数据隐私之忧 深度学习模型的训练往往需要大量数据&#xff0c;而数据的收集过程可能会侵犯个人隐私。例如&#xff0c;据统计&#xff0c;面部识别技术在全球范围内每天会收…

【ubuntu18.04】使用U盘制作ubuntu18.04启动盘操作说明

打开show application 打开Startup Disk 选择镜像 双击选择ubuntu的iso镜像 镜像下载地址 Ubuntu 18.04.6 LTS (Bionic Beaver) 制作镜像 注意&#xff1a; 制作镜像会格式化U盘&#xff0c;记得备份资料 点击Make Startup Disk,弹出如下对话框 点击Yes 输入管理员密码&a…

Mysql基础 01 数据与sql

文章目录 一、基本概念二、mysql的常用命令三、sql规范四、数据类型五、SQL语句 一、基本概念 数据库(database,DB)&#xff1a;存储数据的仓库。 数据库管理系统软件(Database Management System,DBMS)&#xff1a;是一种操作和管理数据库的大型软件。常见的DBMS有oracle、s…

Remix部署智能合约时报错:Gas estimation failed

1、在Remix部署智能合约时报错如下&#xff1a; 2、这时候即使发送交易&#xff0c;也无法部署 3、后来看到有人建议说调整一下GAS LIMIT&#xff0c;调整到30000000也不行&#xff0c;甚至当调整到6000000以后连交易记录都没有了 4、最终解决办法&#xff1a;Remix 和 Ganache…

随机采样之接受拒绝采样

之前提到的逆变换采样&#xff08;Inverse Transform Sampling&#xff09;是一种生成随机样本的方法&#xff0c;它利用累积分布函数&#xff08;CDF&#xff09;的逆函数来生成具有特定分布的随机变量。以下是逆变换采样的缺点&#xff1a; 计算复杂性&#xff1a;对于某些分…

用 Python 爬取淘宝商品价格信息时需要注意什么?

用 Python 爬取淘宝商品价格信息时&#xff0c;需要注意以下方面&#xff1a; 一、法律和道德规范&#xff1a; 遵守法律法规&#xff1a;网络爬虫的行为应在法律允许的范围内进行。未经淘宝平台授权&#xff0c;大规模地爬取其商品价格信息并用于商业盈利等不当用途是违法的…

免费数据集网站

1、DataSearch https://datasetsearch.research.google.comhttp://DataSearch 2、FindData findata-科学数据搜索引擎https://www.findata.cn/ 3、Kaggle Kaggle: Your Machine Learning and Data Science CommunityKaggle is the world’s largest data science community …