React基础

最新推荐文章于 2024-06-24 09:48:27 发布
最新推荐文章于 2024-06-24 09:48:27 发布
阅读量101 收藏 1
点赞数 1
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/er2025166/article/details/119874554
版权 
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>HellowReact</title>
</head>

<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 注意这里的type类型一定要是 babel  */
        //模拟从后端传过来的数据
        const data = ['java','html','vue'];

        //1.创建虚拟DOM
        const VDOM = (
            <div>
                <h1 className="header" style={{fontSize:'15px'}}>HellowReact</h1>
                <h1>数组</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
        //2.渲染虚拟DOM到页面  两个参数虚拟DOM,指定加入到那个容器
        ReactDOM.render(VDOM, document.getElementById('text'))
        /*
        jsx规则
            1.根节点只能有一个
            2.class要写成className    
            3.定义虚拟DOM不要加引号
            4.内联要用style={{key:'value'}}
            5.标签必须闭合
            6.混入js表达式时要用{}
        
        */
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数式组件</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        function Dome(){
            return <h1>函数定义组件</h1>
        }
        ReactDOM.render(<Dome/>,document.getElementById('text'))
    </script>
    <!-- 
        注意事项
        1.这里的函数名开头要大写，小写他们直接翻译成html标签没有这个标签直接报错，大写会认为你的是模板
        2.一定要是闭合标签 <Dome/> 不然标红

     -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        //创建组件
        class Weather extends React.Component{
            state = {isHis:true}
            render(){
                const {isHis} = this.state
                return <h1 onClick={this.dome}>今天天气很{isHis ? '炎热' : '凉爽'}</h1>
            }
            //自定义方法 要用赋值语句的形式+箭头函数
            //因为写成普通方法this会成defined,箭头函数它本身没有对象他会找他的上级，就会找到 Weather 的实例化
            dome =()=>{
                //状态不能直接修改，必须要通过setState API进行修改
                this.setState({isHis:!this.state.isHis})
            }
        }
        //渲染组件到页面--
        ReactDOM.render(<Weather/>,document.getElementById('text'))
    </script>
</body>
</html>

er2025166
关注
React基础.pdf
06-17
### React基础知识点详解 #### 一、React简介与特点 **React**是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它通过一种创新的方法，实现了高效、灵活且可维护的UI开发流程。React的核心优势在于...
回顾Javascript React基础
10-16
## Javascript React基础回顾 ### 前言 在现代前端开发中，React已经成为了一种不可忽视的技术。它不仅仅是一个库，更是一个能够通过组件化的方式构建用户界面的强大平台。React 的核心理念是声明式的、高效的以及...
react 基础
weixin_38822843的博客
11-08 1941
什么是react？ react脚手架的基本使用 jsx react组件的使用 state的基本使用 目录 什么是react？ react脚手架的基本使用 jsx react组件的使用 state的基本使用
React基础语法
2401_85869239的博客
06-24 877
组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容。1．组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签。2．函数组件必须有返回值，表示该组件的UI结构;类组件应该继承React.Component父类，从而使用父类中提供的属性和方法。状态：就相当于Vue中的data中数据，自己内部可以调用的属性或方法。4．使用函数名称作为组件标签名称，可以成对出现也可以自闭合。这样写回调函数中的this指向的是当前对象组件中的实例对象。
react基础入门
妍思码匠的博客
01-12 1258
从以上概念可知，react组件就是一部分的js逻辑，封装的独立的可复用的代码片段，这样每个片段都可以进行独立的管理，很好的实现了代码的复用。react的核心是封装一个个大大小小的组件（小到一个按钮，大到一个页面）来构建复杂的UI界面，每个组件都是UI的一部分。函数式组件其实就是官网的标准案例，定义一个函数，接受任意的props参数，函数中返回jsx语法的页面UI内容。class组件不同于函数组件的是，class组件会创建对应的实例，因此。，该函数的返回值是JSX语法编写的React元素。
React基础讲解
stay_少年的博客
07-26 1410
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、React是什么？二、如何使用1.基于浏览器的模式babel代码如下：2.利用react 创建视图3.JSX4.插值表达式代码示例5.条件输出输出数据类型列表渲染条件渲染6.列表循环基于自动化的集成环境模式 - create-react-app - 脚手架安装与使用安装yarn使用npx项目目录结构说明命令脚本npm start类式组件代码示例props 和 stateprops 与 state 的区别组件通信与数据流数据代
React基础写法
沉淀，积累、进步
04-06 1246
react 历史、简单使用以及生命周期
React基础入门
donglize521521的博客
09-24 4141
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
react基础
qq_30351747的博客
06-15 1461
react基础
React 基础文档
19年的墨先生的博客
02-09 2812
一. React的基本使用 1.1 相关js库 react.js：React核心库。 react-dom.js：提供操作DOM的react扩展库。 babel.min.js：解析JSX语法代码转为JS代码的库。 1.2 hello,react <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/r
React 基础
chinusyan的专栏
10-26 607
React 基础
react基础文档、学习文档资料
07-11
一、React基础 1. JSX语法：React引入了一种名为JSX的语法糖，它是JavaScript和XML的混合体，允许我们在JavaScript中编写类似HTML的结构，便于创建和操作虚拟DOM。 2. 组件化：React的核心理念是组件。组件是可复用...
react基础文件.zip
06-04
"react基础文件.zip"可能包含一系列学习React基础的资源，如代码示例、教程文档等。让我们深入探讨React的基础知识。 1. **React组件**：React的核心概念是组件，它是可重用的代码块，可以独立渲染HTML到DOM。组件...
JavaScript：前端框架入门：React基础
07-14
### JavaScript：前端框架入门：React基础 #### 一、React简介与环境搭建 ##### 1. React的历史与特点 **1.1 React的历史** React是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它最初在2013年...
C# WinForms YOLOv11-ONNX实例分割模型部署（包含详细的完整的程序和数据）
10-14
内容概要：本文档详细介绍了使用C# WinForms构建并部署基于YOLOv11模型的对象实例分割系统的全流程，涵盖图像数据增强与预处理技术，演示了置信度及IOU阀值调节等功能的具体实现。 适用人群：面向有一定C#编程基础并且对于机器学习模型感兴趣的技术人士。 使用场景及目标：本应用特别适合作为对象检测和分类的实际案例教程来加深对于视觉感知的理解，并能够利用所提供的样例代码自行构建相似的实例分割系统。 其他说明：后续可以探索的方向包含了数据增广、参数微调，以及为了适应移动端应用的重新构想。
API接口详解与使用方法
10-14
本文档详细介绍了多个与http://api.dady8866.com/相关的API接口的功能、请求方式以及具体使用方法。内容包括但不限于登陆验证接口，获取账户余额接口，获取、释放和拉黑手机号码等相关接口的操作指南，并针对每项操作都给出了一次请求和相应结果的数据实例演示，确保用户可以快速理解和正确使用。 本资源适用于有API对接需求的研发人员和技术支持团队，尤其适用于希望通过自动化手段提升工作效率的相关人员。 使用场景涵盖系统自动登录、账户余额查询和动态号码管理等方面的工作流程优化，在使用时需特别关注接口间的依赖关系，注意频率限制避免被封号的风险。 需要注意的是由于各功能点之间的强关联性，使用者需要熟悉整个流程并在实际操作之前做好充分的测试以保证业务顺利进行.
Pycluster-1.59-cp38-cp38-win_amd64.whl
10-14
Pycluster-1.59-cp38-cp38-win_amd64.whl
nx二次开发.docx
最新发布
10-14
NX（以前称为Unigraphics，简称UG）是一款功能强大的CAD/CAM/CAE软件，广泛应用于航空航天、汽车、电子、机械等行业的设计与制造。NX的二次开发是指通过编程语言和NX提供的API（Application Programming Interface）来扩展或定制NX的功能，以满足特定的业务需求。以下是对NX二次开发的详细介绍： 一、NX二次开发的基本概念 NX二次开发的目标是通过编程来自动化NX中的常见任务，提高工作效率，减少重复劳动。NX提供了丰富的API，支持多种编程语言，如C++、VB.NET、C#、Java等。通过这些API，开发者可以访问NX的内部数据结构、操作模型、生成报告等。 二、NX二次开发的常用工具 NX Open：是NX提供的主要二次开发工具，它包含了大量的函数和类库，可以访问和操作NX中的各种模型和数据。 UG/Open API：是Siemens提供的一套用于NX二次开发的接口，通过它，开发者可以利用C++或者Java等编程语言来扩展NX的功能。 UI Styler：用于创建自定义的用户界面，开发者可以通过它设计符合自己需求的界面元素。 三、N
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值