https://github.com/mattjennings/replay-jsx
Use JSX with Replay
https://github.com/mattjennings/replay-jsx
Last synced: 29 days ago
JSON representation
Use JSX with Replay
- Host: GitHub
- URL: https://github.com/mattjennings/replay-jsx
- Owner: mattjennings
- Created: 2020-07-06T01:23:31.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-15T01:47:44.000Z (almost 5 years ago)
- Last Synced: 2025-04-08T19:31:49.614Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 711 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# replay-jsx
Use JSX syntax with [Replay](https://github.com/edbentley/replay)
## Installation
`yarn add -D replay-jsx`
## Setup
### Babel
Create a .babelrc
```json
{
"plugins": ["replay-jsx/babel"]
}
```
If you're using webpack make sure you have `babel-loader` setup. If you're using `ts-loader`, you can view an
example of how to configure it [here](/example/web/webpack.config.js)
### Typescript
Update your tsconfig to have the following:
```json
{
"compilerOptions": {
"target": "es6",
"jsx": "preserve"
}
}
```
To get the types for JSX properly working you just need to import `replay-jsx` anywhere in your project (such as your `index.tsx` file)
```ts
import "replay-jsx";
```
## Usage
```jsx
import { makeSprite } from "@replay/core";
const Player = makeSprite({
render({ props }) {
return (
<>
>
);
},
});
const Game = makeSprite({
render() {
return (
<>
>
);
},
});
```