[React learning] - jsx grammar rules (3)
1. JSX grammar rules:
1. Define virtual DOM, do not write quotation marks.
2. Use {} to mix JS expressions in tags.
3. Use className instead of class to specify the class name of the style
. Style={
{key:value}} to write in the form of
5. The virtual DOM has only one root label
6. The label must be closed
7. The initial letter of the label (if it starts with a lowercase letter, the label will be converted to an element with the same name in html, if If there is no element with the same name corresponding to the tag in html, an error will be reported)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>使用jsx创建</title>
<style>
.title {
background-color: pink;
width: 200px;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test">
<!--
jsx语法规则：
1、定义虚拟DOM，不要写引号，
2、标签中混入JS表达式要用{
}
3、样式的类名指定不要用class，要用className
4、内联样式，要用style={
{
key:value}}的形式去写
5、虚拟DOM只有一个根表签
6、标签必须闭合
7、标签首字母（若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素则报错）
-->
</div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">
const myId = "CaiCai";
const myData = "Hello React";
const VDOM = (
<div>
<h2 className="title" id={
myId.toLowerCase()}>
<span style={
{
color:'white', fontSize: "20px" }}>
{
myData.toLocaleUpperCase()}</span>
</h2>
<h2 className="title" id={
myId.toLowerCase()}>
<span style={
{
color:'white', fontSize: "20px" }}>
{
myData.toLocaleUpperCase()}
</span>
</h2>
<input type="text"/>
</div>);
ReactDOM.render(VDOM, document.getElementById("test"));
</script>
</body>
</html>
2. Distinguish between js statements and expressions
Three, JSX practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jsx练习</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入Bable 用于将jsx转化为js -->
<script src="../js/babel.min.js"></script>
<!-- 此处一定要写Bable -->
<script type="text/babel">
const data=['Angular','React','Vue']
//创建虚拟DOM
const VDOM =(
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
Fourth, the understanding of components and modularization
