What is JSX?

JSX allows us to write HTML in our JavaScript files. JSX can use any valid HTMl tags like divs, p tags, anchor tags, forms, input tags, etc..

//As an expression, JSX can be assigned to variables

const greeting = <div>Hello React</div>

const isNewToReact = true

//Variables can be displayed conditionally

//JSX allows us to nest expressions

//JSX also allows us to nest elements too!

//HTML and JSX have slightly different syntax

• Empty Div in HTML : <div></div>
• Empty Div in JSX: </div>
• Single tag element in HTML: <input>
• Single tag element in JSX: <input name=’email’/>
• Attributes in HTML are spelled all lowercase or hyphenated:

<button class=’btn-submit’/>Submit</button>

• Attributes in JSX are spelled using camelcase:

<button className=’btn-submit’>Submit<button>