For any queries you can reach us at / WhatsApp us: +919158876092

React for Beginners | JSX Elements

JSX is a powerful tool for structuring applications

  • 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>
To be displayed in the browser, React elements need to be rendered (using ReactDOM.render()).

How JSX differs from HTML

  • 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>

JSX must have a trailing slash if it is made of one tag

  • 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>

JSX elements with two tags must have a closing tag

  • 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>

How JSX elements are styled

  • 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!
Style properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings. For example, fontSize: 22 instead of fontSize: "2px"

JSX can be conditionally displayed

  • 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>	

JSX cannot be understood by the browser

  • 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.