In the previous lessons, we have been using JSX to write React components. In this lesson, we will go through pure JSX, and why we need it?

What is JSX?

JSX is an XML-like syntax extension for JavaScript. It doesn’t have any defined semantics and browsers don’t understand JSX. To render React components to DOM, we need a preprocessor also known as a transpiler to transform JSX to standard JavaScript.

Let’s start with a simple example.

let hello = <h1>This is a JSX string</h1>

The above code may look like HTML to you, and it also uses the ‘let’ keyword from JavaScript, but this isn’t JS as well. It is JSX.


index.js

let hello = <h1>This is a JSX string</h1>
ReactDOM.render(hello, document.getElementById('root'))

React allows JSX and JavaScript to co-exist.

For example, we will be writing the JS code in the curly braces.

let js = "JavaScript can co-exist with JSX"
let hello = <h1>This is a JSX string but {js}</h1>
ReactDOM.render(hello, document.getElementById('root'))

JSX Behind the scene

To compile JSX, it needs to be within the scope. This is the reason we use functions or classes to create React components.

For example:

function App(){
return (
<h1>hello, world</h1>
)
}
ReactDOM.render(<App/>, document.getElementById('root'))

This code will be transpiled into React.createElement(component, props, … children)

In this case, it will be:

function Hello(){
return React.createElement(
"div",null, "hello, world")
}
ReactDOM.render(<Hello/>, document.getElementById('root'))

The above example will create a <div> and set hello, world as its child.

React DIV

If we use Div instead of div, the browser will display the element but will throw a warning.

React DIV Error

React interprets lowercase element names as HTML and if you use CamelCase with the first letter in uppercase, React will count it as React component.

The second argument for React.createElement() is props. The third argument is the children. When you are working on a large project, you may create many components, and those components refer to other children component.

JSX support self-closing tags which means <foo> isn’t equal to <foo/>.


Rendering JSX to DOM

To render JSX expressions to the actual DOM, you need to use the ReactDOM.render() method. This will translate the JSX to render nodes created by React.createElement().

let react_node = <li>foo br</li>;
ReactDOM.render(react_node, document.getElementById('root'))

This code will render the React node to <div id="root"></div>

Once rendered to the DOM, the HTML will look like this:

<body>
<div id=”root”><li>foo bar</li></div>
</body>

Just remember that node.js is taking the JSX and compiling it in the React nodes (React.createElements()) and then using these nodes as a template to create real DOM.


Comments in JSX

If you want to add a comment in the JSX code, you can use the JavaScript multi-line comment syntax, but if you’re going to add comments in the place where React is excepting a child node, you need to wrap the comments in curly braces.

For example:

let react_node = <li>foo br {/*this is comment*/} </li>;
ReactDOM.render(react_node, document.getElementById('root'));

Adding some style in JSX

To define the CSS style on React node, you can create a JavaScript object and pass the object or its reference to style attribute.

For example, the following code will display a pink box.

var styles = {

color:'white',
backgroundColor:'pink',
width:'50px',
height:'50px',
padding:'50px',
fontFamily:'Arial'

};
var react_node = <div style={styles}>Pink Box</div>;

ReactDOM.render(react_node, document.getElementById('root'));

React Styling

In JSX, you can’t write a CSS rule with a hyphen. For example, you can’t use font-family. Use fontFamily instead. The similar treatment goes with fontSize, fontWeight, etc.

In the end, this will be compiled to:

<div style="color:white, background-color:pink, width:50px, height:50px, padding:50px, font-family:Arial">Pink Box</div>

In this lesson, we learned some new things about JSX. Before moving on to the next lesson, you should practice all the examples given in the lesson to fully-understand the JSX. You can write React code without JSX, but it makes life so much easy that it doesn’t make any sense not to use it.

React Nested Components Tutorial Home React Validate Props

 

Last modified: August 19, 2019

Comments

Write a Reply or Comment

Your email address will not be published.