JSX code can not run on browser as it is, hence it needs to be converted to plain js
react code is not optimised for production as it is not minified hence through build process it is minified

Reusable building blocks -
Related code lives together - js and css
seperation of concern - as different component handle different data and logic it makes easier to work on complex projects

React component names must always start with a capital letter, while HTML tags must be lowercase.because Capital letter will tell react that its react component and it helps react engine for rendering purpose
The export default keywords specify the main component in the file.
JSX is stricter than HTML
You have to close tags like
Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent, like a
...
or an empty <>...</> wrapper:
In React, you specify a CSS class with className. It works the same way as the HTML class attribute:
React does not prescribe how you add CSS files. In the simplest case, you’ll add a tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user.
In the above example, style={{}} is not a special syntax, but a regular {} object inside the style={ } JSX curly braces. You can use the style attribute when your styles depend on JavaScript variables.

Conditional rendering¶

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

When you don’t need the else branch, you can also use a shorter logical && syntax:

<div>
  {isLoggedIn && <AdminPanel />}
</div>

You’ll get two things from useState: the current state (count), and the function that lets you update it (setCount). You can give them any names, but the convention is to write [something, setSomething].
React will call your component function again. This time, count will be 1. Then it will be 2. And so on.
If you render the same component multiple times, each will get its own state. Click each button separately:
Functions starting with use are called Hooks. useState is a built-in Hook provided by React. You can find other built-in Hooks in the API reference. You can also write your own Hooks by combining the existing ones.
Hooks are more restrictive than other functions. You can only call Hooks at the top of your components (or other Hooks). If you want to use useState in a condition or a loop, extract a new component and put it there.
To make both MyButton components display the same count and update together, you need to move the state from the individual buttons “upwards” to the closest component containing all of them.
The information you pass down like this is called props.
This is called “lifting state up”. By moving state up, you’ve shared it between components.