https://github.com/fabiosantoscode/tjsx
Like mikeal's bel but for React. Tired of compiling JSX in development? Use this!
https://github.com/fabiosantoscode/tjsx
Last synced: 6 months ago
JSON representation
Like mikeal's bel but for React. Tired of compiling JSX in development? Use this!
- Host: GitHub
- URL: https://github.com/fabiosantoscode/tjsx
- Owner: fabiosantoscode
- Created: 2016-11-20T15:58:51.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-28T21:10:03.000Z (about 7 years ago)
- Last Synced: 2025-06-15T18:18:55.668Z (8 months ago)
- Language: JavaScript
- Size: 163 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tjsx
[](https://travis-ci.org/fabiosantoscode/tjsx)
Use React without a transpiler!
## Features
- No transpilation required! ES6 tagged template string literals are a part of the language!
- Works on client, server and native.
- Interops with your existing JSX code. No need to rush!
- Tiny codebase - you can hope to understand it if you have any problems, and there's a smaller chance of there being bugs.
- `xml:id` and other XML namespaced attributes simply work! Also SVG namespaced tags such as `` just work.
## Example
```javascript
const tjsx = require('tjsx')
// Look ma, no transpilers!
function YourComponent({ kind }) {
const className = `foo foo__${kind}`
return tjsx`
this.onClick(e)} />`
}
```
## Interpolating strings
```javascript
const tjsx = require('tjsx')
function AmazingTitle({ name = 'Fábio' }) {
return tjsx`
Hello, ${name}
`
}
```
## Using other components
```javascript
const tjsx = require('tjsx')
const OneComponent = require('react-some-component')
function AnotherComponent() {
return tjsx`
foo!`
}
function ParentComponent(props) {
return tjsx`
<${OneComponent} prop1="foo">
${props.children}
>
<${AnotherComponent} />
`
}
```