3s学会jsx的基本使用

简介: 3s学会jsx的基本使用
  • 遇到{ 直到 } 部分当成 js 解析
  • 遇到< 直到 > 部分当成 html 解析

jsx = XML+ js

项目实战

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
// jsx 开始
<script type="text/babel">
ReactDOM.render(
  {/* 括号内为js语法 */}
  {/* 下面的尖括号为html语法 */}
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
</script>
</body>
</html>
相关文章
|
8天前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
30 0
|
8天前
|
JavaScript 前端开发 开发者
VUE基础知识:什么是Vue模板语法?
VUE基础知识:什么是Vue模板语法?
48 0
|
8天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
10 0
|
8天前
|
JavaScript 前端开发
Vue中JSX的基本用法
Vue中JSX的基本用法
18 1
|
8天前
|
JavaScript 前端开发 开发者
Vue基础语法
Vue基础语法
20 2
Vue基础语法
|
8天前
|
JavaScript 前端开发
总结vue3 的一些知识点:​Vue.js 条件语句
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
|
8天前
|
前端开发 JavaScript 开发者
React中JSX语法入门
React中JSX语法入门
|
8天前
|
JavaScript 索引
Vue.js中循环语句的使用方法和相关技巧
Vue.js中循环语句的使用方法和相关技巧
63 1
Vue.js中循环语句的使用方法和相关技巧
|
7月前
|
JavaScript 前端开发
Vue基础语法【上】
Vue基础语法【上】
18 0
|
7月前
|
JavaScript
Vue基础语法【下】
Vue基础语法【下】
23 0

热门文章

最新文章