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

marcuskohlberg profile image

Building simple event-driven applications with Pub/Sub

Marcus Kohlberg -

pauq profile image

Scraping New Telegram Channels

pauq -

koolkamalkishor profile image

Evaluating Medical Retrieval-Augmented Generation (RAG) with NVIDIA AI Endpoints and Ragas

KAMAL KISHOR -

igbikisimewari profile image

Best Version Control Practices Every React Development Team Needs To Know

Joseph Abraham -