@onjsdev

React Counter App Without JSX, Babel, Parcel, and Webpack

Nov 29 2024

React is famous for JSX, Babel, and modern build tools. But what if I told you that you don't need any of these to create a React app?

React actually is a javascript library that you can include to any javascript application without using any tool. Let's see how.

React Without JSX

First, create a file named index.html. Inside it, add the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
</body>
</html>

We’re building a basic counter app using only React and plain JavaScript. No fancy tooling, just a single index.html file.

Then, include the React and ReactDOM packages from a CDN between the tags. These are all you need to run React in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js">
</head>
<body>
  <div id="root"></div>
</body>
</html>

Don't forget to create a root element in your document body where the counter app will be rendered.

Now, open a script tag and start creating the counter app. We have a text displaying the count and two buttons to increment or decrement the counter. Instead of JSX, we use React createElement to define the UI structure.

Finally, render the component inside the #root div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js">
</head>
<body>
  <div id="root"></div>
  
  <script>
  const { useState } = React;

function Counter() {
  const [count, setCount] = useState(0);

  return React.createElement(
    'div',
    { style: { textAlign: 'center', marginTop: '20px' } },
    React.createElement('h1', null, `Count: ${count}`),
    React.createElement(
      'button',
      { onClick: () => setCount(count + 1) },
      'Increment'
    ),
    React.createElement(
      'button',
      { onClick: () => setCount(count - 1), style: { marginLeft: '10px' } },
      'Decrement'
    )
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Counter));
  </script>
</body>
</html>

That’s it! Open your index.html in a browser, and you’ll see a working counter app. No build tools, no transpilers—just React and JavaScript.

Conclusion

This approach is perfect for learning React basics or quick prototyping without the setup overhead. Give it a try and explore React without the modern ecosystem!

Thank you for reading.