This content originally appeared on DEV Community and was authored by ππππ’ β¨
What is JSX
JSX or JavaScript XML is an extension of JavaScript used to write React components.
For example, consider this code snippet below gives an illustration of what JSX typically looks like
const greet = <h1>Hello World</h1>;
So JSX permits us write Javascript and HTML together. However, unlike HTML and Javascript, JSX cannot be interpreted by browsers so it needs a compiler (Babel or Webpack) to transpile it to Javascript
Why use JSX
The very first thing you should know is that JSX is not a necessity. You can write React code without it.
Then why use it? Why mix the logic and the markup? JSX is syntactic sugar. It is designed to make things easier to read and express
For example: Consider a JSX expression
<p color="red" shadowSize={2}>I'm a random sentence</p>
It is compiled by Babel to
React.createElement(
"p",
{color: 'red', shadowSize: 2},
"I'm a random sentence"
)
The later snippet is obviously less pretty π
How JSX differs from HTML
1. Self-closing tags
In HTML, it's okay to write self-closing tags without closing them e.g. <hr /> can be <hr>. This is not permitted in JSX. All tags must be closed.
Also, all tags can be self-close e.g. <div />
2. Adding JavaScript expressions
JavaScript can be added directly into JSX markup using curly braces {...}
{/* Output: Everybody knows 1 + 1 = 2 */}
<p> Everybody knows 1 + 1 = {1+1}<p>
So no need for the <script> tag HTML uses
3. HTML attributes change naming conventions
Remember JSX is writing HTML in JavaScript so certain HTML attributes like class and for which are keyword in JavaScript have to change to className and hmtlFor respectively. Take note of the use of camelCasing in the naming convention.
All JSX attributes follow the camelCase naming convention. So background-color becomes backgroundColor
4. Inline CSS is an object
In HTML, you can directly add your inline CSS styles in the opening tag. However, this is not so in JSX. Here, you pass an object
For example Consider this HTML snippet
<p style="color:red;font-size:14px">Hello there!</p>
In JSX, it could be written as
cont Greet = function() {
const myStyles = {
color:"red";
fontSize:"14px";
}
return <p style={myStyles}>Hello there!</p>;
}
OR
return <p style={{color:"red", fontSize:"14px"}}>Hello there!</p>;
}
I'm currently learning React. While transitioning from writing HTML to JSX, I found some key concepts and difference that everyone should be aware of. This is me just documenting my notes. Hope you found it helpful π
Header image credit: patterns.dev
This content originally appeared on DEV Community and was authored by ππππ’ β¨
ππππ’ β¨ | Sciencx (2022-07-19T03:34:57+00:00) JSX for beginners (and how it differs from HTML). Retrieved from https://www.scien.cx/2022/07/19/jsx-for-beginners-and-how-it-differs-from-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.