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

1. 第一个React

注意:在vscode里,使用Live Server来运行html文件。

index.html

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

javascript 复制代码
ReactDOM.render(<p>Hi, my name is Bob!</p>, document.getElementById("root"))
  • 将React组件渲染到页面的目标位置。通过在HTML中为React组件准备好一个空的<div>容器,然后在JavaScript代码中使用ReactDOM.render方法将组件插入该容器中。

index.css

javascript 复制代码
html, body {
    margin: 0;
    padding: 0;
}

2. React is composable

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

javascript 复制代码
function MainContent() {
    return <h1>I am learning React!</h1>
}

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

3. JSX

更新index.js

javascript 复制代码
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

javascript 复制代码
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

javascript 复制代码
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"))
javascript 复制代码
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

javascript 复制代码
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"))
相关推荐
Tajang1 分钟前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
鹏多多5 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
龙仔CLL36 分钟前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李37 分钟前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码1 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
不学习何以强国1 小时前
Cool Unix + OpenAuth.Net 实现一款校园小程序的开发
mysql·前端框架·asp.net
reembarkation1 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350239 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js