React入门
要在新创建的项目中使用 React，我们需要加载两个 React 脚本：
- react：是核心的 React 库。
- react-dom：提供了特定的 DOM 的方法，使您能够将 React 与 DOM 一起使用。
这两个库，我们目前直接使用在线引入的方式，通过Script标签进行引入。
index.html
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = '你好';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>
</body>
</html>现在开始，我们不直接使用纯 JavaScript 操作 DOM，所以我们要删除之前添加的 DOM 方法。
并添加该 ReactDOM.createRoot() 方法以面向特定的 DOM 元素并创建一个根来显示您的 React 组件。
然后，添加将 React 代码渲染到 DOM root.render() 的方法。
index.html
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
const root = ReactDOM.createRoot(app);
root.render(<h1>你好</h1>);
</script>
</body>
</html>这边使用createRoot(app)告诉React，在我们的#app元素中，挂载<h1>
如果尝试在浏览器中运行此代码，页面会变成空白。
控制台会报错：
Terminal
Uncaught SyntaxError: expected expression, got '<'这是因为root.render(<h1>你好</h1>)里面的<h1>...</h1>在Javsscript里面是无效的，无法被浏览器运行。
因为这是一段JSX代码。
什么是JSX？
JSX 是 JavaScript 的语法扩展，允许您使用熟悉的类似 HTML 的语法来描述您的 UI。
JSX 的好处是，除了遵循三个 JSX 规则之外，您不需要学习 HTML 和 JavaScript 之外的任何新符号或语法。
但是浏览器无法理解开箱即用的 JSX，因此您需要一个 JavaScript 编译器（例如 Babel）将 JSX 代码转换为常规 JavaScript。
将Babel添加到项目中
若要将 Babel 添加到您的项目中，方法很简单，同我们引入React时一样。
只需要将以下脚本复制并粘贴到 index.html 文件中：
index.html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>此外，您需要通过将脚本类型更改为 type=text/jsx 来通知 Babel 要转换的代码。
index.html
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel Script -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const domNode = document.getElementById('app');
const root = ReactDOM.createRoot(domNode);
root.render(<h1>你好</h1>);
</script>
</body>
</html>这时，我们在浏览器里面打开页面，页面显示了
我们现在比较下代码
你可以开始看到使用 React 后，减少了大量重复的代码。
这正是 React 所做的，它是一个包含可重用代码片段的库。
如果你需要深入了解 React 如何更新 UI 来开始使用它，这里有一些额外的资源：
服务端使用React
对了，后面的章节了会涉及一些JavsScript的特殊语法，如果你对JavsScript不是很熟，你可以通过下面的链接了解下
使用组件构建UI
React核心概念
在开始构建 React 应用程序之前，您需要熟悉 React 的三个核心概念。这些是：
- Components 组件
- Props 属性
- State 状态
在接下来的章节中，我们将介绍这些概念，并提供可以继续学习它们的资源。
在你熟悉了这些概念之后，我们再开始学习如何安装Next.js并使用更新的 React 功能，例如服务器和客户端组件。
Components 组件
用户界面可以分解为更小的构建块，称为组件。
组件允许您构建独立的、可重用的代码片段。
如果您将组件视为乐高积木，则可以将这些单独的积木组合在一起以形成更大的结构。
如果需要更新UI的一部分，可以更新特定的组件或模块。
这种模块化使你的代码在开发过程中更具可维护性，因为你可以添加、更新和删除组件，而无需触及应用程序的其余部分。
如果你不好理解，我们可以这样认识，React 组件只是 JavaScript。让我们看看如何从 JavaScript 的角度编写 React 组件：
创建组件
在 React 中，组件是函数。在标签 script 中，创建一个名为 header ：
index.html
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
}
const root = ReactDOM.createRoot(app);
root.render(<h1>你好</h1>);
</script>组件是返回 UI 元素的函数。在函数的 return 语句中，可以写 JSX：
index.html
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
return (<h1>你好</h1>)
}
const root = ReactDOM.createRoot(app);
root.render(<h1>你好</h1>);
</script>若要将此组件挂载到 DOM 上，需要将其作为 root.render() 方法中的第一个参数传递：
index.html
<script type="text/jsx">
const app = document.getElementById("app")
function header() {
return (<h1>你好</h1>)
}
const root = ReactDOM.createRoot(app);
root.render(header);
</script>但这时，我们直接运行页面，会直接报错，为什么？
首先，React 组件应该大写，以区别于普通的 HTML 和 JavaScript：
index.html
function Header() {
return <h1>你好</h1>;
}
const root = ReactDOM.createRoot(app);
// Capitalize the React Component
root.render(Header);其次，你使用React组件的方式与使用常规HTML标签的方式相同，带有尖括号 <> ：
javascript
function Header() {
return <h1>你好</h1>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);再次运行，这回我们看到界面显示正常。
嵌套组件
应用程序通常包含比单个组件更多的内容。你可以像嵌套常规 HTML 元素一样将 React 组件嵌套在一起。
我们创建一个名为 HomePage的组件
index.html
function Header() {
return <h1>你好</h1>;
}
function HomePage() {
return <div></div>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);然后将 <Header> 组件嵌套在新 <HomePage> 组件中：
javascript
function Header() {
return <h1>你好</h1>;
}
function HomePage() {
return (
<div>
{/* 嵌套组件 */}
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);组件树
你可以继续以这种方式嵌套 React 组件以形成组件树。
例如，顶级 HomePage 组件可以包含 、 Header Article 和 组件 Footer 。这些组件中的每一个都可以有自己的子组件，依此类推。例如， Header 组件可以包 Logo 和 Title Navigation 组件。
这种模块化格式允许您在应用内的不同位置复用组件。
在项目中，由于 <HomePage> 现在是顶级组件，因此可以将其传递给 root.render() 方法：
index.html
function Header() {
return <h1>你好<h1>;
}
function HomePage() {
return (
<div>
<Header />
</div>
);
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);