React Development JSX Full Stack Development

JSX

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. It is not a pure javascript function hence if we try to use this syntax directly in console.log as javascript then it will throw an error.
Let's see an example of HTML being converted to JSX in Javascript:

<!-- This is HTML-->
<h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>

//This is JSX
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>

There are some rules to keep in mind while we are converting HTML to JSX.

Return a Single root Element

You can see in the above example we have used <> </>
as a wrapper around the <h1> and <ul> completely this is done so as per the rule to return a single element. You can also use <div></div> instead of an Empty tag <>. This Empty tag <></> is called as React fragment.
Close all the tags
You need to close all the tags used inside the JSX as you can see in the above example.
camelCase

In React the attribute to be used should be camelCase and should not be a key word for example.

class==> className

stroke-width ==> strokeWidth

React.createElement

JSX is not a requirement for React development. JSX is just a syntactic sugar for calling React.createElement. We can create a whole react app using React.createElement instead of using JSX. Since JSX is easy to understand and write developer prefer JSX for React application.

React.createElement comes from React core Library.

Let's explore an example where we can use React.createElement instead of JSX.

//With JSX
class Hello extends React.component {
 render() {
    return <div> Hello {this.props.toWhat} </div>;
   }
}

const root = ReactDOM.createRoot(document.getElementById('root');
root.render(<Hello toWha="World" />);

//Without JSX
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

Here one must ask if React.createElement already has React.createElement then what is the requirement of JSX? To answer this we can think of the Nested element then in that case use React.createElement becomes a cumbersome task hence we follow JSX syntax instead.

Benefits of JSX:

JSX helps us in keeping our code simpler and more elegant when writing large pieces of code.
According to the React docs, most people find it helpful as a visual aid when working with UI inside the JavaScript code.
JSX also allows React to show more useful error and warning messages.
If one is familiar with HTML, it is quite easy to use JSX when building React application
Faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.

How JSX works behind the scene?

JSX is transcompiled by Babel to Javascript code before it is passed to JavaScript Engine.

Babel

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments.

npm install --save-dev @babel/preset-react

In React, Bable trans compiles the JSX to Javascript.

Components

Components are the building block of react. Components are independent and reusable bits of code, they are similar to Javascript functions but they work in isolation and return HTML when being rendered.
There are 2 types of components we can use in JavaScript:

Class Component:
It is the old standard that is still used by React developers. It uses the inheritance concept to inherit the React.Component.

class Body extends React.Component {
  render() {
    return <h2>Hi, I am a Body Component!</h2>;
  }
}

Here we use extends and render() keywords while creating the component.

Functional Component

This is a more modern way of creating a component that behaves the same way as a class component. It requires no extends and renders keywords.
```
 const Body = () => {
     return <h2> Hi, I am a Body Component!</h2>
 }
```
In the above example, we can see that it uses the modern Javascript arrow function syntax better than the old Class method.

Hope you liked the above content, please share and comment which will motivate me to write more regarding react.

Thanks,
Happy Learning ❤️

React Learning Path - Day 4 🚀

JSX

React.createElement

Benefits of JSX:

How JSX works behind the scene?

Babel

Components