The Ultimate Guide to Using JSX with ReactJS

The Ultimate Guide to Using JSX with ReactJS

Learn how to use JSX with React including a look at what JSX is, the benefits of using JSX, and using JSX with ReactJS. Learn how to write ...

Originally published at stackchief.com on January 6, 2019

JSX adds an XML-like syntax to JavaScript and makes creating ReactJS components easier. While not required, JSX adds enough benefits to be considered a standard part of React development. In this tutorial, we'll explain what JSX is, the benefits of using JSX, and examples of JSX with React.

What is JSX?

JSX is a syntax extension to JavaScript. It uses an XML-like syntax to make creating React components more elegant. JSX provides a shortcut for working with React.createElement() and describes how the UI should render a component.

Babel inherently supports JSX as a preprocessor. In fact, Babel transpiles JSX into React.createElement() API calls. If you followed the recommended environment setup then JSX is already working with your React project.

The Benefits of Using JSX

JSX provides an easier syntax for working with React elements. Here is an example of creating an element with JSX:

const element = (
  <h1 className="greeting">Hello, world!</h1>
);

and without:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Notice how the first example resembles HTML more than the React.createElement() API call.

JSX also improves development time. It optimizes code at compile while also catching any errors. This makes the resulting JavaScript run faster (or as fast as) vanilla JS.

JSX also forces safer coding. Before rendering elements, JSX converts everything to strings to escape user inputs and XSS vulnerabilities.

Using JSX with React

Since JSX compiles to React.createElement() calls, it depends directly on the ReactJS library. This means React must always be in scope when using JSX:

import React from 'react';

class App extends React.Component {    render() {       return (          <div>             <h1 className='title'>Hello React! </h1>             <p>Check out this paragraph.</p>          </div>       );    } }

export default App;

Notice how we first import the React library. We then use JSX to render both an <h1> and a <p>. Remember that elements must be wrapped by a parent element when there are more than one. In this case, <div> is used to wrap the child elements.

Using JavaScript expressions with JSX

JSX can evaluate inline JavaScript expressions. For example:

import React from 'react';

let name = 'Sam'

class App extends React.Component {    render() {       return (          <div>             <h1 className='title'>Hello {name}! </h1>             <p>Check out this paragraph. </p>          </div>       );    } } export default App;

Notice how the <h1> tag evaluates the {name} expression inline.

While largely resembling HTML, JSX has some subtle differences. For example, className is used instead of class for class attributes. Likewise tabIndex is used instead of tabindex.

You can still add custom attributes with the data- prefix just like regular HTML.

Using CSS with JSX

You can easily apply CSS rules and style elements with JSX:

import React from 'react';

class App extends React.Component {    render() {

      let titleText = {          fontSize: 100,          color: '#c8c8c8'       }

      return (          <div>             <h1 style = {titleText} className='title'>Hello React! </h1>             <p>Check out this paragraph.</p>          </div>       );    } }

export default App;

Notice how we reference the CSS properties as a JavaScript object titleText.


Conclusion

JSX is similar to HTML with a few subtle (yet key) differences. It provides a preprocessing step to catch errors and optimize code at compile time. JSX also adds syntactic sugar to creating React elements. For these reasons, it is highly recommended that JSX is used with your ReactJS project.

Originally published at stackchief.com on January 6, 2019

=======================================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Understanding TypeScript

☞ Typescript Masterclass & FREE E-Book

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ The Complete React Developer Course (w/ Hooks and Redux)

☞ React JS Web Development - The Essentials Bootcamp

☞ React JS, Angular & Vue JS - Quickstart & Comparison

☞ The Complete React Js & Redux Course - Build Modern Web Apps

☞ React JS and Redux Bootcamp - Master React Web Development

reactjs javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

ReactJS Web App Development Services

We provide top-notch ReactJS development services to global clients. Hire expert ReactJS developers from top React JS development company, Skenix Infotech.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.