Introduction to JSX 🚀

Vaishakh Nambiar — Sat, 13 Aug 2022 03:42:19 +0000

published: true

JSX (Javascript Syntax eXtension)

JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.
In this 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>

JSX 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 and the final closing tag of a JSX expression must belong to the same JSX element!
If you notice that a JSX expression has multiple outer elements, the solution is usually simple: wrap the JSX expression in a <div></div>

Check RENDERING in React

ClassName

In React we use className , just like class in html

//In HTML 
<h1 class="big">Hey</h1>

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

This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript.

When JSX is rendered, JSX className attributes are automatically rendered as class attributes.

Self-Closing Tags

When you write a self-closing tag in HTML, it is optional to include a forward-slash immediately before the final angle-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 won’t be treated as JSX nor as JavaScript. They are markers that signal the beginning and end of a JavaScript injection into JSX, similar to the quotation marks that signal the boundaries of a string.

We can access variables while inside of a JSX 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 JSX, it’s common to use variables to set attributes.

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

Object properties are also often used to set attributes:

const prop = {
  name:"ukwitis",
  age:"20"
}

const obj = (<p>
Name: {prop.name}
Age : {prop.age}
</p>)

EventListeners:

Create an event listener by giving a JSX 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 in JSX

// @ this is invalid

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

BUT performing a 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 JSX attribute. The attribute’s name is key. The attribute’s value should be something unique, similar to an id attribute.

Keys don’t do anything that you can see! React uses them internally to keep track of lists. If you don’t use keys when you’re supposed to, React might accidentally scramble your list-items into the wrong 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 JSX at all!

In React, you won't be using document.createElement.
However, we saw how it works because it shares some similarities with React.createElement but it's not the same thing.

document.createElement returns a DOM element (for example a div or an h1). Whereas 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 is 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 is used in React applications, but it isn’t part of React. After all, the 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 JSX elements.

### Projects you could do this weekend:
A simple card component

Article preview component