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>
相关文章
|
6月前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
86 0
|
6月前
|
JavaScript 前端开发 开发者
VUE基础知识:什么是Vue模板语法?
VUE基础知识:什么是Vue模板语法?
75 0
|
3月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
44 4
|
6月前
|
JavaScript 前端开发
Vue中JSX的基本用法
Vue中JSX的基本用法
65 1
|
6月前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
44 0
|
6月前
|
前端开发 JavaScript 开发者
React中JSX语法入门
React中JSX语法入门
|
JavaScript 前端开发 开发者
JSX 的基本使用
JSX 的基本使用
478 0
|
JavaScript 前端开发
Vue的Mustache语法是干什么的?底层原理是什么?
Vue的Mustache语法是干什么的?底层原理是什么?
136 0
|
JavaScript
在 Vue 中如何使用 JSX,就这么简单(三)
在 Vue 中如何使用 JSX,就这么简单
234 0
在 Vue 中如何使用 JSX,就这么简单(三)
|
XML JavaScript 前端开发
在 Vue 中如何使用 JSX,就这么简单(一)
在 Vue 中如何使用 JSX,就这么简单
144 0
在 Vue 中如何使用 JSX,就这么简单(一)