星星的第一步-DEV365 开发者社区

什么是星星

Astro是创建动态站点的工具，我们可以在其中使用一个或多个将零JavaScript发送到客户端的框架，甚至仅使用HTML，CSS和JavaScript（如果您尚不熟悉框架）。

。

但是，如果JavaScript在服务器端编译，我们如何使网站交互式？

对此有益的恒星具有一个名为Compond Islands的网络建筑标准，在这里，母岛可以存在于Padga中，每个岛屿都孤立地呈现。

在此示例中，我们的标题，侧栏和旋转木马具有交互作用，JavaScript在客户端有水分，但是其他所有内容都会在服务器端渲染。

在我开始描述框架本身及其操作之前，这是您需要知道的知识才能轻松理解这一部分：

很好，现在您是在必要的妈妈身上了解星星，让我们去凉爽的部分，开始使用恒星非常简单，您只在终端上运行此命令：

 npm create astro@latest

然后，他要求您选择一个直接的，如果您想在第一步指导您，我强烈建议您使用样板，因为一切都更加幻想

这将生成与我们在其他框架中发现的样板，以及诸如src/'之类的文件夹结构，以容纳项目的所有过程，公共/我们的资产位置和方向页面/容纳我们项目的所有页面等等..

看到这个方向是文件收到的扩展时，什么是什么？考虑到最简单的可能，此组件语法不过是我们已经知道的纯HTML超集。

它由3个部分组成，这是第一个被Trans Track所包围的部分，我们处理了我们要在服务器端的启动中包含的所有JavaScript，创建数组，反映API或使用本地Markdown文件;我们要在此组件中写的HTML，最后是标签样式来编写我们的CSS，使用所有3个字段的一个小例子就是这样。

对HTML和纯CSS仍然很奇怪的东西是我们十字架周围的标签布局，我们传递给它的标题比听起来要简单得多，在开发过程中的最佳体验中思考，标签是一个涵盖所有页面中将重复使用的所有内容的组件。假设我们有一个Navbar，页脚和一个标签头，所有页面共享，我们的布局看起来像这样：

还记得我们在布局标签中传递了HTML页面的标题吗？在这里，我们创建了要接收的差异，作为道具（与React非常相似），并使用标题标签中的差异为我们的padga提供标题，并且插槽标签照顾了我们的HTML，这是标签布局的儿子。<<<<<<<<<<<<<<<<< /p>

但是，标签布局不需要具有标签头，车身，CSS或JavaScript，它只是该框架用于模式来定义HTML页面的结构的可重复使用的组件，如果您喜欢免费使用HTML页面。

如果星星已经是一个框架，为什么我要在他身上添加一个框架？好吧，由于他的前提是服务器端渲染和保湿必要的JavaScript，因此您可以在任何您喜欢的框架中自由编写UI组件，并在必要时进行保湿，因此，当我们将所有前端的知识都重复使用时正在用星星编写网络应用。

现在您已经知道了星星如何组织事物，一定想知道如何在其中添加您喜欢的框架，其他所有内容都非常简单，只需在终端上运行此命令：

npx astro add react

随时可以用要添加到项目中的任何其他框架，例如Svelte，Solid，preact，Vue

按照框架安装的步骤-by步骤，只需在页面中创建一个具有相应扩展名的组件

请注意，我们可以在星文件中具有每个框架的组件，然后您想学习一个新框架，我发现它是测试您的想法的好方法。最后，要在客户端使用JavaScript，我们需要选择渲染恒星混合动力车的三种方法之一。

<!-- Dessa forma o javascript vai ser carregado junto da pagina -->
  <MeuComponenteReact client:load />

<!-- Dessa forma ele renderiza somente depois do html ser renderizado -->
  <MeuComponenteReact client:idle />

<!-- Só renderiza o javascript caso o componente esteja visivel na tela -->
  <MeuComponenteReact client:visible/>

最近，我想到了在我的投资方进行了改造的想法，我想要一些简约的东西，但我想寻找更多的灵感，最终发现了一种名为Neo-Bructalism和的设计风格我开始在无花果上画出它，看看我的脑海中发生了什么

在为我的投资组合寻找灵感时，我想知道：我会使用下一个框架去做吗？我会使用动物吗？我在页面上需要复杂的东西吗？我最终回答了所有这些答案，最终在途中得到了一点，因为我不想在HTML和Pure CSS中写下它，我想要更好投资组合，这样我最终知道了星星。

我希望您喜欢恒星的操作及其好处，对我有很大了解，这是一个名为Fireship的频道的视频，它以最简单的方式解释了我将在下面链接的最简单的方式，我也感谢到@felipperegazio通过在下一篇文章中审查本文来帮助我。

reveraimes：