A minimalistic JavaScript library to provide basic JSX-like functionality for building web components.
- Basic Components: Create and render lightweight components directly to the DOM.
- Event Binding:
- Bind various event handlers (e.g.,
onClick
,onKeyUp
,onChange
) to components. - Automatic recognition and binding of functions prefixed with
on
.
- Bind various event handlers (e.g.,
- Attributes and Properties:
- Utilize
className
for JSX compatibility, which translates to theclass
attribute in HTML. - Effortless addition of other properties as HTML attributes (like
id
,type
, etc.).
- Utilize
- Component Registration: Register components for their use as custom JSX tags.
- JSX Syntax Support: Design components using JSX syntax, facilitated by Babel.
- Component Separation: Maintain a clean project structure by separating code into distinct component files.
- Modular Approach: The library's design supports modular expansion and easy modification.
Ensure you have a basic understanding of JavaScript, HTML, and JSX.
- Clone the repository:
git clone https://github.com/afifudinmtop/SimpleJSX.git
- Include the library in your HTML file:
<script src="./SimpleJSX.js"></script>
- If you're using JSX syntax, ensure you also include Babel for transpilation:
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
- Write your JSX code within a
text/babel
script tag:
<script type="text/babel">
// Your JSX code here
</script>
You can define a component using a simple function. For instance, to create a button component:
function MyButton() {
return (
<button className="my-btn" onClick={() => alert("Button clicked!")}>
Click Me!
</button>
);
}
SimpleJSX.define("MyButton", MyButton);
After defining your component, you can render it to any container in your HTML:
// Assuming you have a <div id="app"></div> in your HTML
const appContainer = document.getElementById("app");
SimpleJSX.render(MyButton, appContainer);
This will display a button inside the app
div, and clicking the button will show an alert.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
MIT License