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 developerif 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 developerif 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 developerif I know React</li></ol></div>)
}function Page() {return (<div><Header /><MainContent /><Footer /></div>)
}ReactDOM.render(<Page />, document.getElementById("root"))