Unable to figure out difference between js and jsx in react app

Question

I have react project made with npx create-react-app and the default extension app is.js and it's working same as when I convert it to .JSX . I am new to React and I read JSX is simpler but here both are js and jsx are working same.

Answer 1

You can think of JSX as some kind of Javascript that allows you to put HTML inside it. Normally, When you write a JSX code like this it converted to javascript equivalent under the hood For example

JSX

const Head =  () => (<h1> Hello Wordl </h2>)

Javascript equivalent

const Head = React.createElement('h1', {}, "Hello world")

React.createElement(tagsorComponent, attriborProps, ArraychildrenComponentOrTagsOfStrings)

The first argument can take an element tags or another component as React.createElement

The second arguments takes in the prop of a children component or attributes like ids,

The third argument takes a strings of tags or children component

Imagine you write everything in javascript you may have something that looks like this

const Pet = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Luna"),
    React.createElement("h2", {}, "Dog"),
    React.createElement("h2", {}, "Havanese"),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Adopt Me!"),
    React.createElement(Pet),
    React.createElement(Pet),
    React.createElement(Pet),
  ]);
};

ReactDOM.render(React.createElement(App), document.getElementById("root"));

But with JSX You can simply do it like this

const Pet = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <h2>{props.animal}</h2>
      <h2>{props.breed}</h2>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <Pet name="Luna" animal="dog" breed="Havanese" />
      <Pet name="Pepper" animal="bird" breed="Cockatiel" />
      <Pet name="Doink" animal="cat" breed="Mix" />
    </div>
  );
};

render(<App />, document.getElementById("root"));

I think you would prefer the JSX over the raw js equivalent