React 入门课程 - 使用CDN编程React
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"))