JSX语法

最新推荐文章于 2022-10-06 09:45:00 发布

menglong0329

最新推荐文章于 2022-10-06 09:45:00 发布

阅读量326

点赞数

分类专栏： React Native

本文链接：https://blog.csdn.net/menglong0329/article/details/80993213

版权

React Native 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、JSX语法介绍

JSX不是一种语言，而是一种语法（语法糖）。
JSX必须借助React运行环境。
JSX标签就是Html标签，只不过我们在javascript中书协这些标签的时候，不用“”括起来。就和xml一样。
转换：JSX语法能够让我们更加清晰的看到组件的DOM结构，不是直接在浏览器运行的，最终会转换成javascript去运行。JSX代码：
```
 ReactDOM.render(
   <h1>Hello React</h1>,
   document.getElementById("container")
 );
```
实际运行时已经转换过的代码：
```
ReactDOM.render(
  React.createElement("h1",null,"Hello React")，
  document.getElementById("container")
);
```

在JSX中运行javascript的代码，使用{}括起来 {表达式}。

var text = "Hello React";
ReactDOM.render(
  <h1> {text} </h1>,
  document.getElementById("container")
);

JSX的其他的一些特性：属性、设置样式、事件绑定。

二、代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- react.js是react的核心库 -->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- react-dom.js的作用是提供与DOM相关的功能 -->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- browser.min.js的作用是将JSX语法转换成JavaScrept语法 -->
    <script src="./build/browser.min.js" charset="utf-8"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

  </head>
  <body>

<!-- React渲染的模板内容会插入到这个DOM节点中，作为一个容器 -->
<div id="container">
</div>

  </body>

<!-- 在React开发中，使用JSX语言，与JavaScrpt不兼容，在JSX的地方，要设置一下type为text/babel -->
<!-- babel是一个转换编辑器，把ES6转换成可以在浏览器运行的代码 -->
<script type="text/babel">

// 在此处编写React代码

/*
  JSX入门
  JSX不是一种语言，而是一种语法（语法糖）。
*/

//1.JSX必须借助React运行环境

//2.JSX标签就是Html标签，只不过我们在javascript中书协这些标签的时候，不用“”括起来。就和xml一样
// ReactDOM.render(
//   <h1>Hello React</h1>,
//   document.getElementById("container")
// );

//3.转换：JSX语法能够让我们更加清晰的看到组件的DOM结构，不是直接在浏览器运行的，最终会转换成JAVASCRIPT去运行
// ReactDOM.render(
//   React.createElement("h1",null,"Hello React")，
//   document.getElementById("container")
// );

//4.在JSX中运行javascript的代码
//使用{}括起来  {表达式}

var text = "Hello React";
ReactDOM.render(
  <h1> {text} </h1>,
  document.getElementById("container")
);
//JSX的其他的一些特性：属性、设置样式、事件绑定

</script>

</html>

menglong0329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSX语法

一、JSX语法介绍JSX不是一种语言，而是一种语法（语法糖）。JSX必须借助React运行环境。JSX标签就是Html标签，只不过我们在javascript中书协这些标签的时候，不用“”括起来。就和xml一样。转换：JSX语法能够让我们更加清晰的看到组件的DOM结构，不是直接在浏览器运行的，最终会转换成javascript去运行。JSX代码： ReactDOM.render( &lt;h1&...
复制链接

扫一扫