JSX vs HTML

 

Hello Developers!!

I know you are confused between html and JSX . As, I have mentioned in one of my blog that JSX have html like syntax. Let's learn the actual different between them.

                                                                   JSX vs HTML

• Adding custom styling to an element uses different syntax. In html we use internal,external or inline css. There is difference in using inline css with JSX  whereas external css is same and inline css need to be added in .html file in public folder. 

          inline css in JSX syntax : 

          style={{backgroundColor:"red", border:"1px ridge", width:"20px"}}

          note: first bracket represent js variable and second represent js object.

• Adding a class to an element uses different syntax. class is a keyword in JavaScript so, we use className instead of class in JSX syntax .

• JSX can reference JavaScript variables.

         <button> {buttontext}</button> 

          here {buttontext } is a variable.You cannot reference js variable in html file.