From Svelte to React

pnpm create vite
# follow the prompts!

pnpm create svelte@latest my-app
cd my-app
pnpm install
pnpm dev

pnpx create-next-app

<div class="my-component">
  Hello World!
</div>

function MyComponent() {
  return (
    <div class="my-component">
      Hello World!
    </div>
  )
}

/* myComponent.js */
<div class="my-component">
  Hello World!
</div>

/* app.js */
<script>
  import MyComponent from './myComponent';
</script>

<div class="app">
  This is an app!
  <MyComponent/>
</div>

/* myComponent.jsx */
export default function MyComponent() {
  return (
    <div class="my-component">
      Hello World!
    </div>
  )
}

/* app.jsx */
import MyComponent from './myComponent.js';
export default function App() {
  return (
    <div class="app">
      This is an app!
      <MyComponent/>
    </div>
  )
}

<p>
  Hello World!
</p>
<p>
  Nice to meet you! 
</p>

JSX requires a return of only one element, so you need to nest multiple elements inside a single element, such as the <React.Fragment>...</React.Fragment> element or the null-element (<>...</>)

function MyComponent() {
  return (
    <>
      <p>
        Hello World!
      </p>
      <p>
        Nice to meet you! 
      </p>
    </>
  )
}

<script>
  let borderColor = 'blue';
</script>

<p class="red-text" style:borderColor style="background-color: black; border-color: {borderColor}">
  Hello World!
</p>
<style>
  p.red-text {color: red;}</style>

You can't use class in JSX, as it is a reserved word in ECMAScript. Use className instead. If you want to use inline styles, you need to use the JS properties of the style object instead of the html/css properties used in normal HTML. the style attribute takes an object, so you can pass an object

function MyComponent() {
  let borderColor = 'blue';
  const styles={ borderColor }
  return (
      <p className="red-text" style="{{...styles, background-color: 'black' }}">
        Hello World!
      </p>
  )
}