如何使用Astro构建React网络应用程序而不需要运送Javascript

DebugUsery
708 阅读6分钟

如何使用Astro构建React Web应用而不使用Javascript

终端用户喜欢快速和响应的网络应用。但作为开发人员，我们可能会使用各种工具，导致建立一个复杂的网站。这降低了网络应用的性能。

Astro是一个新开发的工具，为网络应用程序的性能提供了解决方案。

什么是Astro

Astro是一种新型的基于Javascript的静态网站生成器，它提供了超快的性能，同时也提供了现代的开发者体验。

静态网站生成器是一种从一组组件生成静态HTML网站的工具。客户端提前生成网页，而不是在服务器上渲染。这减少了加载时间，减少了终端用户的资源，并提高了性能。

除了作为一个静态网站生成器，Astro的一个独特功能是，你可以使用你最喜欢的Javascript框架（如React、Angular、Svelte或Vue）构建你的网站用户界面（UI），Astro会在构建时将你的网站渲染成静态HTML。

网页在浏览器中的某些地方需要客户端的Javascript，比如。

  • 提交一个表单
  • 登录认证
  • 获取API

当一个组件需要Javascript实现某些功能时。Astro只渲染指定的组件，而将网页的其余部分渲染成静态HTML。

目标

你将学习如何使用Astro建立一个基本的静态网站。这个静态网站来自于一个编译好的基于React的网络应用程序。

你还将学习如何在Astro中获取数据，以及如何将动态道具传入React。

先决条件

  • 对React.js的基本了解。
  • 对命令行的基本了解。
  • 命令行或终端（Nodejs 14.15.1或更高）。
  • 一个代码编辑器（IDE）。我使用[VS Code]。
  • 谷歌浏览器。

安装

你需要安装Node.js的14.15.1或更高版本。访问Node.js官方网站，下载并安装最新版本的Node.js。它带有一个预装的节点包管理器（NPM）。

要检查Node.js是否安装以及安装的版本。

打开你的终端，输入下面的命令。

 
node --version

要验证NPM的安装和版本，请在你的终端输入以下命令。

 
npm --version

第1步 - 创建一个新的Astro项目

创建一个新的目录，该目录将包含所有已安装的依赖项。

导航到你的命令行，并键入下面这行。你可以在你的代码编辑器中使用集成终端。

 
mkdir astro-app

接下来，使用下面的命令导航到该目录。

 
cd astro-app

在你的终端键入下面的命令来初始化你的Astro项目。

 
npm init astro

上面的命令会提示一个信息，要求从模板开始。对于这篇文章，你将选择Starter Kit（Generic）。

astro-starting-template

上面的选择将提示另一条信息。该信息将询问你想使用的框架，如下图所示。

为这篇文章选择React。

select-framwork

然后Astro会复制一些项目文件来启动我们的项目。

在我们进一步行动之前。在终端键入以下命令。

这个命令会安装所需的软件包（依赖性）。

 
npm install

第2步 - 应用程序结构

在这一步，我们将对我们的应用程序的文件夹结构有一个概述。

我们有不同的文件夹，比如。

  • src
  • 组件
  • 页面
  • 公共
  • package.json

我们比较感兴趣的是。

  • src：它包含组件、布局和页面文件夹。src是我们项目源代码的位置。
  • 组件。这是在src文件夹里面。组件文件夹将包含我们的React UI组件。
  • pages。这是 src 文件夹中的内容。Pages文件夹包括index.astro，它是我们的入口。
  • astro.config.mjs：这是我们Astro项目的一个配置文件。它包含一个配置对象。
 
├── public/
│   ├── robots.txt
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── Tour.astro
│   └── pages/
│       └── index.astro
└── package.json

第3步--安装和配置我们的框架，使其与astro一起工作

我们将使用的框架是React。为了使Astro支持React，运行下面的命令。它安装了React渲染器和React。

 
npm install @astrojs/renderer-react react react-dom -D

在安装完React渲染器和React之后。导航到astro.config.mjs并将下面的代码添加到配置对象中。

 
export default {
 
renderers: ['@astrojs/renderer-react'],

呈现器做了以下工作。

  • 将你的组件转换为HTML字符串。
  • 当HTML到达浏览器时，对其进行补水。

第4步 - 启动我们的开发服务器

用下面的命令启动开发服务器。

 
npm start

当你第一次启动该项目时。Astro和Snowpack会准备好你的依赖项。然后，它将在http://localhost:3000/ 上启动开发服务器。

你可以导航到http://localhost:3000/，访问你的Astro项目。这将显示一些有用的信息和欢迎信息，如下图所示。

new-astro-project

第5步 - 在Astro中创建一个新的React组件

在这一步，你将创建一个React组件。React组件是React的主要构建块之一。它是以jsx格式编写的。它告诉React应该在屏幕上渲染什么。

有两种类型的React组件。

  • 类组件
  • 功能组件

在这篇文章中，我们将使用一个功能组件。

导航到主项目文件夹中的组件文件夹。在组件文件夹中创建一个Tours.jsx文件。

在你创建的Tours.jsx文件内添加以下内容。

 
import React from 'react';
 
const Tours = ({ tours }) => {
 
const [readMore, setReadMore] = React.useState(false)
 
return(
 
<step>
 
<div className="title">
 
  <h2>Our Tours</h2>
 
</div>
 
<div>
 
  {
 
    tours.map((tour) => {
 
      return (
 
          <article className="single-tour">
 
            <img width='400' src={tour.image} alt={tour.name} />
 
            <footer>
 
              <div className="tour-info">
 
                <h4>{tour.name}</h4>
 
                <h4 className="tour-price">${tour.price}</h4>
 
              </div>
 
              <p>
 
                {tour.info}
 
              </p>
 
            </footer>
 
          </article>
 
      )
 
    })
 
  }
 
</div>
 
</step>
 
)
 
};
 
export default Tours;

上面的代码是一个名为Tours的功能组件，我们传入一个名为tours的道具作为参数。上面的Tours函数将在网页中显示你的数据。

在Tours功能组件里面，我们有一堆jsx代码，我们将在下面解释。

  • tours.map。这是对作为道具传入的旅游的映射。
  • const [readMore, setReadMore] = React.useState（false）。这指定了两个状态变量。readMore的当前值为false。setReadMore使你能够改变当前值。你在后面的步骤中才会需要这个。
  • return。这指定了应该向浏览器呈现的内容。它包含一堆HTML结构。
  • tour.image。在tour道具的每个元素中指定名为image的变量。
  • tour.name: 在tour道具的每个元素中指定名为name的变量。
  • tour.price。这是在tour道具的每个元素中指定名为price的变量。
  • tour.info。在tours道具的每个元素中指定名为info的变量。
  • export default Tours。这将导出Tours.jsx组件。这使得它可以在其他组件中重复使用。

第6步--使用Astro获取并传递数据给你的React组件

在这一步，你将学习如何获取和传递数据给你上面创建的Tours.jsx组件。

导航到Tour.astro文件，在顶部你会看到上下三个破折号。

在这些破折号内，我们将写一些JavaScript代码，以获取我们的数据，如下图所示。

把下面的代码复制到Tour.astro文件中。

 
---
 
import { Markdown } from 'astro/components';
 
import  Tours  from './Tours.jsx';
 
const url = `https://course-api.com/React-tours-project`
 
const tours = await fetch(url).then(response => response.json())
 
---js
 
<article>
 
<step>
 
    <Tours tours={tours} />
 
</step>
 
</article>

让我们概述一下Tour.astro文件中的内容。

  • 从astro/components导入{ Markdown }。这导入了一个markdown组件，使我们能够在文件中写入markdown。这是Astro的一个综合功能。
  • 从'./Tours.jsx'导入Tours。这将导入上一步编写的Tour组件。这使我们能够把我们获取的数据作为一个道具传递给我们的旅游组件。
  • const url =https://course-api.com/React-tours-project: 这指定了我们将获取数据的应用程序编程接口（API）。
  • const tours = await fetch(url).then(response => response.json())。这是一个内置的Javascript函数，用于获取我们的数据。
  • <article></article>：这是一个HTML标签，它将包含并呈现其他HTML标签和我们导入的React组件。
  • <Tours tours={tours} : 这是一个HTML标签，它将包含并渲染其他HTML标签和我们导入的React组件。/>: 这指定了我们导入的React组件。在它里面，我们把tours作为一个道具传递，它包含我们获取的数据。现在我们的数据将作为静态HTML显示在浏览器中。

它将看起来像我们下面的内容。

displayed-project

现在来看看Astro是如何渲染你的网页的，按照下面的说明。

  1. 导航到你的浏览器的开发工具，你可以按F12获得快速访问。
  2. 在开发者工具的顶部，你会看到控制台后的网络。点击网络。
  3. 点击全部，它位于顶部。

你应该在你的开发者工具中看到下面的图片。

network-no-js

你会看到Astro并没有将Tours.jsx组件装入浏览器。Astro将我们的React组件作为一个静态HTML加载。

现在在Tour.astro中，在tours变量下面输入这些代码。

 
const tours = await fetch(url).then(response => response.json()) // tours variable
 
console.log(tours)   //type this

检查你的浏览器的控制台，你会看到没有任何东西被记录到控制台。

现在检查你的终端，你会看到所有的旅游数据都被记录到终端，就像我们下面所做的那样。

data-in-node

现在，如果Astro没有向我们的浏览器提供React或Javascript。我们如何将客户端的互动性添加到我们的网页上？

第7步--用Astro在客户端注入React

Astro将你的网页渲染成静态HTML。为了提供良好的用户体验，你需要在你的网页中加入互动性。Astro提供了这种互动性，它只渲染你想使之互动的组件到生成的静态HTML中。在Astro中提供这种互动性的过程被称为部分水化。

为了使我们的网页具有互动性。Astro为你提供了五（5）种不同的组件属性，它们是。

  1. 默认。只渲染HTML（例如）。当你的网页没有互动性时很有用。
  2. 加载。在网页加载时水化组件（如Mycoponent:load/）。当你的网页有交互性，需要与网页一起加载时很有用。
  3. visible。当网页是可见的（Mycomponent:visible/）时给组件加水。当互动性在网页的下半部分时很有用。
  4. idle：在网页空闲期间给组件加水（例如Mycomponent:idle/）。
  5. media=1234;QUERY：当媒体查询被匹配时给组件注水（例如Mycomponent:media=1234;QUERY）。对那些只应该在手机或桌面屏幕上显示的组件很有用。

在你的Tours.Jsx中，在<p>标签内将其从{page.info}改为下面的代码。

 
<p>
 
{readMore ? tour.info: `${tour.info.substring(0,200)} . . .`}
 
<button onClick={() => setReadMore(!readMore)}>{readMore ? 'read less' : 'read more'}</button>     
 
</p>

让我们快速浏览一下上面的代码。

  • readMore ? tour.info:`${tour.info.substring(0,200): 这使得<p>标签内的文本内容在readMore值为真时具有tour.info的完整字符，在readMore值为假时具有200的字符。你会在浏览器中看到，

    标签中的一些文本缺失，因为readMore的值为false。

  • <button onClick={() => setReadMore(! readMore)}>{readMore ?'read less' : 'read more'}</button>: 这是一个带有点击事件的按钮标签，点击时将readmore的值更新为与其当前值相反。同时，当readMore的值为真时，按钮标签的文本内容被更新为read less，而当readMore的值为假时，read more。

现在到你的浏览器上点击按钮元素。你会看到什么都没有发生。

为了看到按钮标签的功能，我们需要更新Tour . jsx组件在Tour.astro里面导入的一个组件属性，如下图所示。

 
<Tours:load tours={tours}>

刷新你的浏览器。现在你可以看到，<p>标签的文本内容完全显示出来。当我们再次点击时，我们看到它又回到了初始状态。

测试应用程序

你可以按照下面的步骤测试你的应用程序。

你应该看到你的网络应用程序显示在你的浏览器中。

如前所述，导航到开发者工具的网络部分。刷新浏览器。你会看到JavaScript，特别是React在网页加载完毕后加载。这表明Astro在网络性能方面是多么强大。

总结

这篇文章介绍了如何使用Astro来构建快速和可扩展的React网络应用。

你现在可以用这些知识来构建一个更动态、更强大的网络应用。你可以使用任何你喜欢的JavaScript框架。

你还可以继续使用Astro提供的其他组件属性，并从中获得乐趣。

Astro仍处于测试阶段，可以在没有警告的情况下改变。

avatar
文章
阅读
粉丝