[{"_1":2,"_68":-5,"_69":-5},"loaderData",{"_3":4,"_38":39,"_66":-5,"_67":-5},"root",{"_5":-5,"_6":-5,"_7":8,"_22":23,"_24":25,"_26":27,"_30":31,"_36":37},"user","shoppingCartId","shoppingCart",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":14},"id","no-cart","count",0,"free",true,"updatedAt","","paymentGateway","STRIPE","cartItems",[],"loading","locale","en","readerTheme","light","constants",{"_28":29},"paypalClientId","AX53Cwz8jR6rVVzzZiZNWWXl0dGagi-GZrjG-S3Ua14E5nrKMn7DxDQ730O4R8LusLPp49ALn6aRVaEy","publishers",{"_32":33,"_34":35},"companies",[],"universities",[],"needsLocaleCookieSync",false,"routes/_store+/_readers+/email_author.$slug/route",{"_40":41,"_65":-5},"book",{"_9":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52},"Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6Qm9va1Byb2R1Y3QvNTEzODA","title","Getting started with Alpine.js 3: your lightweight JavaScript framework for reactive interfaces","state","published","contactAuthorMethod","email","aboutText","

Do you want reactive interfaces without pulling in a heavy framework like React or Vue for every button, modal, or dropdown? Alpine.js 3 lets you add modern interactivity using just HTML and a bit of JavaScript. In this book you will go from the core directives (x-data, x-show, x-model) to advanced patterns with Alpine.data, Alpine.store, and Alpine.reactive, building real components like menus, modals, a full To‑Do List app, and small projects styled with Tailwind CSS.

Alpine is a client-side JavaScript framework that allows us to create JavaScript applications with their reactive and declarative component-based nature. Alpine.js contains an HTML DOM manipulation library that makes it easy for us to interact with it declaratively with less code.

Alpine.js offers us a modular scheme for our projects and to be able to easily extend them with more functionalities.

It is a framework that, by using JavaScript, brings us its benefits of a clean, clear, flexible and scalable syntax through plugins.

In this book, we are going to learn how the framework is formed, the basic characteristics that Alpine.js allows us as a client web framework through small examples that will allow us to know and master this technology.

Map

The book has a total of 5 chapters (still in development):

Chapter 1 - About Alpine.js: In this chapter we are going to talk about Alpine.js, as well as its main features and how we can use it.

Chapter 2 - Principals Directives: In this chapter we are going to know the main directives in Alpine.js.

Chapter 3 - Application To Do List: In this chapter we are going to create a to do list project, in which we will implement the previously seen directives.

Chapter 4 - Advanced Alpine.js: Architecture, State, and Production: Master the advanced features of Alpine v3: extract logic with Alpine.data(), share global state with Alpine.store(), consume APIs with Fetch, and apply the best practices that every professional project demands.

Chapter 5 - Projects in Alpine.js with Tailwind.css: In this chapter we are going to create several projects in Alpine to put into practice what was explained in previous chapters.

","authors",[53],{"_9":54,"_55":56,"_5":57},"Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci81NDMwMg","name","Andrés Cruz Yoris",{"_58":59},"avatar",{"_60":61,"_62":63,"_64":14},"url","https://d39qdlcrvnra4b.cloudfront.net/avatars/2508444/medium/vn2LgXaB_400x400.jpg?1646511308","styleName","medium","exists","currentUser","routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Email the Author