Zero Build Frontend (Grade A)Gözden geçmiş geliştirme yeteneği Claude AI için. Grade A. Kılavuz CDN yüklü React, Tailwind CSS ve basit JavaScript. Satıcı olarak statik web uygulamaları oluşturırken kullanın

Sıfır oluşturma ön uç geliştirmesi ile CDN yüklenmiş React, Tailwind CSS ve basit JavaScript'i birleştirin. İleri düzey web uygulamaları oluşturmak için sıfır oluşturma ön uç geliştirme tekniklerini kullanın. Leaflet haritaları oluşturun, Google Sheet'ler'i veri tabanı olarak entegre edin ya da browser eklentileri geliştirin. Rosen-öntext, NJCIC harita ve PocketLink projelerinde kullanılan kalıpları kapsar. Sıfır oluşturma ön uç geliştirme, üretken kalitede web ứngulamaları oluşturmak için bina aracı, binaççı veya karmaşık aracı zincirlerinden yararlanmadan yapma tekniğidir. Stack Seçmek Üç sıfır oluşturma ön uç yaklaşımı vardır. Her biri farklı kazancı var: Stack Nedir? Paket boyutu etkisine React ile esm.sh + htm Component-heavy SPAs, mevcut React mental modeli, Tailwind stillemesi ~50 KB sıkıştırılmış (React + ReactDOM + htm) htmx 2.x + sunucu tarafı HTML CRUD uygulamaları, geleneksel MPA akışları, server-side gerçekliği isteyen ~14 KB sıkıştırılmış (htmx alone) Alpine.js 3.x + basit HTML Hafif interaktivite mostly-statik sayfaları arasında eklersiniz, tam SPA desteği olmayan ~15 KB sıkıştırılmış (Alpine alone) htmx ile Alpine.js aynı sayfada karıştırabilirsiniz htmx sunucu etkileşimini, Alpine.js istemci tarafı UI durumunu ele alır. many üretim sitesiyle bu kombinasyona convergirler. ESM import haritaları Import haritaları, <script type="module"> içerisinde import x from 'react' yazmayı gerektirmeyen import haritalarını browserın çözmeyeceği, esm.sh'a göre belirtmek sağlar. Tüm büyük tarayıcılarda 2023'ten beri stabildir. <script type="importmap"> { "imports": { "react": "https://esm.sh/react@19.0.0", "react-dom/client": "https://esm.sh/react-dom@19.0.0/client", "lodash-es": "https://esm.sh/lodash-es@4.17.21", "@my-app/": "/src/" }, "scopes": { "https://esm.sh/": { "scheduler": "https://esm.sh/scheduler@0.23.0" } } } </script> Alan bloğu, sub-arac zincirinin farklı şekilde çözülmesini sağlar. Bir CDN paketi için belirli geçişli bağımlılığa gerek olduğunda yararlıdır. İfade bloğu ile '@my-app/' öneki ile alt dizinin her dosyasını içe aktarabilirsiniz. Üretim için belirli versiyonları kullanın. esm.sh/react (versiyon belirtmediğiniz) ve esm.sh/react@latest, istek zamanında çözebilir ve sizin için değişebilir. Döndürülecek olan exact versiyonları ya da SHA-kilitli URL'leri kullanın. htmx 2.x sunucu tarafı interaktivitesi htmx 2.0 (June 2024), plain HTML'e AJAX, WebSoket'ler, SSE eklemenizi sağlar. hx-* atributleri ile server HTML fragmentlerini gönderiyor, client tarafı swap yapıyor. JS frameworkı gerektirmez. <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!--Click butonuna POST yapmak, servara yanıtı #result içine atmak --> <button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML">Click me</button> <div id="result"></div> <!--Arama yaparken 300 ms aralıktan debounce --> <input type="search" name="q" hx-get="/api/search" hx-trigger="input değişti delay:300ms" hx-target="#results" /> <div id="results"></div> <!--Sınırsız scroll--> <div hx-get="/api/items?page=2" hx-trigger="feshedildi" hx-swap="afterend"> ... </div> htmx 2.x, IE desteğini kaldırdı ve APIyi sıkılaştırdı. htmx 1.x'tan geçtiğinizde, migrate etmenize lüzüm yoksa, 1.x hala güvenlik patch'lerini alır. Yenisini kullanmak için 1.x hedeflemeye başlamalısınız. Alpine.js 3.x istemci tarafı reaktivite HTML'de Alpine.js (current 3.14+), Vue/React'ın minimalist alternative'ıdır. State ve behavior x-* atributleriyle HTML içerisinde yaşıyor. <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script> <!--Gizliliği değişikliği--> <div x-data="{ açık: false }"> <button @click="açık"></button>