DEV Community

Cover image for React Without JSX
mrwolferinc
mrwolferinc

Posted on

React Without JSX

#react #javascript #tutorial #beginners

JSX is not a requirement for React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.

This tutorial will show you how to use React without JSX. It will also show you how code written in JSX is converted to plain JavaScript.

What is JSX?

Consider the following variable decleration:

const element = <h1>Hello, world!</h1>;
Enter fullscreen mode Exit fullscreen mode

This strange tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. It is commonly used with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Converting to JavaScript

Each JSX element is actually syntactic sugar for calling the React.createElement() method. This means that any code that is written in JSX can also be written in plain JavaScript.

For example, this code is written in JSX:

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.toWhat}!</h1>;
  }
}

ReactDOM.render(
  <Hello toWhat="world" />,
  document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

It can be compiled to this code that doesn't use JSX:

class Hello extends React.Component {
  render() {
    return React.createElement("h1", null, `Hello, ${this.props.toWhat}!`);
  }
}

ReactDOM.render(
  React.createElement(Hello, { toWhat: "world" }, null),
  document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

This happens because the JSX code is converted to JavaScript using the package Babel during compilation. If you're curious to see more examples of how this works, you can try out Babel's online compiler.

Shorthands

If you get tired of typing React.createElement so much, one common pattern is to assign a shorthand:

const e = React.createElement;

ReactDOM.render(
  e("h1", null, "Hello, world!"),
  document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

If you use this shorthand form for React.createElement, it can be almost as convenient to use React without JSX.

Top comments (1)

Collapse
 
the_yamiteru profile image
Yamiteru •

Hmm what do you think about this syntax?

// Shared
import s from "./article.module.css";

type Article = {
  title: string;
  date: string;
  text: string;
};

type Articles = {
  data: Article[];
};

// Functional

const article: Component<Article> = ({ title, date, text }) => 
  box(s.article, [
    title(s.title, title),
    date(s.date, date),
    text(s.text, text)
  ]);

const articles: Component<Articles> = ({ data }) =>
  box(s.articles, [
    map(data, (v) => article(...v))
  ]);

// JSX
const Article = FunctionComponent<Article> = ({ title, date, text }) => (
  <div className={styles.article}>
    <div className={styles.title}>{title}</div>
   <div className={styles.date}>{date}</div>
   <div className={styles.text}>{text}</div>
  </div>
);

const Articles = FunctionComponent<Articles> = ({ data }) => (
  <div className={styles.articles}>
    { data.map((v) => <Article {...v} />) }
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Read next

abhay_yt_52a8e72b213be229 profile image

Boost Your Web App's Speed: JavaScript Performance Optimization Techniques

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

WebSocket Integration in React for Real-Time Communication

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Implementing Infinite Scrolling in React for Seamless User Experience

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Using useEffect for Fetching Data in React

Abhay Singh Kathayat -