React 入门课程 - 使用CDN编程React

news2024/11/27 1:43:53

1. 第一个React

注意：在vscode里，使用Live Server来运行html文件。
index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

通过内容分发网络（CDN）可以引入React和ReactDOM库，这样可以直接在网页中使用这两个库，而不需要下载和本地存储。

React 是一个用于构建用户界面的JavaScript库，主要负责视图层的逻辑和组件的构建。
ReactDOM 是一个帮助将React组件渲染到实际DOM节点的库，负责将React的虚拟DOM映射到网页的实际DOM上。
crossorigin 属性的使用是为了控制在跨域请求（即从一个域访问另一个域的资源）时如何共享资源。这在从CDN加载React或其他库时尤为重要。
引入一个可以在浏览器中直接使用的 Babel 版本。通常，Babel 是在构建过程中（如使用 Webpack）运行的，但 Babel Standalone 允许在不设置构建工具的情况下直接在浏览器中转换 JavaScript 代码。这在快速测试和开发原型时非常有用。
Babel Standalone 可以将 ES6+ 或 JSX 代码转换为旧版 JavaScript，直接在浏览器中运行。

index.js

ReactDOM.render(<p>Hi, my name is Bob!</p>, document.getElementById("root"))

将React组件渲染到页面的目标位置。通过在HTML中为React组件准备好一个空的<div>容器，然后在JavaScript代码中使用ReactDOM.render方法将组件插入该容器中。

index.css

html, body {
    margin: 0;
    padding: 0;
}

在这里插入图片描述

2. React is composable

index.html, index.css不用更改，修改index.js

function MainContent() {
    return <h1>I am learning React!</h1>
}

ReactDOM.render(<div><MainContent /></div>, document.getElementById('root'))

在这里插入图片描述

3. JSX

更新index.js

const navbar = (
    <nav>
        <h1>Bob's Bistro</h1>
        <ul>
            <li>Menu</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)

ReactDOM.render(navbar, document.getElementById("root"))

在这里插入图片描述

4. 完成后的project可以部署到netlify上。

5. 添加图片

在这里插入图片描述
index.js

const page = (
    <div>
        <img src="./react-logo.png" width="40px" />
        <h1>Fun facts about React</h1>
        <ul>
            <li>Was first released in 2013</li>
            <li>Was originally created by Jordan Walke</li>
            <li>Has well over 100K stars on GitHub</li>
            <li>Is maintained by Facebook</li>
            <li>Powers thousands of enterprise apps, including mobile apps</li>
        </ul>
    </div>
)

ReactDOM.render(page, document.getElementById("root"))

6. Custom Components

index.js

function Page() {
    return (
        <ol>
            <li>It's a popular library, so I'll be 
            able to fit in with the cool kids!</li>
            <li>I'm more likely to get a job as a developer
            if I know React.</li>
        </ol>
    )
}

ReactDOM.render(<Page />, document.getElementById("root"))

function Page() {
    return (
        <div>
            <header>
                <nav>
                    <img src="./react-logo.png" width="40px" />
                </nav>
            </header>
            <h1>Reasons I'm excited to learn React</h1>
            <ol>
                <li>It's a popular library, so I'll be 
                able to fit in with the cool kids!</li>
                <li>I'm more likely to get a job as a developer
                if I know React</li>
            </ol>
            <footer>
                <small>© 2021 Ziroll development. All rights reserved.</small>
            </footer>
        </div>
    )
}

ReactDOM.render(<Page />, document.getElementById("root"))

7. Parent/ Child Components

function Header() {
    return (
        <header>
            <nav>
                <img src="./react-logo.png" width="40px" />
            </nav>
        </header>
    )
}

function Footer() {
    return (
        <footer>
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

function MainContent() {
    return (
        <div>
            <h1>Reasons I'm excited to learn React</h1>
            <ol>
                <li>It's a popular library, so I'll be 
                able to fit in with the cool kids!</li>
                <li>I'm more likely to get a job as a developer
                if I know React</li>
            </ol>
        </div>
    )
}

function Page() {
    return (
        <div>
            <Header />
            <MainContent />
            <Footer />
        </div>
    )
}

ReactDOM.render(<Page />, document.getElementById("root"))