React 第一个Demo

0x00 前言

  • CTF 加解密合集
  • CTF Web合集
  • 网络安全知识库

次笔记仅记录学习React过程中的笔记,因为有必要掌握一门前端的框架, 在vue和React中选择了React。

0x01 正文

目标:
React 第一个Demo_第1张图片

实现Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

0x02 笔记

1.引用库

react.development.js是react核心库

react-dom.development.js是跨站库

babel.min.js是转换库,主要作用是为了将jsx转为js

2.js写法

相对于正常的js而言,需要将type中的内容转为:text/babel

举例:

<script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
</script>

3.基本渲染写法

reactDOM.render的方式给容器赋值

举例:

<script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
</script>

你可能感兴趣的:(React,react.js,javascript,ecmascript)