[Apprentissage réactif] - règles de grammaire jsx (3)
1. Règles de grammaire JSX :
1. Définissez le DOM virtuel, n'écrivez pas de guillemets.
2. Utilisez {} pour mélanger les expressions JS dans les balises.
3. Utilisez className au lieu de class pour spécifier le nom de classe du style
. style={
{ clé:valeur}} à écrire sous la forme
5. Le DOM virtuel n'a qu'un seul libellé racine
6. Le libellé doit être fermé
7. La lettre initiale du libellé (si elle commence par une lettre minuscule, convertissez le libellé en élément de même nom en html, si S'il n'y a pas d'élément de même nom correspondant à la balise en html, une erreur sera signalée)
<!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. Distinguer les instructions js des expressions
Trois, pratique JSX
<!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>
Quatrièmement, la compréhension des composants et de la modularisation
