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"))
相关推荐
牧羊狼的狼10 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手11 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲11 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell12 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮13 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel14 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip14 小时前
JavaScript事件流
前端·javascript
小菜全14 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C14 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG14 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js