DEV Community

Cover image for JSX beginners guide
krishna kakade
krishna kakade

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

converted to this code ā¤µ

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

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>
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

In JSX user-defined components should start with capital lettersā¤µ

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

export default App;
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

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

<header>
<div>
<h1>Hello Header</h1>
</div>
</header>
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode
function Avatar(props) {
  return (
 <img className="Avatar"
 src={props.user.avatarUrl}     
 alt={props.user.name}  /> 
 );
}
Enter fullscreen mode Exit fullscreen mode

Thank you for tunning in i hope you find something useful here good day friends.šŸ˜ŠšŸ‘‹

Top comments (0)