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 Applicationdiv>
      <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--;
  };

  
    This is our counter Application
    
      -
      Clicks {this.count}
      +
    
  
}

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 🤔