4- Understanding JSX

What is JSX?

JSX stands for JavaScript XML. 

 JSX is an extension for JavaScript that allows developers to write HTML with JavaScript. 

OR

JSX provides you to write HTML/XML-like structures in the same file where you write JavaScript code, then preprocessor will transform these expressions into actual JavaScript code.

OR

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()  and/or appendChild() methods.

In simple words JSX is HTML with JavaScript appearance.

 JSX is almost 95 to 98 percent HTML with some minor changes like:

1-  class   written as   className

2-  for   written as   htmlFor

3-  tabindex   written as   tabIndex.

App.js

Is inside of src folder

App.js is a parent component file of your react app. 

It is imported into the index.js file to render content/HTML in the root element that remains in public/HTML.

So basically editing starts from this point

textformat -->   src --> App.js

Image 1 -  default value of App.js

NOTE : 

The return function inside App.js can return only one value..

Therefore inside return we use opening and closing tags like <> and </> respectively...

NOTE- If your  laptop and mobile is connected with same Wifi after running the app on terminal you can also see it in your mobile with the url given in(On Your Network).

The command to run your react app in terminal is npm start

Image 2 -  Code Compiled Successfully

Image 3 -  Mobile view of default app..

--> We erase the code inside App.js and create our own custom code as per requirement of website

Customising JSX fragment

Image 4