[React_Redux] JSX

JSX(JavaScript XML) is a syntax extension to JavaScript. React heavily relies on JSX to create elements even though you can use React without JSX.


1. JSX

JSX looks like HTML mixed with weird constructs such as { … }. React‘s main functionality is to create reusable components in web applications. So it can be a nice idea that we can create HTML tags in the React code.

JSX is ultimately transformed (transpiled) into JavaScript and then rendered by a browser to generate HTML.


2. Curly Braces – Expressions

JSX is a simply one big HTML elements, which has many nested elements. In this HTML code, we can embed any JavaScript expression by wrapping it in curly braces.

JavaScript expressions can be used for HTML content or attributes.


3. HTML vs JSX

There are some differences between HTML and JSX because some HTML names conflict with JavaScript.

  • for —- htmlFor
  • class —- className
  • <div style color=”black”> —- <div style={{color: ‘black’}}>
  • <!– Comment –> —- {/* Comment */}
<!-- HTML Comment -->
<div class="text-info" style="color:green;">
Your Name
{/* JSX Comment */}
Your Name


4. Spread Operator in JSX

JSX supports the spread operator. It is mainly used to pass many props to the component very easily.

There is a simple Component.

const Sum = (props) => {
  let result = props.a + props.b + props.c;
  return (
    <div>{props.a} + {props.b} + {props.c} = {result}</div>

You can pass props to the component one by one.

<Sum a={data.a} b={data.b} c={data.c} />

But with the spread operator, you can do it like this:

<Sum {...data} />



5. Compile JSX

JSX needs to be compiled to JavaScript to be sent to the browsers. Babel is the most popular transpilers that can compile JSX too.

It is easy to setup Babel for JSX. Install “babel-preset-react” package and configure this preset in the “.babalrc” configuration file.

  "presets": ["env", "react"]



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s