React基本使用,JSX,事件

最新推荐文章于 2024-05-15 13:38:56 发布
最新推荐文章于 2024-05-15 13:38:56 发布
阅读量165 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITMA_/article/details/119117146
版权

要使用React需要引入React所对应的文件
这两个标签就是加载react

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

基本使用
reactDOM提供了与浏览器交互的DOM功能,渲染DOM,虚拟DOM
ReactDOM.render() 中有三个参数
第一:要渲染的内容
第二:要渲染的内容存放的容器
第三:渲染后的回调函数,可选参数

<!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 src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="like_button.js"></script>
</head>
<body>
    <!-- react.js 提供核心代码 -->
    <div id="root"></div>
    <script>
        // raactDOM  提供了与浏览器交互的DOM功能,如虚拟DOM,渲染DOM
        // reactDOM.render(三个参数)
        ReactDOM.render(
            // 渲染的内容
            "今天是阴天",
            // 要渲染内容要存放的容器
            document.querySelector('#root'),
            // 渲染后的回调函数,可选参数
            ()=>{
                console.log('ok')
            }
        )
    </script>
</body>
</html>

动态创建视图标签
React.createElement 三个参数{传入HTML标签名,表示属性类型,要显示的内容}

<body>
    <div id="root"></div>
    <script>**加粗样式**
        //  React.createElement 三个参数{传入HTML标签名,表示属性类型,要显示的内容}
        let h1 = React.createElement('h1',null,'React')
        let q = React.createElement('h2',null,'React')
        let el = React.createElement(
            'header',
            {id:"className"},
            h1,
            q)
        ReactDOM.render(
            // 渲染的内容
            el,
            document.querySelector('#root'),
            ()=>{
                console.log('ok')
            }
        )
    </script>
</body>

JSX

引入

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

使用

<!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 src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!-- <script src="like_button.js"></script> -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    let str = "蛇精"     
        ReactDOM.render(       
            <h1>
                <p>葫芦小金刚</p>
                <p>{str}</p>
                </h1>,          
            document.querySelector('#root'),
            ()=>{
                console.log('ok')
            }
        )
    </script>
</body>
</html>

JSX注意点

 <div id="root"></div>
    <script type="text/babel">   
    // class类型名 要写成className,
    // style 接受的是一个对象,并不是字符串
    // 每次只能输出一个标签(或者是必须要有一个跟标签)
    // 唯一父级,
    // jsx不能与js语句一起使用,所有标签都得闭合,标签名必须小写
          ReactDOM.render(
            <div>
                <div className="box" style={{width:'300px'}}></div>
                </div>,
            document.querySelector('#root')
          )

React组件使用下载安装

npx create-react-app my-app
cd my-app
npm start

组件的创建方式

类组件:
1.组件类必须继承 React.Component
2.组件类必须有render方法
3.render 方法的return 后定义组件的内容
最后记得导出

import React from "react";
class Family extends React.Component{
    render(){
      return  (<div>
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
            </ul>
        </div>)
    }
};
export default Family

显示直接引入,单标签使用双标签也ok

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <App/>,//使用
//  '啦啦啦啦',
  document.getElementById('root')
);
reportWebVitals();

React事件处理

state
改变state必须通过setState

import React,{Component} from "react";
import Family from "./family";
class App extends Component{
  state = {
    hEight:174
  }
  tianjia(){
    this.setState({
      hEight:this.state.hEight+1
    }) 
  }
  render(){
    // let {hEight} = this.state
    return (<div>hellow,REACT
        <Family/>
        <p>{this.state.hEight}</p>
        <button onClick={
          ()=>{
            // this.setState({
            //   hEight:hEight+1
            // })
            this.tianjia()
          }
        }>点我变高</button>
    </div>)
  }
};
export default App;

防止this指向问题
解决
第一:

 tianjia()=>(){
    this.setState({
      hEight:this.state.hEight+1
    }) 
  }

第二:箭头函数调用

      ()=>{
            this.tianjia()
          }

建议直接使用第一种

哈比老乌龟
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是JSX、是如何使用以及注意事项
weixin_46116626的博客
03-14 5454
什么是JSX、是如何使用以及注意事项
JSX基础（入门）
weixin_57844432的博客
09-21 1万+
JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构。简单理解就是： JSX=javascript xml ，是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。在React中创建HTML结构（页面UI结构）1）采用类似于HTML的语法，降低学习成本，会HTML就会JSX2）充分利用JS自身的可编程能力创建HTML结构3）JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
JSX、JSX的介绍、JSX特点、JSX的语法、XML基本语法
热门推荐
CIA的博客
11-17 2万+
1、JSX的介绍 ​ 什么是JSX：JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。 ​ 在实际开发中，JSX 在产品****打包阶段****都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩展。 2、特点： ​ JSX 执行更快，因为它在编译为 JavaScr
大数据最全React基础-JSX事件绑定-事件传参_jsx点击事件(1)，2024年最新重难点整理
最新发布
2401_84164672的博客
05-15 1032
/ 回调函数时会将event对象传递过来的。
JSX | TSX 教程
青蛙king的博客
05-25 7813
如果你需要将大量 HTML 代码移植到 JSX 语法，可以使用一款在线的免费的代码转换器工具。
一起玩转Vue中的JSX：让你一次性掌握它的特性!
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-21 2652
JSX简介JSX是一种Javascript的语法扩展，即具备了Javascript的全部功能，同时又兼具html的语义化和直观性。它可以让我们在JS中写模板语法：constel=<div>Vue2</div>; 复制代码上面这段代码既不是 HTML 也不是字符串，被称之为 JSX，是 JavaScript 的扩展语法。JSX 可能会使人联想到模板语法，但是它具备 J...
React学习之JSX与react事件实例分析
11-27
本文实例讲述了React学习之JSX与react事件。分享给大家供大家参考，具体如下： 1、JSX 1.1、表达式 在React中使用JSX来描述HTML页面，而且可以与js混合使用，使用JavaScript表达式时要将表达式包含在大括号里 const...
React JSX语法使用案例
04-21
接下来，我们将深入探讨React JSX的使用案例及其相关配置。 首先，`cnpm install` 是一个命令行工具，用于在中国大陆地区更快地安装npm包。在开发React应用时，我们需要安装React库以及其相关的依赖，如`react-dom`...
React 0% JSX，100% 打嗝
06-08
React.hiccup React 0% JSX, 100% hiccup Dig React 但 JSX 感觉有点奇怪？ React.hiccup 来救援！ React.hiccup 是用 sweet.js 编写的 JSX 的完全替代品。 React.hiccup 使用了一种非常干净、简约的表示法——HTML ...
react jsx中样式渲染
01-07
import React from 'react'; import ReactDOM from 'react-dom'; const title = { color:'red' } const songs = [ {id:1,name:'赤西虐对1'}, {id:2,name:'赤西虐对2'}, {id:3,name:'赤西虐对3'}, ] // key的作用...
JSX 语法详解
web00_11的博客
11-14 1万+
JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖，也是react.js的使用基础。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX
JSX介绍
Zing_ing的博客
04-09 1252
​ 什么是JSX：JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。JSX是Javascript的一种语法拓展JSX是JavaScript XML简写，表示在JavaScript中编写XML格式代码（也就是HTML格式）​ 在实际开发中，JSX 在产品都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。
什么是jsx
weixin_45290863的博客
07-28 1547
JSX 1、jsx是什么? React 使用 JSX 来替代常规的 JavaScript JSX 是一个看起来很像 XML 的 JavaScript 语法扩展 我们不需要一定使用 JSX，但它有以下优点 JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化 它是类型安全的，在编译过程中就能发现错误 使用 JSX 编写模板更加简单快速 ...
React初识--必知必会的jsx核心语法
听雨少年的博客
01-18 2668
文章目录jsx核心语法 必知必会认识jsxJSX是什么？为什么React选择了JSXJSX的书写规范：jsx的使用jsx的注释如何书写jsx嵌入变量一：当变量是Number、String、Array类型时，直接显示二：当变量是null、undefined、Boolean类型时，内容为空三：对象类型不能作为子元素（not valid as a React child）JSX嵌入表达式JSX绑定属性常见属性(src,href...)class属性style内联样式事件绑定this的绑定问题bind显示绑定thi
jsx的用法
Dear
07-31 1171
什么是 jsx jsx 是一种 JavaScript 的语法扩展（eXtension），有时候也叫做 JavaScript XML，它能让我们可以在 js 中编写 html jsx 的使用 书写规范 jsx的顶层只能有一个根元素，即就是最外层需要包括一个 div 标签或者 Fragment 在 jsx 最外面包裹一个 () ，就可以进行换行书写 jsx 中单、双标签都可以 注释的使用 render() { return ( <div> {/* 注释 */}
React学习--JSX与react事件
theVicTory的博客
04-08 899
1、JSX 1.1、表达式 在React中使用JSX来描述HTML页面，而且可以与js混合使用，使用JavaScript表达式时要将表达式包含在大括号里 const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( //将JSX语句保存在变量中 &lt;h1&...
详细教会你在vue中写jsx
WEBYANGxw的博客
12-06 8074
详细教会你在vue中写jsx
react jsx事件获取event对象
黄彪博客
07-15 9375
文章参考 React学习–JSX与react事件 下面我根据使用难易的顺序做了下面三个例子 一、使用bind函数获取event对象 react事件参数的传递通过绑定来实现，在传递时，绑定的this在前，参数在后，在定义函数时，事件对象e要放在最后 /** * 删除列表中选中的行 * @param index 数组的索引 * @param e Event对象,使用bind方式绑定函......
HTML嵌入react 并实现基本jsx基本功能
06-03
要在 HTML 中嵌入 React 并实现基本 JSX 功能，你需要按照以下步骤操作： 1. 引入 React 库和 ReactDOM 库 在 HTML 文件中，你需要将 React 库和 ReactDOM 库引入页面。你可以通过以下方式引入： ```html <script src="https://cdn.jsdelivr.net/npm/react/umd/react.development.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.development.js"></script> ``` 2. 创建一个容器元素 在 HTML 文件中，你需要创建一个容器元素，这个元素将会成为你的 React 应用的根节点。你可以使用一个 div 元素作为容器元素，通常设置一个 id 属性来标识这个元素。 ```html <div id="root"></div> ``` 3. 编写 React 组件 在 JavaScript 文件中，你可以编写 React 组件。组件是 React 中的一个基本概念，它是一个可以重复使用的、可组合的 UI 单元。React 组件通常使用 JSX 语法编写。下面是一个简单的组件示例： ```jsx function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } ``` 在这个示例中，我们定义了一个 Greeting 组件，它接收一个 props 参数，并返回一个包含 props.name 的 h1 元素。 4. 渲染 React 组件 在 JavaScript 文件中，你可以使用 ReactDOM.render() 方法将 React 组件渲染到页面上。这个方法接收两个参数：要渲染的组件和渲染目标元素。 ```jsx const element = <Greeting name="John" />; ReactDOM.render(element, document.getElementById('root')); ``` 在这个示例中，我们先定义了一个 element 变量，它包含一个 Greeting 组件，并传递了一个 name 属性。然后我们使用 ReactDOM.render() 方法将这个组件渲染到页面上，将其放置在 id 为 "root" 的容器元素中。 这样，就可以在 HTML 中嵌入 React 并实现基本 JSX 功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值