Introduction JSX
Hello, Sohel Rana
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
JSX produces React “elements”.
React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
Embedding Expressions in JSX
For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.
Hello, Sohel Rana
You can put any valid JavaScript expression inside the curly braces in JSX.For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.
Hello, Rabeya Rana!
JSX is an Expression Too
Hello, Nothing!
Specifying Attributes with JSX
Specifying Children with JSX
Hello!
Good to see you here.
JSX Prevents Injection Attacks
JSX Represents Objects
Hello, world!
Babel compiles JSX down to React.createElement() calls.
Hello, world!
Hello, world!