https://github.com/spaceface777/jsxlite

Use JSX to create DOM elements without importing a huge library like React
https://github.com/spaceface777/jsxlite

jsx npm-module

Last synced: 4 days ago
JSON representation

Use JSX to create DOM elements without importing a huge library like React

• Host: GitHub
• URL: https://github.com/spaceface777/jsxlite
• Owner: spaceface777
• License: mit
• Created: 2019-11-24T13:03:21.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-31T13:45:57.000Z (about 5 years ago)
• Last Synced: 2025-01-23T01:18:34.011Z (5 days ago)
• Topics: jsx, npm-module
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/jsxlite
• Size: 28.3 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# JSXLite

Use JSX to create DOM elements without importing a huge library like React

 - VERY small footprint (<350 bytes minified + gzipped)

 - 0 dependencies

 - TypeScript support (typings included with library)

## Features

**This library does not aim to be another React-like framework, and therefore many of React's core features have been completely left out. Instead, it aims to be a lightweight tool for those people (like me) who want to use JSX to create DOM elements, but don't want to install a huge, bloated library to do so. If you want a full web framework, this library is probably not meant for you.**

#### Features included

- Using JSX to create elements

- Functional components

    - Passing custom props to these components

- HTML attributes, props...

- A complete, well-tested TypeScript type definition

#### Features not included

- A virtual DOM implementation

    - A component's internal state

- Class components (useless if state isn't implemented)

## Usage

1. Install the library

    ```sh

    npm install jsxlite

    ```

2. *(TypeScript)* Add the following to your `tsconfig.json`: 

    ```json

    "compilerOptions": {

        "jsx": "react",

        "reactNamespace": "JSX"

    }

    ```

3. Import the library at the top of whichever `.jsx` or `.tsx` file you want to use it in:

    ```ts

    import JSX from "jsxlite"

    ```

4. You can now use JSX!

    ```tsx

    const b = 
JSX works now!


    document.body.appendChild(Hi there)

    ```

## Function components

Function components are supported by the library, which means that you can create functional components and pass props to them like you would in React.

***Note: The function name must start with an uppercase letter, as this is how a function component is differentiated from a regular HTML element.***

```tsx

interface ExampleProps {

    name: string;

    version: string;

}

function Example (props: ExampleProps) {

    const features = [

        "lightweight",

        "easy to use",

        "simply amazing!"

    ]

    return (

        


            
Hello there!

            
This is the {props.name} library, version v{props.version}

            
It has many great features:

            


                {features.map(f => 
{'It is ' + f}
)}

            

        

    )

}


document.body.appendChild()

```