安装react模块

最新推荐文章于 2022-09-20 16:24:22 发布

半夏的前端笔记

最新推荐文章于 2022-09-20 16:24:22 发布

阅读量244

点赞数

分类专栏： react 文章标签： react babel javascript

本文链接：https://blog.csdn.net/qq_42430948/article/details/112304252

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装react模块

在这里插入图片描述

被动/主动编译

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <script>
        //在这里写的代码都需要自己手动编译
        // let es6 = `let fn = () => '123'`
        // let es5 = Babel.transform(es6,{presets:['es2015']}).code
        // console.log(es5);

        // let es6 = `let {name,age} = {name:'wl',age:22}`
        // let es5 = Babel.transform(es6,{presets:['es2015']}).code
        // console.log(es5);
    </script>
    <script type="text/babel">
        //babel自动帮你编译
        let {name,age} = {name:'wl',age:22}
        console.log(name,age);
    </script>
</body>
</html>

react渲染

注意：react采用jsx语法（在js里写xml），需要在type="text/babel"的script标签里进行编译

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/babel-standalone/babel.js"></script>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
</head>
<body>

    <div id="app"></div>
    <script type="text/babel">
        // console.log(ReactDOM);
        //利用babeljs进行编译 通过react把h1渲染到#app里
        ReactDOM.render(<h1>hello world</h1>,document.querySelector('#app'))
    </script>
</body>
</html>

半夏的前端笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
安装react模块

安装react模块被动/主动编译<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./nod
复制链接

扫一扫