Some ReactJS' JSX basics you should know as a beginner 👇🏿
...
Writing Expression in JSX.
Curly braces are used to wrap valid JavaScript expressions in JSX. This can either be an expression of number operations or a function call.
// Variable expression
const guest = "John"
const greeting = <h1>Hello, {guest}!</h1>
ReactDOM.render(
greeting,
document.getElementById("root")
);
In the example below, the result of a function call is written into the h1 tag.
// Function call expression
function formatName(guest) {
return guest.firstName + ' ' + guest.lastName;
}
const guest = {firstName: "John", LastName: "Doe"}
const element = (
<h1>Hello, {formatName(guest)}!</h1>
);
ReactDOM.render(
element,
document.getElementById("root")
);
Using JSX in Expressions
JSX can be assigned to variables, used in conditionals and loops; accepted as arguments and returned from function calls. This is because, after compilation, JSX becomes mare JavaScript objects.
function isUser(user) {
if (user) {
return <h1>hello, formatName(user)!</h1>;
} else {
return <h1>Hi! can I help you?</h1>;
}
}
Attribute in JSX
To specify attribute in JSX, you should use quotes for string values and curly braces for expressions. Don't use both for attribute values.
const element = (
<div ClassName="container">"Hello World!" is getting old.</div>
<img src={imageUrl}></img>
);
Having Children in JSX
JSX can have multiple children elements. Empty tags should be closed with a />
at the end.
const user = {firstName: "John", LastName: "Doe"}
// Multiple element
const elements = (
<div>
<h1>Hello {formatName(user.firstName)}</h1>
<h2>Good to see you here.</h2>
<h3>Have a greet stay!</h3>
</div>
)
// Empty element
const element = <input type="email" name="user-email" value={state.userEmail} />;
No Injection Attacks in JSX
Malicious inputs are escaped in JSX. No input attack can be injected into the code, except explicitly set in the application. Cross-site scripting(XSS) attacks are prevented in JSX.
const title = response.inputAttack
// This is safe
const element = <h1>{title}</h1>
JSX is JavaScript Object.
A transpiler compiles JSX down to React.createElement()
calls. When you write JSX, the createElement()
method is called from the React
object class under the hood.
The two examples below are identical:
const element = (
<h1 className="surprise">
This is JSX!
</h1>
);
const element = React.createElement(
'h1',
{className: 'surprise'},
'This is JavaScript object!'
);
Summary
Let's look at some of the basics of ReactJS' JSX that's been covered so far.
- Writing expression in JSX
- Using JSX in Expression
- Attribute Expression in JSX
- Specify Children in JSX
- No Injection Attacks in JSX
- JSX is JavaScript Object
Top comments (0)