How to use custom JSX elements ?
Last Updated :
16 Nov, 2023
JSX is an extension of the JavaScript language which is useful to write React applications. JSX consist of tags, attribute, and children. We can also create our own custom elements in React.
A custom element gives us a new HTML tag in the JSX file that we can control through a native browser API.
Prerequisites:
Approach:
Initially, what we have to do is to define and form a custom element. To do so we create a class that extends the HTMLElement class and then give the name of the element with customElements.define(). We have three methods to expand the functionality of this element created using custom. There are two lifecycle-like methods that are useful to us the disconnectedCallBack and the connectedCallback and since this is a class, it comes with a constructor.
Constructor: An instance of the element being created or upgraded. Useful for initializing state, setting up event listeners, or creating Shadow DOM. See the spec for restrictions on what you can do in the constructor.
connectedCallback: The element is inserted into the DOM. Useful for running setup code, such as fetching resources or rendering UI. Generally, you should try to delay work until this time
disconnectedCallback: When the element is removed from the DOM. Useful for running clean-up code.
Steps to Create a React Application
Step 1: Create a React application using the following command:
npx create-react-app example
Step 2: After creating your project folder i.e. example, move to it using the following command:
cd example
Step 3: Create a folder component inside the src folder of reacting project directory and inside the components folder create files Counter.jsx and ImperativeCounter.jsx
Project Structure:
Example: This example implements custom JSX element in the imparativeCounter.jsx file
Javascript
import React from "react" ;
import ReactDOM from "react-dom" ;
import "./index.css" ;
import App from "./App" ;
import "./components/ImperativeCounter" ;
import reportWebVitals from "./reportWebVitals" ;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById( "root" )
);
|
Javascript
import React from "react" ;
import Counter from "./components/Counter" ;
function App() {
return (
<div className= "App" >
<Counter />
</div>
);
}
export default App;
|
Javascript
import React, { useRef } from "react" ;
function Counter() {
const counterElement = useRef( null );
const incrementCounters = () => {
counterElement.current.increment();
};
const decrementCounters = () => {
counterElement.current.decrement();
};
return (
<div>
<div>
<h5>Imperative Counter</h5>
<i-counter ref={counterElement}></i-counter>
</div>
<button
onClick={incrementCounters}
className= "btn btn-primary"
>
Increment
</button>
<button
onClick={decrementCounters}
className= "btn btn-primary"
>
Decrement
</button>
</div>
);
}
export default Counter;
|
Javascript
class ImperativeCounter extends HTMLElement {
constructor() {
super ();
this .shadow = this .attachShadow({ mode: "open" });
this .currentCount = 0;
this .update();
}
update() {
const template = `
<style>
.counter {
font-size: 25px;
}
</style>
<div class= "counter" >
<b>Count:</b> ${ this .currentCount}
</div>
`;
this .shadow.innerHTML = template;
}
increment() {
this .currentCount++;
this .update();
}
decrement() {
this .currentCount--;
this .update();
}
}
window.customElements.define(
"i-counter" ,
ImperativeCounter
);
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: This output will be visible on the http://localhost:3000/ on the browser window.
Output
There we have created a custom element that manages its own state and reflects that state back to the user while giving us an HTML element to use in our JSX.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...