React全家桶day01

最新推荐文章于 2024-05-23 17:56:57 发布
最新推荐文章于 2024-05-23 17:56:57 发布
阅读量94 收藏
点赞数
分类专栏： 笔记 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55411822/article/details/121028786
版权

React全家桶day01

  • React:用于构建用户界面的JavaScript库(是一个将数据渲染为HTML视图的开源JAvaScipt库)
    1、发送请求获取数据
    2、处理数据（过滤、整理格式等）
  • React特点：
    1、采用组件化模式、声明式编码，提高开发效率级组件复用率
    2、在React Native中可以使用React语法进行移动端开发。
    3、使用虚拟DOM+优秀的Diffng算法，尽量减少与真实DOM的交互。
  • React高效的原因
    1、使用虚拟DOM不总式直接操作页面真实DOM
    2、DOM Diffing算法，最小化页面重绘
  • 小练习
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
	const VDOM=<h1>Hello</h1>
	ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

</html>

注意事项：
1、先导入准备容器。
2、引入React核心库
3、引入react-Dom，用于支持React操作Dom
4、引入Babel，用于将JSX转为JS （注意：顺序不能乱）
5、ReactDOM:DOM必须是大写

Jsx语法规则：
1、定义虚拟DOM时，不要写引号
2、标签中混入JS表达式时要用{}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
    <style>
        .title {
            background-color: coral;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const Myid="LMF"
        const MyData="Hello.React"

        // 创建虚拟DOM
        const VDOM=<h1 id={Myid}>
            <span>{MyData}</span></h1>
    // 渲染虚拟DOM
	ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

</html>

3、样式的类名指定不要用Class,要用ClassName

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
    <style>
        .title {
            background-color: coral;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 创建虚拟DOM
        const VDOM=<h1 className="title" id="Lmf">
            <span>Hello_React</span>
                </h1>
    // 渲染虚拟DOM
	ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

</html>

4、内联样式，要用style={key:value}的形式去写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
    <style>
        .title {
            background-color: coral;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const Myid="LMF"
        const MyData="Hello.React"

        // 创建虚拟DOM
        const VDOM=<h1 className='title' id={Myid}>
            <span style={{color:'white',fonSize:'29px'}}>{MyData}</span></h1>
    // 渲染虚拟DOM
	ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

5、只有一个跟标签，标签必须闭合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
    <style>
        .title {
            background-color: coral;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const Myid="LMF"
        const MyData="Hello.React"

        // 创建虚拟DOM
        const VDOM=
        <div>
            <h1 className='title' id={Myid}>
                <span style={{color:'white',fonSize:'29px'}}>
                    {MyData}
                </span>
            </h1>
             <h1 className='title' id={Myid}>
                 <span style={{color:'white',fonSize:'29px'}}>
                     {MyData}
                 </span>
             </h1>
        </div>
    // 渲染虚拟DOM
	ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

</html>

7、 标签手写字母
1）、若小写字母开头，则将改为html中同名元素，若HTML中没有该标签的同名元素，则报错。
2）、若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

  • Js语句和Js表达式的区别：

    1 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
    2语句：可以改变代码走向的都是语句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
    <style>
        .title {
            background-color: coral;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const data=['Antd','React','vue']


        // 创建虚拟DOM
        const VDOM=
        <div>
        <h1>react</h1>
            <ul>
            {data.map((item,index)=>{
                return <li key={index}>{item}</li>
            })}</ul>
            </div>
    // 渲染虚拟DOM
	ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

</html>

重点：
1 模块化
1）、理解：向外提供特定功能的js程序，一般就是一个Js文件。
2）、为什么要拆成模块：随着业务漏极增加，代码越来越多且复杂。
3）、作用：复用Js，嘉华Js的编写，提高Js运行效率。
2 组件
1）、理解：用来实现局部功能效果的代码和资源的集合（HTML/CSS/image等等）
2）、为什么：一个界面的功能更复杂。
3）、作用：复用编码，简化项目编码，提高运行效率。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello_React</title>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-Dom，用于支持React操作Dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入Babel，用于将JSX转为JS -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        function Demo(){
            return <h1>我的第一个函数式组件</h1>
        }
	ReactDOM.render(<Demo/>,document.getElementById('test'))
    /*
    执行了ReactDOM.render( <Demo />。。。。。之后，发生了什么？
    1、React解析组件标签，找到Demo组件。
    2、发现组件时使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实的DOM,随后渲染在页面上。
    注意：
    1、首字母必须大写
    2、必须有返回值
    3、必须写组件标签，不要写组件的名字
    */
	</script>
</body>

</html>
陈凯哥哥。。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三天学习vue和react的对比-day2
ef_ef的博客
03-13 170
写得真鸡儿乱 第二天内容 全家桶解决方案PK：umi 和 vue-cli 跨端框架 uni-app PK Taro 下一代前端构建工具 Vite Vue 和 React 选型指南 框架的设计思路的pk应该从以下几个维度来pk 偏向于 原生js 还是 抽象 偏向于 template 还是 jsx 偏向于 compiler 还是 runtime （svelte和angular偏向纯纯的compiler） 偏向于 immutable 还是 mutable（如React每次都要重新生成一份新的数据，就属于im
react全家桶资料.zip
08-13
react学习资料，适合小白自学
React的基础知识
sjsja的博客
04-05 1324
React的基础知识 基本使用 react需要依赖react和react-dom这两个包 安装:npm install react react-dom@版本号 1.创建React元素 ...参数 1.元素名称 2.元素属性 3.元素的子节点 React.createElement('h1',null,子节点) 2.渲染React元素到页面中（web应用） ...参数 1.要渲染的react元素 2.挂载点 ReactDOM.render(react元素，在
react知识点
qq_54954970的博客
07-29 225
react基础知识点
React全家桶day02
weixin_55411822的博客
11-02 84
类组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello_React</title> </head> <body> <!-- 准备容器 --> <div id="test"></div> <!-- 引入React核心库 --&
React全家桶学习之ES6之Day2:变量的解构赋值
yangchunshang的博客
12-07 1663
1、数组的解构赋值 基本用法  ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。   代码： var[a,b,c] = [1,2,3]; 以上代码表示，可以从数组中提取值，按照对应位置，对变量赋值。这被称为“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果结构不成功，变量的值就等于undefined. 如：var [foo] = [ ]
React-day1
taosy122的博客
11-10 160
react知识铺垫
快来跟我一起学 React（Day6）
vv_bug
03-25 234
简介 我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到异步组件、全局上下文对象、错误边界组件等概念的分析，比前面章节的难度还是略微大一些的，所以一定要跟上节奏哦，我们一起出发吧！ 知识点 代码分割 异步组件 全局上下文对象 Context 错误边界组件 准备 我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执行
快来跟我一起学 React（Day8）
vv_bug
04-02 2427
简介 我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到性能优化、Portals、Render Props 等概念的分析，跟上节奏，我们一起出发吧！ 知识点 性能优化 Portals Render Props 类型检查 准备 我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执行以下命令 clone 一份代码： g
HTML笔记——day01
G-Y的博客
04-14 297
html概念 html基本标签使用
React全家桶PDF讲解
11-01
React全家桶 前端从业者 使用React框架 学习React者 学习过Vue框架
react全家桶笔记整理
05-04
react全家桶笔记整理
react-react全家桶框架
08-15
从零搭建react-family框架教程
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1085
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
React 中的响应时间详解
最新发布
阿乐的博客
05-23 1031
使用 React 可以在 JSX 中添加。其中事件处理函数为自定义函数，它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。
react之refs与dom
weixin_73918953的博客
05-22 947
ref是一种脱围机制，用于保留不用于渲染的值。ref是一个普通的JavaScript对象，具有一个名为 current的属性，你可以对其进行读取或设置你可以通过调用useRef Hook 来让react给你一个ref与state一样，ref允许你在组件的重新渲染之间保留信息与state不同，设置ref的current值不会触发重新渲染不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测Refs是一种通用概念，但大多数情况下你会使用它们来保存DOM元素你通过传递。
react高级用法
kuangjianming的博客
05-23 283
ref 一般可以标识在 hostComponent 宿主元素(首字母小写的，最终会变成基础HTML元素的)；ref 本身是不能跨层级捕获和传递的，forwardRef 可以接收父元素的ref信息，转发下去。类似 Vue 中的 inject 和 provider。对应过来就是 consumer 和 provider。我们可以通过forwardRef 进行转发。useMemo 的实现。
React 其他 Hooks
m0_74989367的博客
05-23 701
可用于获取 DOM 元素。
尚硅谷react全家桶 源代码
10-15
尚硅谷react全家桶的源代码是指由尚硅谷团队开发的一套基于React技术栈的项目代码。 该源代码包括了React框架及其所依赖的相关库，如React Router、Redux、Ant Design等，可用于开发Web应用程序。 尚硅谷react全家桶...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值