@composi/core:
Instalación
Composi/core es Pequeño
Cuando instalas @composi/core solo estás agregando 2KB al JavaScript de su proyecto final. Eso significa que el JavaScript de una aplicación Hola Mundo será de solo 2 KB. El tamaño pequeño de Composi significa que se carga rápidamente, incluso en teléfonos viejos con conexiones deficientes. A pesar de su tamaño, @composi/core ofrece una gran cantidad de funciones para crear aplicaciones complejas y potentes. Esto significa que la mayor parte del JavaScript en tu proyecto deberá ser el código que escribiste, y no lo de las bibliotecas. En el mundo de los celulares, lo pequeño es útil.
No Hay que Instalar
La mejor manera de comenzar a utilizar @composi/core es crear un nuevo proyecto con @composi/ reate-composi-app. Lea la documentación de create-composi-app para aprender cómo empezar rápidamente.
Para usar @composi/core, necesitas importarlo. Un proyecto creado con @composi/ reate-composi-app ya tiene
un archivo-app.js-con el núcleo importado: h y render. Pero si creas un nuevo archivo para un componente que
utiliza JSX, tendrás que importar la función h de @composi/core.
import { h } from '@composi/core'
// Define el componente aquí:
Si vas a crear un módulo que no utiliza JSX, entonces no hay porqué importar la función h.
Una vez que haya creado un nuevo proyecto con @composi/create-composi-app, lea sobre render y otra documentación en esta sección para aprender cómo usar @composi/core.
En el Navegador
Puedes usar @composi/core en el navegador sin instalación ni compilación. Tan sólo incluyes las versiones de distribución con una etiqueta de script::
<script src='https://unpkg.com/@composi/core@latest/dist/composi.js'></script>
<script src='https://unpkg.com/@composi/datastore@latest/dist/datastore.js'></script>
<script src='https://unpkg.com/@composi/fragment@latest/dist/fragment.js'></script>
<script>
const { h, render } = composi
const { DataStore } = datastore
// No hay que captar Fragment en un variable ya que es un global.
function ÍtemesDeLista(data) {
return (
Fragment(
null,
{
data.map(ítem => h('ul', {}, ítem))
}
)
)
}
const cosas = ['Manzanas', 'Zapatos', 'Computadoras']
function Lista(data) {
return (
h('ul', {class: 'lista'}, ÍtemesDeLista(data))
)
}
render(Lista(cosas), 'body')
</script>
Cuando importas Composi de esta manera, no puedes usar JSX sino tienes que usr la función h
para definir el marcado.