React: How to create the app using JSX without React

React: How to create the app using JSX without React

What is JSX and How Does it Work?

JSX is an XML-like syntax extension to JavaScript. It is similar to a template language, but it has the full power of JavaScript. JSX gets compiled to React.createElement() calls which return plain JavaScript objects called “React elements”. To get a basic introduction to JSX see the docs here.

In this article, we will take a look at how JSX works and how to create custom components using JSX without using any frameworks.

Let’s get started

Create a new Project

Create a directory for your project by running the following command in your terminal:

mkdir jsx-demo
cd jsx-demo
npm init -y

Install Babel

Babel is a JavaScript compiler. It converts ECMAScript code into a backward-compatible version of JavaScript in current and older browsers or environments, Babel is used to compiling JSX to JavaScript.

npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-react-jsx

Create a babel.config.js file

const presets = [];
const plugins = [
  [
    "@babel/plugin-transform-react-jsx",
    {…