Home >Web Front-end >JS Tutorial >Noor JS The New JavaScript UI library
NoorJs a lightweight UI JavaScript framework designed to help you build fast, efficient, and scalable applications. NoorJs is built around the concept of First-Time-Rendering, which means your component is rendered once at the start and won't be re-rendered unless you explicitly choose to. You have full control over when and how your components are rendered, allowing for optimized performance.
Unlike other frameworks, NoorJs renders components directly to the DOM without relying on a Virtual DOM (VDOM). You can modify your component's view effortlessly by calling a simple function, without triggering a re-render.
NoorJs also introduces a powerful way to manage state. You can listen for changes to specific states and react accordingly, ensuring your components stay in sync with your data. Additionally, lifecycle functions enable you to perform tasks like data fetching or state updates at key points in your component's lifecycle.
Sharing data between components is made incredibly simple with the Channel API. Whether you're passing data to child components, parent components, or components outside of the direct scope, the Channel API allows for seamless and efficient data flow.
Continue reading these docs to explore how NoorJs can transform your approach to building modern web applications.
Key Features :
This's simple counter app will show you the power of 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 />]);
In this simple counter app we initialized our App component by using the element plug function then we created the counter state with 0 as initial value ,then we added an onClick event listener with setEvent function to increase the counter state and rerender the component with this.render method (This Is The Power Of NoorJs. Render It When You Need It) then we returned JSX.
NoorJs treats each component as an HTML element that you choose when you initialize your component. For more examples see the Documentation
? NoorJs is still under development and it has many bugs and issues and needs your help and contributions to make it stable
Please see the Issues and get started by contributing to it
GITHUB
https://github.com/MESSELMIyahya/NoorJs
The above is the detailed content of Noor JS The New JavaScript UI library. For more information, please follow other related articles on the PHP Chinese website!