¿Qué es Astro y cómo empezar?
6415 단어 webdevastronewsjavascript
La tecnología evoluciona todos los días, siempre hay algo nuevo y esta vez es Astro! 🤯
Esta tecnología esta siendo muy bien aceptada en la comunidad, ya tiene más de ⭐ 3k estrellas en GitHub.
¿예를 들어?
Astro: “Un nuevo tipo de creador de sitios estáticos que ofrece un rendimiento ultrarrápido con una experiencia de desarrollador moderna.”
Puedes leer con más detalles en laintroducción a Astro .
Astro는 HTML estático에서 컴파일 작업을 수행하는 순간에 JavaScript를 사용하기 시작했습니다.
Librería(React, Vue, Svelte 등)의 cualquier 프레임워크를 사용하는 데 관심이 있는 경우 응용 프로그램을 사용할 수 있습니다.
Hasta usar varios frameworks en un mismo proyecto.
예를 들면:
Todo.jsx Todo.vue Todo.svelte Esto me parece muy interesante, aunque dudo que sea bueno mezclar. 🤔
Astro의 초기 프로젝트
⚠️ 중요
La versión mínima de Node.js que se requiere es la 14.15.1.
# Inicializamos Astro
npm init astro
# Instalamos las dependencias
npm install
# Ejecutamos el servidor local
npm start
우소
기본 권장 구성:
├── src/
│ ├── components/
│ └── pages/
│ └── index.astro
├── public/
└── package.json
Dentro de Components agregaríamos nuestros archivos, por ejemplo un componente React y luego los importamos en un archivo
.astro .Así es como se ve un archivo .astro
---
import Nav from '../components/Nav.astro';
import TodoReact from '../components/Todo.jsx';
import TodoSvelte from '../components/Todo.svelte';
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Astro</title>
</head>
<body>
<header>
<!-- Colocamo nuestro componente Astro -->
<Nav />
</header>
<div class="contentTodo">
<!-- Colocamo nuestro componente React -->
<TodoReact:visible />
<!-- Colocamo nuestro componente Svelte -->
<TodoSvelte:visible />
</div>
</body>
</html>
Prácticamente es HTML, solo que al principio del archivo colocamos el JavaScript dentro de un bloque de guiones (
--- ).라우팅
El enrutamiento ocurre dentro de
src/pages/* los archivos .astro se convierten en .html estático.Por ejemplo tienes lo siguiente:
index.astro about.astro 404.astro Los archivos de esta carpeta se는 URL pública와 통신합니다.
예시:
Archivo 로컬
URL 퍼블리카
src/pages/index.astro/index.html¡Astro tiene muchas características más!
더 많은 정보
결론
Hay muchos temas más para cubrir, pero espero que este breve artículo pueda servir como para entender un poco Astro y como empezar.
Esta tecnología es muy nueva, es probable que haya algunos errores, pero el equipo de astro está trabajando duro todos los días.
¡살루도스!
Reference
이 문제에 관하여(¿Qué es Astro y cómo empezar?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/franqsanz/que-es-astro-1d8g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
