React

what is react ?
React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
React components are JavaScript functions that return markup:

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

MyButton, you can nest it into another component:

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

starts with a capital letter.

The export default keywords specify the main component in the file.Its export into another jsx file and then imported to another the component.

JSX is stricter than HTML. You have to close tags like
.You have to wrap them into a shared parent, like a

... or an empty <>...</> wrapper:

Adding styles :

<img className="avatar" />

you can use the same like as css class and adding style same way using .avatar {}.

Displaying data:

  return (
  <h1>
    {user.name}
  </h1>
);

You can also “escape into JavaScript” from JSX attributes, but you have to use curly braces instead of quotes.