ReactJS Tutorial - What is JSX

React is a JavaScript library to reshapes the user interfaces act as a more reactive. It develops the simple views for every state in the application, and React will accurately renovate and deliver the right components when the data is updated. It is most often well defined and interacted with views.

The React tutorial on Techtuts furnishes an explanation from the base to step out conception. This tutorial provides a good understanding about the React JavaScript Library for Technical, Non-Technical People, College Students and Working Professionals. Given an examples are an painless to readable and an easy to practice by yourself.

In this tutorial you will know about the concepts from starting to ending point.This tutorial includes an Introduction, Features, Create and Run ReactJs app, JSX, Components, State and Props, Component Life Cycle, Component Life Cycle methods, Router, Redux, Flux etc.

What is JSX

JSX stands for JavaScript Extension. It is syntax extension to javscript. It allows to write html  tags witin the javascript program. JSX  can produces the React "Elements" to render.

Features of JSX

• Embedding Expressions in JSX - you can give any  javascript  expression within it
• Preventing Injection Attacks
• Representing Objects
• Specifying child element with JSX
• Adding attributes to elments with JSX
• Using JSX with If and For loops

Rules on JSX Element Create

• Should not add more than one root element.
• Always use adjacent element.
• Use curly braces "{}" for valid expressions

Valid :

return (
<div>
    <h2>Welcome to techtuts.</h2>
    <p>Online learning platform</p>
</div>
);

Note:  You can use any element  as root element

Invalid:

return(
    <h2>Welcome to techtuts.</h2>
    <p>Online learning platform</p>
);