react与html结合使用

最新推荐文章于 2023-09-30 13:08:35 发布

小菜篮

最新推荐文章于 2023-09-30 13:08:35 发布

阅读量4k

点赞数 1

分类专栏： react 文章标签： react.js javascript

本文链接：https://blog.csdn.net/weixin_50723565/article/details/125334561

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文主要记录了，怎么在html页面使用react的流程:

一、引入react和bable库

这个库可以去react官网引入，也可以下载有关的js文件
官网引入:
1、先引入react有关文件
在这里插入图片描述

// 适用于开发环境:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

// 适用于生产环境:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

2、bable文件要放在react库后面
在这里插入图片描述
js文件引入的方式:

这3个文件需要自行下载
线上实现的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react_hello_world</title>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../develop/react.development.js"></script>
    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script type="text/javascript" src="../develop/react-dom.development.js"></script>
    <!-- 引入babel, 用于将jsx转为js -->
    <script type="text/javascript" src="../develop/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <div id="rootA"></div>
    <div id="rootB"></div>
    <div id="rootC"></div>
</body>
</html>
<script type="text/babel"> /* 此处一定要写babel */
    // 最简单的ReactDOM
    ReactDOM.render(
        <h1>Hello, world</h1>,
        document.getElementById('root')
    )
    // JSX
    function formatName(user) {
        return user.firstName + ' ' + user.lastName;
    }
    const user = {
        firstName: 'Harper',
        lastName: 'Perez'
    }
    const element = (
        <h1>
            Hello, {formatName(user)}!
        </h1>
    )
    ReactDOM.render(
        element,
        document.getElementById('root')
    )
    function getGreeting(user) {
        if (user) {
            return <h1>Hello, formatName(user)</h1>
        }
        return <h1>Hello, Stranger.</h1>
    }
    const elementA = <div tabIndex="1"></div>
    const elementB = <img src={user.firstName} /> // 要是标签没有内容可以使用 "/>" 来闭合
    /**警告:
     * 因为JSX语法上更接近javaScript而不是HTML, 所以React DOM使用cameCase(小驼峰命名) 来定义属性的名称，而不是使用HTML的命名约定。
     * 例如:
     * JSX里的class变成了className, 而tabindex则变为tabIndex。
     */
    const elementC = (
        <div>
            <h1>我是</h1>
            <h2>笨笨</h2>
            <span>和</span>
            <h2>蛋蛋</h2>
        </div>
    )
    ReactDOM.render(
        elementC,
        document.getElementById('rootA')
    )
    let tickTimer = null;
    function tick() {
        if (tickTimer) {
            clearInterval(tickTimer)
        }
        const elementE = (
            <div>
                <h1>Hello, world</h1>
                <h2>It is {new Date().toLocaleDateString()}.</h2>
            </div>
        );
        console.log('1111111111', new Date());
        ReactDOM.render(elementE, document.getElementById('rootB'));
    }
    tickTimer = setInterval(tick, 1000)
    const elementF = React.createElement(
        'span',
        {className: 'greating'},
        '哈喽 哈喽 我是笨笨'
    );
    ReactDOM.render(elementF, document.getElementById('rootC'))
</script>