JSX beginners guide

Hello all👋
This article is all about the basics of JSX(Javascript extension)for beginner react devs.even if you're intermediate react developer you can repaint/refresh things you learned before.

Things we are going to learn/repaint🖌🔁

• JSX is syntactic sugar for React.createElement
• In JSX we can self-close the components
• In JSX user-defined components should start with capital letters
• You can use Javascript expressions inside of JSX
• You can nest components in JSX just like we do in HTML
• Nested contents can be accessed in (props.childern)

Detailed description

JSX is syntactic sugar for React.createElement.

In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer. **As it turns out, JSX is actually transpiled into standard JavaScript behind the scenes. React uses a preprocessor called Babel to translate our code before it is rendered in the browser.**

Example:-
This code⤵

<Button onClick={() => alert('YES')}>Click me</Button>

converted to this code ⤵

React.createElement(Button, { onClick: () => alert('YES') }, 'Click me');

For more details,you can check on babeljs.io

In JSX we can self-close components⤵
So we write HTML tags like this ⤵

<div></div>

we have to add closing tag there that is necessary otherwise it won't work

but in JSX we can simply self-close that tag⤵

<div />

In JSX user-defined components should start with capital letters⤵

function App() {
  return (
    <div className="App">
    <Jumborton/>
    <Projects/>
    <Social/>
    <Footer/>
    </div>
  );
}

export default App;

You can use Javascript expressions inside of JSX
we can evaluate javascript expression JSX with help of curly braces ⤵

<div>{5+5}</div>

You can nest components in JSX just like we do in HTML
Example

<header>
<div>
<h1>Hello Header</h1>
</div>
</header>

Nested contents can be accessed in (props.childern)⤵

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function Avatar(props) {
  return (
 <img className="Avatar"
 src={props.user.avatarUrl}     
 alt={props.user.name}  /> 
 );
}

Thank you for tunning in i hope you find something useful here good day friends.😊👋