CREATE A LIBRARY WITH JSX & CUSTOM STATE
The core of any JavaScript framework is the state, which plays a vital role in web application development. The state determines what to render on the screen and when to render. This article explores the implementation of a state similar to React in vanilla JavaScript and its integration with the JSX template engine.
If you are not familiar with the JSX template engine, you can check out my article, “How to create JSX template engine from scratch”
What is state?
The state is a JavaScript object that holds application data. Any change in the state updates the application’s UI. This article focuses on creating a signal state object responsible for holding application data, with state changes triggering UI updates.
The hooks pattern, specifically useState and useEffect, will be followed to implement a React-like state.
useState: Creates the state, taking the initial state as an argument and returning the current state along with the function to update it.
useEffect: Tracks state changes, executing a…