Home
Coding
Javascript Syntax Extension

Javascript Syntax eXtension: Introduction of JSX Elements

Javascript Syntax eXtension: Introduction of JSX with Example
Javascript Syntax eXtension

What is JSX?

JSX is a syntax extension for JavaScript. JSX was written to be used with React. JSX code looks a lot like HTML. In that case, it means that JSX is not valid JavaScript. Web browsers can’t read it! It needs to be compiled before it reaches the web browser.

JSX elements are treated as JavaScript expressions ... That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array, etc.
const p1 = <p> Hi </p>
Javascript Syntax Extension elements can have attributes, just like HTML elements can.
const p1 = <p id="large">foo</p>

Nesting - use parenthesis to nest the code
const nesting = (
   <a>
     <h1>
       Nested Code
     </h1>
   </a>
 );

Note: A JSX element can have "only 1 " outer element
i.e
this is an invalid code... as it has more than 2 parent elements
const paragraphs = (
  <p id="child1">I am a paragraph.</p> 
  <p id="child2">I, too, am a paragraph.</p>
);

But, this code is valid as it has only 1 parent and 2 child

const paragraphs = (
  <div id="parent">
    <p id="child1">I am a paragraph.</p> 
    <p id="child2">I, too, am a paragraph.</p>
  </div>
);

The first opening tag of a JSX element must belong to the same element as the closing tag. If you notice that a component has multiple outer tags, the solution is usually pretty straightforward: wrap the component in a <div></div>

ClassName

In React we use className, just like a class in HTML
//In HTML 
<h1 class="big">Hey</h1>
 

 //In JSX
<h1 className="big">Hey</h1>

This is because Javascript Syntax Extension can get turned into JavaScript, and class can be a reserved word in JavaScript (and so we'll just use className instead). 

When JSX is rendered it turns className into a regular attribute, and so the class name becomes an attribute.

Self-Closing Tags

When you write a self closing tag in HTML, it's optional to include a forward slash immediately before the closing bracket:
<img> <img/>
<br>  <br/>
But in REACT, self-closing tags MUST end with /
Fine in JSX:
<br />

NOT FINE AT ALL in JSX:
<br >

Javascript in JSX

Any javascript code can be written inside JSX by using {}
Any code writen inside `{}` is treated as javascript

const H1=<h1>2+3</h1>
ReactDOM.render(H1,target)
// "2+3" will be the output 

const H2=<h1>{ 2+3 }</h1>
ReactDOM.render(H2,target)
// 5 will be the output

The curly braces {} themselves aren't considered part of the JSX syntax nor are they interpreted as JavaScript. They're just markers that signify the beginning and end of an inline script block. You can access variables within an inline string block, even if those variables are defined elsewhere.

We can access variables while inside of a JSX (JavaScript Syntax Extension) expression, even if those variables were declared on the outside.
const theBestString = 'Yo globallly';

ReactDOM.render(<h1>{theBestString}</h1>, document.getElementById('app'));

Object prop. and variables:

When writing Javascript Syntax extension, it’s common to use variables to set attributes.

const src="blah/blah"
const img=<img src= {src} />

Object properties are also used to set attributes:
 const prop = {
  name:"ukwitis",
  age:"20"
}

const obj = ( <p>

Name: {prop.name}
Age : {prop.age}

</p>)

EventListeners:

Create an eventlistener by giving a JS extension element a special attribute. Here’s an example:
  <img onClick={myFunc} />

Note: Camelcase is being used for eventListeners
 `onclick` in HTML
`onClick` in JSX

Conditionals in JSX

  • If statements cannot be injected into JSX
// @ this is invalid

const h = (
  <h1>
    {
      if (purchase.complete) {
        'Thank you!'
      }
    }
  </h1>
);

But performing an if statement outside the jsx expression is valid
let text;

if (id==1) text="hi 1"
else text="hi 2"

const h1 = <h1>{text}</h1>

One more method of if Statements is by using &&
const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);
//if lhs == true , rhs is added/rendered

Keys in React:

A key is a Javascript syntax extension attribute. The name of the attribute is "key". The value of the attribute must be unique, similar to an ID attribute.

Keys don’t do anything that you can see! React uses them internally for tracking the lists. If you don't use keys when you're supposed to, React might inadvertently scramble your list items into an incorrect order.
<ul>
  <li key="li-01">Example1</li>
  <li key="li-02">Example2</li>
  <li key="li-03">Example3</li>
</ul>

React.createElement

You can write React code without using the JavaScript Syntax extension at all!

In React, you won't be using document.createElement.
However, it may see how it works because it shares a few similarities with React.createElement but it's not the same thing.

  • document.createElement returns a DOM element. While React.createElement returns an object that represents the DOM element. The object looks something like this:
 const element = React.createElement("h1");
//returns an object similar to this one:
{
  type: 'h1',
  props: {}
}

  • The reason why React.createElement returns an object rather than the DOM element itself because React operates a Virtual DOM.
  • So React.createElement returns an object rather than a DOM element because this allows React to do some performance optimizations (such as the Virtual DOM)

Note: when a JSX element is compiled, it transforms into a React.createElement() call.
 //Syntax
React.createElement(type, {props},children)

eg:- 
let welcome = React.createElement(
  "h1",
  { className:"welcome" ,style: { color: "red" } },
  `Welcome to react world`
);

Note:

the DOM (Document object model) is used in React applications code, but it isn’t part of React. After all, the Document object model (DOM) is also used in countless non-React applications.

Methods imported from react are only for pure React purposes, such as creating components or writing Javascript syntax extension elements.

Post a Comment