React基础教程(五) - 博客详情

React 使用 JSX (Javascript XML)来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

通过一个实例了解JSX的基础语法。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>

    <style>
        .myclass {
            background: lightpink;
            color: cornflowerblue;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
</div>

<script type="text/babel">
    //这里是单行注释
    /*这里是多行注释*/
    let msg = '你好,React';
    let num = 100;
    let person = {
        name: '张三',
        age: 18
    }

    function sayHello() {
        return 'hello,world!';
    }

    function introduce(person) {
        //使用ES5字符串
        //return "my name is:"+person.name+",age is:"+person.age;
        //使用ES6模板字符串语法
        return `my name is ${person.name}, age is : ${person.age}`;
    }

    let citys =
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
    let url = 'https://www.baidu.com';

    //属性绑定
    let link = <a href={url}>百度网</a>

    //样式绑定
    let mystyle = {backgroundColor: '#7bbfea', textAlign: 'center', color: '#FFF'};
    let node =
        <div>
            {/*这里是jsx的注释，注意多行标签必须使用父元素包裹起来*/}
            <h1>{msg}</h1>
            <hr></hr>
            <div>这里是DIV的内容</div>
            {/*使用表达式*/}
            <div>{++num}</div>
            <div>{sayHello()}</div>
            <div>{introduce(person)}</div>
            {/*渲染数组*/}
            <div>{citys}</div>
            <div>{link}</div>
            <div style={mystyle}>带样式表的DIV(使用style属性)</div>
            {/*注意：jsx里不能使用class属性*/}
            <div className="myclass">带样式表的DIV(使用class属性)</div>
        </div>;
    ReactDOM.render(node, document.querySelector("#app"));
</script>
</body>
</html>

运行效果：

引用jsx文件，在js文件夹里创建demo.js，把上面的script标签里的脚本抽取为独立jsx文件引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <style>
        .myclass {
            background: lightpink;
            color: cornflowerblue;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
</div>
<script type="text/babel" src="js/demo.jsx"></script>
</body>
</html>