Laying the Foundation of React, JSX & Babel

As we saw we can write React with core React (createElement, etc)
But it becomes very complicated as and when the HTML structure needs to be more and more nested.

• So to make our lives easier Facebook Developers came up with JSX. (React is possible without JSX)

• JSX is not same as React also JSX is not a part of React. Both are different.

• JSX is not HTML inside JS. JSX is an HTML like or an XML like syntax

JSX is a convention where we merge HTML & JavaScript.

H1 tag heading (React Element) using React core:
const heading = React.createElement("h1", {id: 'heading'}, "Namaste React using Core React!") - This is a React Element

H1 tag heading (React Element) using JSX:

const jsxHeading = <h1 id="heading">Namaste React using JSX 🚀</h1>; - This is now a React Element - Easy to Create & understandable ✅

Above both are same/equivalent.

JSX is different & React is different.

So We'll be now using JSX from now & not React core.

JSX is transpiled/compiled before it reaches the JS engine. Babel(JS compiler) being a Parcel's dependency does this for you.

Does React understand this JSX (jsxHeading)?
Ans: No it doesn't
Babel takes in all JSX code and behind the scenes it converts/transpiles into React.createElement which the React understands, to convert it an React element.

Thats why when you

console.log(jsxHeading) or console.log(heading) - Both are same (React Element - It gives A JS Object)

JSX => React.createElement => ReactElement (JS Object)
And then this React element will be converted to HTML element using root.render(jsxHeading);

FYI: Babel's Job is not just to convert/transpiles this JSX to React code. It does a lot of other things.
Eg: Some older browser versions do not understand the new ES6 syntax. Babel transpiles the ES6 code to a code which these older browser understands!
Babel🔥 is JS/Node package which is a JS code that takes in some piece of code and converts it into some different kinda code. (Checkout Babel Documentation)

Add class to an React element in JSX
const jsxHeading = <h1 className="headings" tabIndex="1">Namaste React using JSX 🚀</h1>;

Then onroot.render(jsxHeading);// Transformed into HTML element which browser understands - <h1 class\="headings" tabindex\="1">.....</h1>
It implies JSX is different from HTML. It is just like HTML.
Also in html we add tabindex="1" but here in JSX we'll do camelCase so tabIndex="1"

If you want to write JSX in multiple lines then:
const jsxHeading = (<h1 className="headings" tabIndex="1">Namaste React using JSX 🚀</h1>);
(...) why? Because Babel needs to understand where the JSX has started and ended.

React Component - Everything in React is a Component - which is true

But what is component?
There are 2 types of components in React:
1. Class Based Component - uses JS classes - OLD way of writing code (Nobody uses it now)
2. Functional Component - uses JS functions - New way (You should be very good at this)

And we're going to use Latest Standard Practices of React

What is a React Functional Component? => It is just a normal JS Function 🤪

-> Always name a React component starting with a Capital Letter or else will get an error (React way of understanding that it is Component)

const HeadingComponent = () =>{ return <h1 className="heading">Namaste React Functional Component🚀🔥</h1>; }

OR

const HeadingComponent2 = () => <h1 className="heading">Namaste React Functional Component🚀🔥</h1>; - Perfectly valid

(Let's stick to writing return)

So React Functional Component is : A normal JS (arrow) function right! which return some piece of JSX/React Element. (because JSX at the end of day is React Element - Refer above Babel part)

Can also return Nested JSX
const NestedContainer = () => { return ( <div className="container"> <h1>Nested Structure!</h1> </div> ); }

root.render takes in a React Element. So how will we render a React Functional Component (RFC).

root.render(< HeadingComponent />); -> Transform to HTML - This is how you'll render a Functional component on web page.

root.render(<NestedComponent />);

Babel will understand on encountering "<... />" that it's a RFC

Babel is transpiling all the code into a code which our React understands and then React transforms it into HTML which the browser understands.
Browser doesn't even know that once these were a React Component or React Element. It just wants HTML.

Component inside component (also called Component Composition)

// React Functional Component
const Title = () =>{
 return <h1>Namaste React! 🚀</h1>
}

const HeadingComponent = () => {
 return (
  <div>
   <Title/>
   <Title></Title> - (You can do this way as well its same - use it depending on usage)
   <h2 className="headings">Functional Component with Nested Structure</h2>
  </div>
 );
}

root.render(<HeadingComponent />);  // Render React Functional Component RFC on to web-page

RFC can also be written with normal function - It'll work fine
But Keep using Arrow function it is an Industry wise Standard and is a cleaner code.

A super power of JSX is that you can run any piece of JS code in it, if you write that inside - { }

Include React Element (as it is Js obj only) inside React Component and also vise versa

//React Element
const jsxHeading = <h1 className="headings" tabIndex="1">Namaste React using JSX!!🚀</h1>;

// Included React Element inside React Element
const reactEle = <span>React element {jsxHeading}</span>;

// React Functional Component
const Title = () =>{
 return <h1>Namaste React! 🚀</h1>
}
// Included React Component inside React Element
const reactEleNComp = <span>React element {<Title/>}</span>;

// Included React Component, React Elements & some piece of JS inside React Component
const number = 1000;
const HeadingComponent = () => {
 return (
  <div>
   <h2>{ number+ 's' + 200 }</h2>
   {console.log(number)}
   {jsxHeading}
   {reactEle}
   {reactEleNComp}
   <Title/>
   <h2 className="headings">Functional Component with Nested Structure</h2>
  </div>
 );
}

root.render(<HeadingComponent />);  // Render React Functional Component RFC on to web-page

This is why JSX is Amazing 🤩
Also Babel🔥 which is transpiling these JSX into React code. All Hail Parcel ⚡️ who allow to do all this stuff

Another amazing thing about React/JSX 💡 - A lot of developers don't know about this
const data = api.getData(); - Suppose you are getting some data from API here const Content = () => { return (<div> <h1>Namaste React! 🚀</h1> <p>{data}</p> </div> ); }
The data which we are passing in JSX can be some malicious data.
JSX is so amazing that it take cares of such Injection Attacks. It'll just escape it if it finds some malicious data.
It won't just blindly run it. It'll sanitise the data & everything that you pass. It prevents Cross Site Scripting Attacks (XSS) for you automatically.

Last but not the least
As React Functional Components (RFC) are just JavaScript Functions at the end of the day. So we can even call it right? Yes You can!

// React Functional Component
const Title = () =>{
 return <h1>Namaste React! 🚀</h1>
}

const HeadingComponent = () => {
 return (
  <div>
   <Title/>
   <Title></Title> (You can do this way as well its same - use it depending on usage)
   {Title()}   (As it is a JAVASCRIPT FUNCTION you can call it in { })
   <h2 className="headings">Functional Component with Nested Structure</h2>
  </div>
 );
}

root.render(<HeadingComponent />);  // Render React Functional Component RFC on to web-page

{Title()} (As it is a JAVASCRIPT FUNCTION you can call it in { })
It will work just same as <Title /> or <Title></Title>. All 3 are SAME, as at the end of the day, & as everything is just JAVASCRIPT❤️‍🔥(functions & variables)

REACT is Readable that means Your code is READABLE because you're writing JSX.
(And JSX is not React. If you'd had used React.createElement that was very very complex stuff isn't it)

Now as we have laid the Foundation of React & JSX and what we understood babel does things behind the scenes.
We can now DIVE DEEP inside REACT!! Stay Tuned for next blogs!!