CREATE A LIBRARY WITH JSX & CUSTOM STATE

Rahul Sharma (DevsMitra)
7 min readNov 27, 2023
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…

--

--

Rahul Sharma (DevsMitra)
Rahul Sharma (DevsMitra)

Written by Rahul Sharma (DevsMitra)

I’m a technology enthusiast who does web development. Passionate to contribute to open-source projects and make cool products.

No responses yet