Started with JSX

JSX: JSX is a syntax extension to JavaScript, it helps to write HTML-like structures in JSX, remember HTML-like structures, not exact HTML, we can also execute any javascript code inside JSX code unser { } braces. JSX code creates reactElement and returns it, react element is an object which converted into an HTML element at the time of rendering. JSX code can be used as a normal javascript variable behaviour as well as functional components.

Why JSX: Using JSX help to increase the readability of the code as it makes the development process easier, without JSX we have to use React.createElement which creates a reactElement, but with this our code becomes more complex to read and write. JSX also provide beautiful ERROR handling and warning message

Behind the scenes of JSX: Whenever a code is written in JSX, our javascript engine does not understand JSX code, JS engine only understands ES6 version,so it is React dependencies Parcel that covert JSX code into that which the browser understands, Parcel itself not doing this it parcel one of the most popular dependencies babel that convert the JSX code into some other code, babel transcompile the JSX code into reactElement which returns an object and then it letter converted into HTML element just before rendering on the web browser.

Babel: Babel is one of the most popular dependencies of the parcel that has so many powerful things. Babel is a open-sourceJavaScript compiler that is used for so many purpose, let's see some powerful things about Babel.

1. Compatible with older browsers: ES6 comes after 2016, so any modern browser supports ES6 but not in an older browser. Babel covert the ES6 code into the backwards compatible version of javascript in older browsers.

2. JSX and React: Babel can convert any JSX syntax in reactElement, which helps to render it on the browser.

3. Debuggable: Source map support so you can debug your compiled code with ease.

Element vs Components:

Element: It is a basic building block in a react application. It is essentially a plain JavaScript object that describes what you want to render on the browser, it return a reactElement in a normal javascript variable, it does not have any method it has its own properties.

Example: const element = <h1>Hello, World!</h1>

Component: A component is a JavaScript class or Functional component that returns a reactElement. Component allows you to modularize your UI.

Functional Component: Functional Component is just a normal JavaScript Function

that return some bunch of JSX code that is converted into reactElement. Functional Components Name should always start with a Capital letter.

Example: function Welcome() {

return <h1>Hello, World</h1>;

}

Composing Components: Rendering a Functional Component inside another Functional component is known as Composing Components.