React简介---jsx 语法练习

大鵬

已于 2022-09-26 14:43:03 修改

阅读量82

点赞数

分类专栏：前端文章标签： react.js javascript 前端

于 2022-09-19 11:12:24 首次发布

本文链接：https://blog.csdn.net/weixin_46047612/article/details/126929355

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

简介

官网

中文官网: https://react.docschina.org/

由Facebook开源

（美团就是使用 react 写的）

特点

声明式编码

组件化编码

React Native 编写原生应用

高效（优秀的Diffing算法）

Hello world

1、引入依赖包

（旧版本）先将旧版本

在这里插入图片描述

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>hello</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test">

    </div>
</body>
<!-- 引入 react 的核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入 react-dom 用于支持操作 dom ,必须在 react 核心库之后引入 -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入 babel ，用于将 jsx 转换成 js -->
<script src="../js/babel.min.js"></script>

<!-- type 属性不写 默认是JavaScript，由于我们里面用到了jsx，所以我们type里要写 babel -->
<script type="text/babel">
    // 1、创建虚拟 DOM
    // 一定不能加 单引号，因为不是字符串，这是一个 DOM 元素，使用babel 来解析
    const vDOM = <h1>Hello World !!!</h1>
    // 2、渲染虚拟 DOM 到页面上
    // 两个参数 ：1、虚拟DOM。2、容器
    ReactDOM.render(vDOM,document.getElementById("test"))
</script>
</html>

jsx

语法规则

1、定义 DOM 时，不要加单引号

2、DOM 标签中要使用 js 表达式变量的时候，要用 { }

3、给 DOM 指定类名的时候，不要用 class 要用 className

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

5、虚拟 DOM 必须只有一个根标签

6、标签首字母：

若小写字母开头，则将该标签转换为 html 中同名元素，若 html 中没有该标签对应的同名元素，则报错。
若大写字母开头，react 则去渲染对应的组件，若组件没有定义，则报错。

练习

<!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>jsx语法</title>
</head>
<style>
    .title{
        background-color: red;
        font-size: 80px;
    }
</style>
<body>
    <!-- 准备好一个容器 -->
    <div id="test">

    </div>
</body>
<!-- 引入 react 的核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入 react-dom 用于支持操作 dom ,必须在 react 核心库之后引入 -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入 babel ，用于将 jsx 转换成 js -->
<script src="../js/babel.min.js"></script>

<!-- type 属性不写 默认是JavaScript，由于我们里面用到了jsx，所以我们type里要写 babel -->
<script type="text/babel">
    // 定义变量
    const id = "Hello";
    const context = "hello react!";
    // 1、创建虚拟 DOM
    const vDOM = (
        <h1 className="title" id={id}>
            <span style={{color:'white',fontSize:'10px'}}>{context}</span>    
        </h1>
    )
    // 2、渲染虚拟 DOM 到页面上
    ReactDOM.render(vDOM,document.getElementById("test"))
</script>
</html>

在这里插入图片描述