React学习笔记 | 第一节：React入门

最新推荐文章于 2024-09-13 15:06:03 发布

程序员麻薯

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量141

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/qq_20051535/article/details/112967772

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文是学习React笔记，对应视频为：https://www.bilibili.com/video/BV1oW41157DY 的 1 - 6 节。

一、引入JS

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

二、虚拟DOM创建和渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="test"></div>

<div id="test1"></div>
<div id="test2"></div>

<script type="text/javascript">
    const msg = "react";
    const msg2 = "reactShow";

    //1. 创建虚拟DOM元素
    const vDom1 = React.createElement('h2', {id: msg.toLocaleLowerCase()}, msg.toUpperCase());
    //2. 将虚拟DOM渲染到页面
    ReactDOM.render(vDom1, document.getElementById('test1'));
</script>
<script type="text/babel">
    //1. 创建虚拟DOM元素
    const vDom2 = <h3 id={msg2.toUpperCase()}>{msg.toLowerCase()}</h3>
    //2. 将虚拟DOM渲染到页面
    ReactDOM.render(vDom2, document.getElementById('test2'));
</script>
</body>
</html>

三、JSX练习

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>

    <script type="text/babel">
        const names = ['Jquery', 'angular', 'zepto', 'vue'];

        //1. 创建虚拟DOM
        const ul = (
            <ul>
                {
                    names.map((name, index) => <li key={index}>{name}</li>)
                }
            </ul>
        )
        //2. 渲染
        ReactDOM.render(ul, document.getElementById('example'));
    </script>
</body>
</html>

四、面向组件编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>assembly</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/babel">
    //1. 定义组件
    function MyComponent() {
        return <h2>工厂函数组件 简单组件</h2>
    }

    class MyComponent2 extends React.Component {
        render () {
            return <h2>工厂函数组件 复杂组件</h2>
        }
    }

    //2. 渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById("example1"))
    ReactDOM.render(<MyComponent2/>, document.getElementById("example2"))
</script>
</body>
</html>