【React框架+JSX语法+React组件】

最新推荐文章于 2024-04-29 20:07:31 发布
最新推荐文章于 2024-04-29 20:07:31 发布
阅读量262 收藏 1
点赞数
分类专栏： web前端 React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fcc627/article/details/126432010
版权

目录

一、React框架

1、简介

  1. 是一个JavaScript库，用于简化用户页面的设计
  2. 美国的Facebook公司2013年发布
  3. 基于jsx(JavaScript XML)语法，使用XML标记将html，JavaScript混写。是React的核心
  4. 组件：是数据和逻辑的封装，提高了代码的复用率，便于测试和维护

2、应用方式

(1)传统方式

传统方式：在页面中引入react库，进行开发

react.development.js：React的核心库
react-dom.development.js：提供与DOM相关的功能
babel.min.js：类似编译器，将ES6代码编译成ES5的

ReactDOM.render(element,container,[callback])：将element元素渲染到container中

💥举例：

<!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>
    <script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>西安邮电大学</h1>,
            document.getElementById('app')
        )
    </script>
    
</body>
</html>

在这里插入图片描述
(2)React脚手架方式

create-react-app 是来自于Facebook,通过该命令我们无需配置就能快速构建React开发环境。
create-react-app自动创建的项目是基于Webpack + ES6。

在这里插入图片描述

3、React虚拟DOM

React虚拟DOM：由ReactDOM.render函数渲染的DOM元素都是虚拟的

二、JSX语法

1、将JavaScript语法写成XML格式

将JavaScript语法写成XML格式：必须使用babel.js对JSX语法进行解析，通常的做法是：
<script type='text/babel'></script>

2、基本语法格式

const element = (
		  
		     <标签名1></标签名1>
			 <标签名2></标签名2>
			 <标签名3></标签名3>
		  
		  );

3、JSX的表达式

JSX的表达式：所有的表达式都放在’{}'里

    (1)算术表达式： { 表达式 }
	
	(2)条件表达式：不能使用if语句
	
	(3)嵌入表达式：{ 变量 }
	
	(4)对象表达式：{ 对象名.属性名 }
	
	(5)函数表达式：{ 函数名([参数]) }
	
	(6)增强型函数表达式：通过传参的方式实现if的选择
	
	(7)数组表达式：{ 数组名 }
	
	(8)样式表达式：<标签名 style={ 样式名 }><标签名/>
	
	(9)注释表达式：{ /* 注释内容 */ }

💥举例：

<!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>
    <script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        //1.获取页面中的元素(实际DOM)
        var mydiv=document.getElementById('app')
        const name = '张三'
        const obj={
            Id:1001,
            Name:'曹操',
            Address:'西安'
        }
        function show(){
            return '编号：'+obj.Id+'姓名：'+obj.Name+'地址：'+obj.Address
        }

        function chooseShow(obj){
            if(obj){
                return show(obj)
            }else{
                return '用户信息为空'
            }
        }

        const arr = [
            <p>姓名：李四</p>,
            <p>性别：男</p>,
            <p>年龄：25</p>
        ]

        //方法二：将许多样式合并到一起写
        const style1={
            css1:{
                fontSize:25,
                color:'blue',
            },
            css2:{
                fontSize:30,
                color:'pink'
            }
        }

        //写法一：分开写
        const css1={
            fontSize:25,
            color:'red'
        }
        
        //2.创建虚拟的DOM
        let reactSpan = (
            <span>
                <h2>西安邮电大学</h2>
                <p>计算机科学与技术专业</p>
                <p>{ 3*5 }</p>
                <p>{1==1 ? 'true' : 'false'}</p>
                <p>{ name }</p>
                <p>{ obj.Id }</p>
                <p>{ obj.Name }</p>
                <p>{ obj.Address }</p>
                <p>{ show(obj) }</p>
                <p>{ chooseShow(obj) }</p>
                <p>{ arr }</p>
                <p style={css1}>西安邮电大学</p>
                <p style={style1.css1}>西北政法大学</p>
                <p style={style1.css2}>陕西师范大学</p>
                {/*hello*/}
            </span>
        )

        //3.将虚拟的DOM渲染到实际的DOM中
        ReactDOM.render(reactSpan,mydiv)
    </script>
</body>
</html>

在这里插入图片描述

三、React的组件

1、类组件

(1)创建类组件：

class 组件名 extends React.Component{
		
		     render(){
		   
		        return (<标签名><标签名/>...)
		   
		    }
		
		  }

(2)将类组件渲染到实际DOM中

将类组件渲染到实际DOM中：类组件名的首字母必须大写

ReactDOM.render(<类组件名/>,实际DOM)``

💥举例:

<!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>
    <script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
    <div id='root'></div>
    <script type="text/babel">
        //1.创建类组件：即定义类
        class Counter extends React.Component{
            render(){
                return (
                    <div>
                        <p>我是类标签</p>
                        <button>按钮</button>
                    </div>
                    
                )
            }
        }
        // 将类组件渲染到真正DOM中
        ReactDOM.render(<Counter/>,document.getElementById('root'))
    </script>
</body>
</html>

在这里插入图片描述

2、函数组件：函数名就是组件名

💥举例：单个函数组件

<!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>
    <script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
    <div id='root'></div>
    <script type="text/babel">
        //定义函数组件
        function Student(){
            return (
                <div>
                    <p>我是函数组件</p>
                    <label >
                        用户名：
                        <input type='text'/>
                    </label>
                    
                </div>
            )
        }
        //2.将类组件渲染到实际的DOM中
           ReactDOM.render(<Student/>,document.getElementById('root'))
    </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>Document</title>
    <script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
    <script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function UserInfo(){
            return (
                <div>
                    <label>
                        用户名：
                        <input type='text'/>
                    </label>
                    
                </div>
            )
        }

        function UserPassword(){
            return (
                <div>
                    <label >
                        密码：
                        <input type='password'/>
                    </label>
                    
                </div>
            )
        }

        //组合函数组件
        function Login(){
            return (
                <div>
                    <UserInfo/>
                    <UserPassword/>
                </div>
            )
        }

        ReactDOM.render(<Login/>,document.getElementById('root'))
    </script>
</body>
</html>

在这里插入图片描述

fcc627
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 框架
敲代码的小李同学的博客
07-02 3万+
React 框架学习
前端+react框架+源码资源+学习视频
最新发布
05-09
1. **JSX**: JSX是React引入的一种语法糖，它允许我们在JavaScript中写类似于HTML的结构。JSX使得在JavaScript中描述UI变得简单直观，但实际运行时会被转换为纯JavaScript。 2. **组件化**: React的核心是组件。...
React框架的介绍、特点、安装及基本使用流程
qq_56715703的博客
04-21 1万+
react是由facebook前端开发团队开发和维护的js框架react的实现功能类似VUE，但是由于国外的开发风格，导致在react上，并没有对数据渲染的步骤进行封装，需要开发者更多的使用es6的语法手动完成数据渲染，所以，代码难度比VUE高。
React框架
hsengjsjsb的博客
04-29 514
此外，React框架一直在不断更新和发展。例如，最近发布的React 19测试版引入了许多新特性，包括改进的状态管理和性能优化等。React框架是由Facebook推出的一款用于构建用户界面的JavaScript开发框架。总的来说，React框架是一个功能强大、高性能且灵活的前端框架，它能够帮助开发者更加高效地构建高质量的Web应用程序。
前端框架 React 学习总结
qq_50909707的博客
11-17 6828
（1）创建store仓库，reducers分开管理reducers: 数据开发中type字符串应放入一个常量管理default:}}default:}}count,user}//1、引入redux//引入日志//导入reducers//2、创建仓库//合并多个reducer})（2）导入到src/index.js文件,全局配置(3)组件中的使用return (
【React框架基础知识】React框架的简介与基本使用方法
得未曾有 心净踊跃
08-29 7284
React：由Facebook开发的用于构建用户界面的JavaScript库(开源)。
Webpack+React+ES6+JSX+CSS实例
12-17
在这个"Webpack+React+ES6+JSX+CSS实例"中，我们将探讨如何整合这些技术来构建一个React组件，并结合CSS进行打包。 React 是一个用于构建用户界面的JavaScript库，尤其擅长构建单页应用。它基于组件化思维，允许...
JavaScript的React框架中的JSX语法学习入门教程
10-22
JSX，全称JavaScript XML，是React框架中用于构建用户界面的一种特殊语法。它允许开发者在JavaScript代码中使用类似HTML的结构来描述UI组件。JSX的引入使得React组件的编写更加直观和易读，但需要注意的是，JSX并非...
gulp-react-starter:Gulp + React Router + JSX编译+ Babel + Browserify + Sass + Bourbon
05-19
**Babel** 是一个广泛使用的JavaScript编译器，它能将ES6+和JSX语法转换为向后兼容的JavaScript版本，确保代码能在大多数浏览器中运行。在本项目中，Babel负责将JSX和ES6代码转换为ES5，以便于在不支持这些新特性的...
React框架概述
橘猫吃不胖的博客
03-02 2万+
React框架概述1 React简介1.1 React概述1.2 React开发环境搭建1.3 第一个React应用1.4 React虚拟DOM1.5 ReactDOM.render()方法1.6 React的渲染机制1.7 React优势1.8 React脚手架2 React JSX2.1 JSX介绍2.2 JSX的应用2.3 JSX算数表达式2.4 JSX条件表达式2.5 JSX嵌入表达式2.6 JSX对象表达式2.7 JSX函数表达式2.8 JSX数组表达式2.9 JSX样式表达式2.10 JSX注释
vue和react的区别
粥可温
09-07 3万+
如果想要一个轻量级，更快速，更现代的UI库来制作单页面应用程序应该选择Vue.js， 如果是大规模应用程序和移动应用程序的应该选择React。
一文带你了解React框架
热门推荐
官方推荐
04-30 5万+
前言 由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次UI ，就能同时运行在服务器、浏览器和手机。 React主要用于构建UI。你
react框架菜鸟教程，前端小白必看
weixin_61857435的博客
05-29 3346
React 是一个比较流行的前端开发框架。React是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
前端（七）——React框架的定位与应用场景解析
杜永康的博客
07-17 3760
组件化开发React 推崇以组件为基础的开发方式。组件是一个独立的、可重用的模块，用于构建用户界面的一部分。React组件具有自己的状态（state）和属性（props），并通过render()方法来描述组件应该如何渲染。组件可以嵌套、组合和复用，使得代码更加模块化、可维护和扩展。虚拟DOMReact 使用虚拟DOM进行高效的渲染。虚拟DOM 是一个轻量级的 JavaScript对象树，与真实的DOM对应。
React和Vue的区别
南栀的博客
03-28 8976
react与vue的区别
React框架的介绍
qq_73992463的博客
10-16 793
React是一种流行的JavaScript库，被广泛用于构建用户界面。它是由Facebook开发并于2013年发布的，现在已经成为许多开发人员的首选框架之一。
React框架基础
weixin_58448088的博客
07-02 3746
网址：React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来 Web 开发的主流工具之一。你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI组件时R
从 0 开始搭建 React 框架
sinat_39145919的博客
01-26 1650
从 0 开始搭建 react 框架：webpack、react、redux toolkit、react-router、eslint、antd5、主题色切换
什么是JSX语法？什么是React组件
08-24
JSX是JavaScript语法扩展，用于在React中编写UI组件。它允许我们在 JavaScript 代码中编写类似HTML的结构，将组件的结构和逻辑紧密地组合在一起。 React组件是构建用户界面的独立、可重用的代码片段。它们将界面分解为更小的部分，每个部分都有自己的状态和行为。组件可以接收属性（props）作为输入，并根据这些属性渲染出相应的 UI。组件还可以包含其他组件作为其子组件，从而构建更复杂的界面。React组件是React应用的核心构建块。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值