React for Beginners | JSX Elements

• JSX is meant to make create user interfaces with JavaScript applications easier.
• JSX borrows its syntax from the most widely used programming language: HTML
• As a result, JSX is a powerful tool to structure our applications.
• he code example below is the most basic example of a React element which displays the text "Hello World”

<div>Hello React!</div>

• We can write valid HTML element in JSX, but what differs slightly is the way some attributes are written.
• Attributes that consist of multiple words are written in the camel-case syntax (ie. className ) and have different names than standard HTML (class),
• The reason JSX has this different way of writing attributes is because it is actually made using JavaScript functions (more on this later).

<div id="header">
    <div className="title">Hello React!</div>
</div>
				    

• Unlike standard HTML, elements like input, img or br be must close with a trailing forward slash for it to be valid JSX.

<div><input type="email" /> // <input type="email"> is syntax error</div>

• Elements that should have two tags, such as sv, sein OF busron, must have their closing, second tag in JSX, otherwise it will result in a syntax error.

<div><button>Click me</button></div>

• Inline-styles are written differently as well as compared to plain HTML
• Inline styles must not be included as a string but within an object.
• Once again, the style properties that we use must be written in the camel-case style.

<h1 style={{color : "blue", fontSize : 20, padding : 0.5em 1.em}}>
    Hello React!
</h1>
				    

• New React developers may be wondering how itis beneficial that React can use JavaScript code.
• One simple example if that to conditionally hide or display JSX content, we can use any valid JavaScript conditional, like an if statement or switch statement.
• Where are we returning this code? Within a React component, which we will cover in a later section.

const isAuthUser = true;
if(isAuthUser) {
	return <div>Hello user!</div>	
} else {
	return <button>Login</button>	
}
				    

• As mentioned above, JSX is not HTML, but composed of JavaScript functions.
• In fact, writing <div>Hello React</div> in JSX is just a more convenient and understandable way of writing code like the following
• Both pieces of code will have the same output of "Hello React".
• To write JSX and have the browser understand this different syntax, we must use a transpiler to convert JSX to these function calls.
• The most common transpiler is called Babel.