Noor JS La nouvelle bibliothèque d'interface utilisateur JavaScript

NoorJs un framework JavaScript d'interface utilisateur léger conçu pour vous aider à créer des applications rapides, efficaces et évolutives. NoorJs est construit autour du concept de premier rendu, ce qui signifie que votre composant est rendu une fois au début et ne sera pas restitué à moins que vous ne le choisissiez explicitement. Vous avez un contrôle total sur le moment et la manière dont vos composants sont rendus, ce qui permet d'optimiser les performances.

Contrairement à d'autres frameworks, NoorJs restitue les composants directement dans le DOM sans s'appuyer sur un DOM virtuel (VDOM). Vous pouvez modifier la vue de votre composant sans effort en appelant une simple fonction, sans déclencher un nouveau rendu.

NoorJs introduit également un moyen puissant de gérer l'état. Vous pouvez écouter les modifications apportées à des états spécifiques et réagir en conséquence, garantissant ainsi que vos composants restent synchronisés avec vos données. De plus, les fonctions de cycle de vie vous permettent d'effectuer des tâches telles que la récupération de données ou les mises à jour d'état à des moments clés du cycle de vie de votre composant.

Le partage de données entre composants est rendu incroyablement simple grâce à l'API Channel. Que vous transmettiez des données à des composants enfants, à des composants parents ou à des composants en dehors de la portée directe, l'API Channel permet un flux de données transparent et efficace.

Continuez à lire ces documents pour découvrir comment NoorJs peut transformer votre approche de la création d'applications Web modernes.

Caractéristiques principales :

• Bibliothèque légère
• Premier rendu
• Composants basés sur des éléments
• Rendu DOM direct
• Modification de la vue sans effort
• Gestion d'état puissante
• API de canal
• Contrôle du rendu explicite
• Fournit des fonctionnalités de framework modernes comme JSX

Cette application de compteur simple vous montrera la puissance de NoorJs

import { createRoot, renderRoot, element, Component } from "@noorjs/core";

// app component
function App(this: Component) {
  // initializing the component by call the element plug function and setting the component HTML tag
  element("div", this);
  // setting a counter state
  const { getCounter, setCounter } = this.state(0);

  // adding an event listener to increase the counter state whenever the component is clicked
  this.setEvent("onClick", () => {
    // increasing the counter state
    setCounter((c) => c + 1);
    // rerendering the app when the counter is clicked
    this.render();
  });

  console.log("This runs once");

  // returning an arrow function that returns the JSX to be rendered
  return () => <h2>{getCount()}</h2>;
}

// creating the root
const root = createRoot();

// render the component
renderRoot(root, [<App />]);

Dans cette application de compteur simple, nous avons initialisé notre composant App en utilisant la fonction element plug, puis nous avons créé l'état du compteur avec 0 comme valeur initiale, puis nous avons ajouté un écouteur d'événement onClick avec la fonction setEvent pour augmenter l'état du compteur et restituer le composant. avec la méthode this.render (This Is The Power Of NoorJs. Rendez-le quand vous en avez besoin), puis nous avons renvoyé JSX.

NoorJs traite chaque composant comme un élément HTML que vous choisissez lors de l'initialisation de votre composant. Pour plus d'exemples, consultez la documentation

? NoorJs est encore en cours de développement et présente de nombreux bugs et problèmes et a besoin de votre aide et de vos contributions pour le rendre stable

Veuillez consulter les problèmes et commencez en y contribuant

GITHUB
https://github.com/MESSELMIyahya/NoorJs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!