likes
comments
collection
share

Next.js14从入门到实战003：React基础篇之React入门

作者站长头像
站长
· 阅读数 5

React入门

要在新创建的项目中使用 React，我们需要加载两个 React 脚本：

  • react：是核心的 React 库。
  • react-dom：提供了特定的 DOM 的方法，使您能够将 React 与 DOM 一起使用。

这两个库，我们目前直接使用在线引入的方式，通过Script标签进行引入。

<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() 的方法。

<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>

如果尝试在浏览器中运行此代码，页面会变成空白。

控制台会报错：

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 文件中：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

此外，您需要通过将脚本类型更改为 type=text/jsx 来通知 Babel 要转换的代码。

<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>

这时，我们在浏览器里面打开页面，页面显示了

Next.js14从入门到实战003：React基础篇之React入门

我们现在比较下代码

Next.js14从入门到实战003：React基础篇之React入门

你可以开始看到使用 React 后，减少了大量重复的代码。

这正是 React 所做的，它是一个包含可重用代码片段的库。

如果你需要深入了解 React 如何更新 UI 来开始使用它，这里有一些额外的资源：

对了，后面的章节了会涉及一些JavsScript的特殊语法，如果你对JavsScript不是很熟，你可以通过下面的链接了解下

使用组件构建UI

React核心概念

在开始构建 React 应用程序之前，您需要熟悉 React 的三个核心概念。这些是：

  • Components 组件
  • Props 属性
  • State 状态

在接下来的章节中，我们将介绍这些概念，并提供可以继续学习它们的资源。

在你熟悉了这些概念之后，我们再开始学习如何安装Next.js并使用更新的 React 功能，例如服务器和客户端组件。

Components 组件

用户界面可以分解为更小的构建块，称为组件。

组件允许您构建独立的、可重用的代码片段。

如果您将组件视为乐高积木，则可以将这些单独的积木组合在一起以形成更大的结构。

如果需要更新UI的一部分，可以更新特定的组件或模块。

Next.js14从入门到实战003：React基础篇之React入门

这种模块化使你的代码在开发过程中更具可维护性，因为你可以添加、更新和删除组件，而无需触及应用程序的其余部分。

如果你不好理解，我们可以这样认识，React 组件只是 JavaScript。让我们看看如何从 JavaScript 的角度编写 React 组件：

创建组件

在 React 中，组件是函数。在标签 script 中，创建一个名为 header ：

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>你好</h1>);
</script>

组件是返回 UI 元素的函数。在函数的 return 语句中，可以写 JSX：

<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() 方法中的第一个参数传递：

<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：

function Header() {
  return <h1>你好</h1>;
}
 
const root = ReactDOM.createRoot(app);
// Capitalize the React Component
root.render(Header);

其次，你使用React组件的方式与使用常规HTML标签的方式相同，带有尖括号 <> ：

function Header() {
  return <h1>你好</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

再次运行，这回我们看到界面显示正常。

嵌套组件

应用程序通常包含比单个组件更多的内容。你可以像嵌套常规 HTML 元素一样将 React 组件嵌套在一起。

我们创建一个名为 HomePage的组件

function Header() {
  return <h1>你好</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

然后将 <Header> 组件嵌套在新 <HomePage> 组件中：

function Header() {
  return <h1>你好</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* 嵌套组件 */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

组件树

你可以继续以这种方式嵌套 React 组件以形成组件树。

Next.js14从入门到实战003：React基础篇之React入门

例如，顶级 HomePage 组件可以包含 、 Header Article 和 组件 Footer 。这些组件中的每一个都可以有自己的子组件，依此类推。例如， Header 组件可以包 Logo 和 Title Navigation 组件。

这种模块化格式允许您在应用内的不同位置复用组件。

在项目中，由于 <HomePage> 现在是顶级组件，因此可以将其传递给 root.render() 方法：

function Header() {
  return <h1>你好<h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);