React基础教程(三):JSX语法

React基础教程(三):JSX语法

1、JSX简介

  1. 全称:JavaScript XML
  2. react定义的一种类似于XML的JS扩展语法:JS+XML
  3. 本质是React.createElement(component, props, ...children)方法的语法糖
  4. 作用:用来简化创建虚拟DOM(注意:它不是字符串,也不是HTML/XML标签;它最终产生的就是一个JS对象)
  5. 标签名任意:HTML标签或其他标签

2、JSX语法规则

  1. 定义虚拟DOM的时候不要写引号
  2. 标签中混入JS表达式时要用{}
  3. 样式的类名指定不要用class,要用className
  4. 内联样式,要用style={{key:value}}的形式去写
  5. 虚拟DOM必须只有一个根标签
  6. 标签必须闭合
  7. 标签首字母:①若小写字母开头,则将改标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。②若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。

代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Reacttitle>
    
    <script src="../js/react.development.js">script>
    
    <script src="../js/react-dom.development.js">script>
    
    <script src="../js/babel.min.js">script>
head>
<body>

<div id="test">

div>


<script type="text/babel">
    const myId = "react";
    const myData = "Hello React !!!";
    // 1、创建虚拟DOM
    const virtualDOM = (
        <div>
            <h1 className={'title'} id={myId}>
                <span style={{color: "red", fontSize: '29px'}}>{myData}</span>
            </h1>
            <h1 className={'title'} id={myId.toUpperCase()}>
                <span style={{color: "red", fontSize: '29px'}}>{myData}</span>
            </h1>
            <label>
                <input type="text"/>
            </label>
        </div>);
    // 2、渲染虚拟DOM
    ReactDOM.render(virtualDOM, document.getElementById("test"));
script>
body>
html>
<style>
    .title {
        background-color: bisque;
    }
style>

3、JSX小练习

需求:动态展示如下列表:
React基础教程(三):JSX语法_第1张图片

小插曲:什么是表达式?

  1. 一个表达式会产生一个值,可以放在任何一个需要值的地方。
    • 下面这些都是表达式
      • a
      • a+b
      • func(1)
      • arr.map()
      • function test(){}
  2. 语句/代码
    • 下面这些都是语句/代码
      • if(){}
      • for(){}
      • switch(){case:xxxx}

代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx小练习title>
    
    <script src="../js/react.development.js">script>
    
    <script src="../js/react-dom.development.js">script>
    
    <script src="../js/babel.min.js">script>
head>
<body>

<div id="test">

div>

<script type="text/babel">
    // 模拟一些数据
    const data = ['Angular', 'React', 'Vue'];
    // const obj = {name1:'Angular', name2:'Angular', name3:'Angular'};
    // 1、创建虚拟DOM
    const virtualDOM = (
        <div>
            <h2>前端js框架列表</h2>
            <ul>
                {
                    data.map((item, index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    ); /*此处一定不要写引号,因为不是字符串。这是JSX语法*/
    // 2、渲染虚拟DOM
    ReactDOM.render(virtualDOM, document.getElementById("test"));
script>
body>
html>

你可能感兴趣的:(React基础教程,react.js,javascript)