Original Post on bluesky
Using the Ember Assistant custom GPT, you can one-shot convert React components to Ember components.
For example, I asked the Ember Assistant, simply:
Can you convert this React component to Ember?
```jsx
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<>
<div>This is our counter Application</div>
<div>
<button onClick={decrement}>-</button>
<span>Clicks {count}</span>
<button onClick={increment}>+</button>
</div>
</>
);
}
```
And this was Chat GPT's response -- which is not only correct, but also fixes a couple bugs!:
Here's a modern Ember (Polaris edition) version of your React Counter component using the .gjs format:
app/components/Counter.gjs
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class Counter extends Component {
@tracked count = 0;
increment = () => {
this.count++;
};
decrement = () => {
this.count--;
};
<template>
<div>This is our counter Application</div>
<div>
<button type="button" {{on "click" this.decrement}} aria-label="Decrease count">-</button>
<span>Clicks {this.count}</span>
<button type="button" {{on "click" this.increment}} aria-label="Increase count">+</button>
</div>
</template>
}
Notes:
- Uses @tracked for reactivity.
- Uses arrow functions for actions (increment, decrement) — no need for the @action decorator.
- The buttons use type="button" and aria-label for accessibility (important in Ember too).
- Everything lives in a single .gjs file — ideal for Polaris.
Let me know if you’d like to see this in classic .js + .hbs Octane format too!
NOTE: it seems dev.to doesn't render gjs 🤔