PROWAREtech

articles » current » javascript » react-without-jsx

JavaScript: React without JSX

Learn React without using the large JSX framework.

Why React Without JSX

  1. React is typically used to create single page, complex-workflow apps, but it can be added to an existing page — or website — simply and with very little work.
  2. React without JSX is very lean relative to with it.
  3. All the same state management exists without JSX.
  4. Once used to using React without JSX, this may become the preferred method!

React without JSX is accomplished through the React.createElement method which replaces the JSX markup tags.

HTML Code

Download all of these code files: REACTWITHOUTJSX.zip.

This HTML code has a loading page to indicate to the user that the page is being downloaded. It uses Bootstrap v5.0.0-alpha1 to dress-up the React output.

<!DOCTYPE html>
<!-- CUSTOMERS.HTML -->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- LOAD BOOTSTRAP CSS FILE -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
	<title>React Without JSX</title>
	<style>
	body {
		background-color: white;
	}
	.pencil::after {
		content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjE0Ni4xNDZhLjUuNSAwIDAgMSAuNzA4IDBsMyAzYS41LjUgMCAwIDEgMCAuNzA4bC0xMCAxMGEuNS41IDAgMCAxLS4xNjguMTFsLTUgMmEuNS41IDAgMCAxLS42NS0uNjVsMi01YS41LjUgMCAwIDEgLjExLS4xNjhsMTAtMTB6TTExLjIwNyAyLjVMMTMuNSA0Ljc5MyAxNC43OTMgMy41IDEyLjUgMS4yMDcgMTEuMjA3IDIuNXptMS41ODYgM0wxMC41IDMuMjA3IDQgOS43MDdWMTBoLjVhLjUuNSAwIDAgMSAuNS41di41aC41YS41LjUgMCAwIDEgLjUuNXYuNWguMjkzbDYuNS02LjV6bS05Ljc2MSA1LjE3NWwtLjEwNi4xMDYtMS41MjggMy44MjEgMy44MjEtMS41MjguMTA2LS4xMDZBLjUuNSAwIDAgMSA1IDEyLjVWMTJoLS41YS41LjUgMCAwIDEtLjUtLjVWMTFoLS41YS41LjUgMCAwIDEtLjQ2OC0uMzI1eiIvPg0KPC9zdmc+);
	}
	.trash::after {
		content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGQ9Ik01LjUgNS41QS41LjUgMCAwIDEgNiA2djZhLjUuNSAwIDAgMS0xIDBWNmEuNS41IDAgMCAxIC41LS41em0yLjUgMGEuNS41IDAgMCAxIC41LjV2NmEuNS41IDAgMCAxLTEgMFY2YS41LjUgMCAwIDEgLjUtLjV6bTMgLjVhLjUuNSAwIDAgMC0xIDB2NmEuNS41IDAgMCAwIDEgMFY2eiIvPg0KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC41IDNhMSAxIDAgMCAxLTEgMUgxM3Y5YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yVjRoLS41YTEgMSAwIDAgMS0xLTFWMmExIDEgMCAwIDEgMS0xSDZhMSAxIDAgMCAxIDEtMWgyYTEgMSAwIDAgMSAxIDFoMy41YTEgMSAwIDAgMSAxIDF2MXpNNC4xMTggNEw0IDQuMDU5VjEzYTEgMSAwIDAgMCAxIDFoNmExIDEgMCAwIDAgMS0xVjQuMDU5TDExLjg4MiA0SDQuMTE4ek0yLjUgM1YyaDExdjFoLTExeiIvPg0KPC9zdmc+);
	}
	.loading {
		position: absolute;
		display: flex;
		align-items: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	@keyframes loading {
		0% {
			height: 0;
		}
		50% {
			height: 50px;
		}
		100% {
			height: 0;
		}
	}
	.loading .l {
		background-color: dodgerblue;
		animation: loading .8s infinite;
		width: 10px;
		height: 0;
		margin: 0 3px;
		border-radius: 10px;
	}
	.loading .l:nth-child(2) {
		animation-delay: .1s;
	}
	.loading .l:nth-child(3) {
		animation-delay: .2s;
	}
	.loading .l:nth-child(4) {
		animation-delay: .3s;
	}
	.loading .l:nth-child(5) {
		animation-delay: .4s;
	}
	.loading .l:nth-child(6) {
		animation-delay: .5s;
	}
	.loading .l:nth-child(7) {
		animation-delay: .6s;
	}
	.loading .l:nth-child(8) {
		animation-delay: .7s;
	}
	</style>
</head>
<body>
	<div class="container text-center mt-5 mb-5">
		<h1>REACT Without JSX</h1>
	</div>

<noscript><p>You must enable JavaScript to use this site</p></noscript>

<div id="root">
	<div class="loading">
		<div class="l"></div>
		<div class="l"></div>
		<div class="l"></div>
		<div class="l"></div>
		<div class="l"></div>
		<div class="l"></div>
		<div class="l"></div>
		<div class="l"></div>
	</div>
</div>

<!-- LOAD BOOTSTRAP AND REACT -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

<script src="ziptostate.js"></script>
<script src="customers.js"></script>

</body>
</html>

ZIP TO STATE JavaScript Code

This code is used by the app to find the customer's state based on the zip.

// ziptostate.js
function zipToState(zipcode)
{
	var zipbystate = [
		'--', '--', '--', '--', '--', 'NY', 'PR', 'PR', 'VI', 'PR', 'MA', 'MA', 'MA', 
		'MA', 'MA', 'MA', 'MA', 'MA', 'MA', 'MA', 'MA', 'MA', 'MA', 'MA', 'MA', 'MA', 
		'MA', 'MA', 'RI', 'RI', 'NH', 'NH', 'NH', 'NH', 'NH', 'NH', 'NH', 'NH', 'NH', 
		'ME', 'ME', 'ME', 'ME', 'ME', 'ME', 'ME', 'ME', 'ME', 'ME', 'ME', 'VT', 'VT', 
		'VT', 'VT', 'VT', 'MA', 'VT', 'VT', 'VT', 'VT', 'CT', 'CT', 'CT', 'CT', 'CT', 
		'CT', 'CT', 'CT', 'CT', 'CT', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 
		'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'NJ', 'AE', 
		'AE', 'AE', 'AE', 'AE', 'AE', 'AE', 'AE', 'AE', '--', 'NY', 'NY', 'NY', 'NY', 
		'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 
		'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 
		'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 
		'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'NY', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 
		'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 
		'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 
		'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', 'PA', '--', 'PA', 'PA', 
		'PA', 'PA', 'DE', 'DE', 'DE', 'DC', 'VA', 'DC', 'DC', 'DC', 'DC', 'MD', 'MD', 
		'MD', 'MD', 'MD', 'MD', 'MD', '--', 'MD', 'MD', 'MD', 'MD', 'MD', 'MD', 'VA', 
		'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 
		'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 'VA', 
		'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 
		'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', 'WV', '--', 'NC', 'NC', 'NC', 
		'NC', 'NC', 'NC', 'NC', 'NC', 'NC', 'NC', 'NC', 'NC', 'NC', 'NC', 'NC', 'NC', 
		'NC', 'NC', 'NC', 'NC', 'SC', 'SC', 'SC', 'SC', 'SC', 'SC', 'SC', 'SC', 'SC', 
		'SC', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 
		'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'GA', 'FL', 'FL', 'FL', 'FL', 'FL', 
		'FL', 'FL', 'FL', 'FL', 'FL', 'FL', 'FL', 'FL', 'FL', 'FL', 'FL', 'FL', 'FL', 
		'FL', 'FL', 'AA', 'FL', 'FL', '--', 'FL', '--', 'FL', 'FL', '--', 'FL', 'AL', 
		'AL', 'AL', '--', 'AL', 'AL', 'AL', 'AL', 'AL', 'AL', 'AL', 'AL', 'AL', 'AL', 
		'AL', 'AL', 'AL', 'AL', 'AL', 'AL', 'TN', 'TN', 'TN', 'TN', 'TN', 'TN', 'TN', 
		'TN', 'TN', 'TN', 'TN', 'TN', 'TN', 'TN', 'TN', 'TN', 'MS', 'MS', 'MS', 'MS', 
		'MS', 'MS', 'MS', 'MS', 'MS', 'MS', 'MS', 'MS', 'GA', '--', 'KY', 'KY', 'KY', 
		'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 
		'KY', 'KY', 'KY', '--', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', 'KY', '--', 
		'--', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 
		'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 'OH', 
		'OH', 'OH', 'OH', 'OH', '--', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 
		'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'IN', 'MI', 
		'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 
		'MI', 'MI', 'MI', 'MI', 'MI', 'MI', 'IA', 'IA', 'IA', 'IA', 'IA', 'IA', 'IA', 
		'IA', 'IA', '--', 'IA', 'IA', 'IA', 'IA', 'IA', 'IA', 'IA', '--', '--', '--', 
		'IA', 'IA', 'IA', 'IA', 'IA', 'IA', 'IA', 'IA', 'IA', '--', 'WI', 'WI', 'WI', 
		'--', 'WI', 'WI', '--', 'WI', 'WI', 'WI', 'WI', 'WI', 'WI', 'WI', 'WI', 'WI', 
		'WI', 'WI', 'WI', 'WI', 'MN', 'MN', '--', 'MN', 'MN', 'MN', 'MN', 'MN', 'MN', 
		'MN', 'MN', 'MN', 'MN', 'MN', 'MN', 'MN', 'MN', 'MN', '--', 'DC', 'SD', 'SD', 
		'SD', 'SD', 'SD', 'SD', 'SD', 'SD', '--', '--', 'ND', 'ND', 'ND', 'ND', 'ND', 
		'ND', 'ND', 'ND', 'ND', '--', 'MT', 'MT', 'MT', 'MT', 'MT', 'MT', 'MT', 'MT', 
		'MT', 'MT', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 
		'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'IL', '--', 'IL', 'IL', 
		'IL', 'IL', 'IL', 'IL', 'IL', 'IL', 'MO', 'MO', '--', 'MO', 'MO', 'MO', 'MO', 
		'MO', 'MO', 'MO', 'MO', 'MO', '--', '--', 'MO', 'MO', 'MO', 'MO', 'MO', '--', 
		'MO', 'MO', 'MO', 'MO', 'MO', 'MO', 'MO', 'MO', 'MO', '--', 'KS', 'KS', 'KS', 
		'--', 'KS', 'KS', 'KS', 'KS', 'KS', 'KS', 'KS', 'KS', 'KS', 'KS', 'KS', 'KS', 
		'KS', 'KS', 'KS', 'KS', 'NE', 'NE', '--', 'NE', 'NE', 'NE', 'NE', 'NE', 'NE', 
		'NE', 'NE', 'NE', 'NE', 'NE', '--', '--', '--', '--', '--', '--', 'LA', 'LA', 
		'--', 'LA', 'LA', 'LA', 'LA', 'LA', 'LA', '--', 'LA', 'LA', 'LA', 'LA', 'LA', 
		'--', 'AR', 'AR', 'AR', 'AR', 'AR', 'AR', 'AR', 'AR', 'AR', 'AR', 'AR', 'AR', 
		'AR', 'AR', 'OK', 'OK', '--', 'TX', 'OK', 'OK', 'OK', 'OK', 'OK', 'OK', 'OK', 
		'OK', '--', 'OK', 'OK', 'OK', 'OK', 'OK', 'OK', 'OK', 'TX', 'TX', 'TX', 'TX', 
		'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 
		'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 
		'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 
		'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'TX', 'CO', 'CO', 'CO', 'CO', 'CO', 'CO', 
		'CO', 'CO', 'CO', 'CO', 'CO', 'CO', 'CO', 'CO', 'CO', 'CO', 'CO', '--', '--', 
		'--', 'WY', 'WY', 'WY', 'WY', 'WY', 'WY', 'WY', 'WY', 'WY', 'WY', 'WY', 'WY', 
		'ID', 'ID', 'ID', 'ID', 'ID', 'ID', 'ID', '--', 'UT', 'UT', '--', 'UT', 'UT', 
		'UT', 'UT', 'UT', '--', '--', 'AZ', 'AZ', 'AZ', 'AZ', '--', 'AZ', 'AZ', 'AZ', 
		'--', 'AZ', 'AZ', '--', '--', 'AZ', 'AZ', 'AZ', '--', '--', '--', '--', 'NM', 
		'NM', '--', 'NM', 'NM', 'NM', '--', 'NM', 'NM', 'NM', 'NM', 'NM', 'NM', 'NM', 
		'NM', 'NM', '--', '--', '--', '--', 'NV', 'NV', '--', 'NV', 'NV', 'NV', '--', 
		'NV', 'NV', '--', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', '--', 
		'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 
		'CA', 'CA', 'CA', 'CA', 'CA', 'CA', '--', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 
		'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 
		'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 'CA', 
		'AP', 'AP', 'AP', 'AP', 'AP', 'HI', 'HI', 'GU', 'OR', 'OR', 'OR', 'OR', 'OR', 
		'OR', 'OR', 'OR', 'OR', 'OR', 'WA', 'WA', 'WA', 'WA', 'WA', 'WA', 'WA', '--', 
		'WA', 'WA', 'WA', 'WA', 'WA', 'WA', 'WA', 'AK', 'AK', 'AK', 'AK', 'AK'
	];

	var prefix = zipcode.substring(0, 3);
	var index = parseInt(prefix); /* converts prefix to integer */
	if(zipcode.length > 5 || isNaN(index) || index >= zipbystate.length)
		return "--";
	else
		return zipbystate[index];
}

React Without JSX Code

Download all of these code files: REACTWITHOUTJSX.zip.

Here is the React code that does not use even a smidgen of JSX. See this article for information about JavaScript classes.

Note: this code can be converted to earlier versions of EcmaScript using babeljs.io or es6console.com.

// customers.js
'use strict';

(function(){
	
	const ce = React.createElement; // to simplify code: React.createElement == ce

	function setClasses(classes) {
		classes = classes || {};
		if(typeof classes == "string") {
			classes = {className: classes};
		}
		else if(typeof classes != "object") {
			classes = {};
		}
		return classes;
	}

	// CHILDREN can be a string, an element object, or array of element objects
	function DIV(children, classes, options) {
		classes = setClasses(classes);
		return ce("div", Object.assign(classes, options), children);
	}
	function TH(children, options) {
		return ce("th", options, children);
	}
	function TD(children, options) {
		return ce("td", options, children);
	}
	function TR(children, options) {
		return ce("tr", options, children);
	}
	function THEAD(children) {
		return ce("thead", null, children);
	}
	function TBODY(children) {
		return ce("tbody", null, children);
	}
	function TABLE(children, classes, options) {
		classes = setClasses(classes);
		return ce("table", Object.assign(classes, options), children);
	}
	function A(children, href, classes, options) {
		classes = setClasses(classes);
		href = href || "";
		return ce("a", Object.assign(classes, {href:href}, options), children);
	}
	function BUTTON(children, classes, type, options) {
		classes = setClasses(classes);
		type = type || "";
		return ce("button", Object.assign(classes, {type:type}, options), children);
	}
	function FORM(children, options) {
		return ce("form", options, children);
	}
	function INPUT(type, name, classes, options) {
		classes = setClasses(classes);
		return ce("input", Object.assign({type:type,name:name}, classes, options), null);
	}
	function SPAN(children, classes, options) {
		classes = setClasses(classes);
		return ce("span", Object.assign(classes, options), children);
	}
	function I(classes) {
		return ce("i", setClasses(classes), null);
	}

	function CreateTable(obj) {
		const thead = THEAD([
			TR(TH("Customers", {colSpan:"4"})),
			TR([
				TH("NAME"),
				TH("ADDRESS"),
				TH("ZIP (STATE)", {colSpan:"2"})
			])
		]);
		const tbody = TBODY(obj.state.customers.map((cust) => {
			return TR([
				TD(cust.name),
				TD(cust.address),
				TD(cust.zip + " (" + zipToState(cust.zip) + ")"),
				TD([
					BUTTON(I("pencil"), "btn btn-sm btn-primary mr-1", null, {onClick:obj.editCust.bind(obj, cust.id)}),
					BUTTON(I("trash"), "btn btn-sm btn-danger", null, {onClick:obj.confirmDelete.bind(obj, cust.id)})
				], {className: "text-center"})
			]);
		}));
		return TABLE([thead,tbody], "table table-bordered table-striped table-hover");
	}

	function CreateAddForm(obj) {
		var div, divs = [];

		div = DIV([
			SPAN("Name", "input-group-text"),
			INPUT("text", "name", "form-control", {onChange:obj.formChange,autoComplete:"off",required:1})
		], "input-group input-group-md mb-2");
		divs.push(div);

		div = DIV([
			SPAN("Address", "input-group-text"),
			INPUT("text", "address", "form-control", {onChange:obj.formChange,autoComplete:"off",required:1})
		], "input-group input-group-md mb-2");
		divs.push(div);

		div = DIV([
			SPAN("Zipcode", "input-group-text"),
			INPUT("text", "zip", "form-control", {onChange:obj.formChange,autoComplete:"off",required:1}),
			BUTTON("Add","btn btn-success", "submit"),
			BUTTON("Cancel", "btn btn-secondary", null, {onClick:obj.cancel.bind(obj)})
		], "input-group input-group-md mb-2");
		divs.push(div);

		return FORM(divs, {onSubmit:obj.post.bind(obj)});
	}

	function CreateEditForm(obj) {
		var div, divs = [];

		div = DIV([
			SPAN("Name", "input-group-text"),
			INPUT("text", "name", "form-control", {defaultValue:obj.form.name,onChange:obj.formChange,autoComplete:"off",required:1})
		], "input-group input-group-md mb-2");
		divs.push(div);

		div = DIV([
			SPAN("Address", "input-group-text"),
			INPUT("text", "address", "form-control", {defaultValue:obj.form.address,onChange:obj.formChange,autoComplete:"off",required:1})
		], "input-group input-group-md mb-2");
		divs.push(div);

		div = DIV([
			SPAN("Zipcode", "input-group-text"),
			INPUT("text", "zip", "form-control", {defaultValue:obj.form.zip,onChange:obj.formChange,autoComplete:"off",required:1}),
			BUTTON("Save","btn btn-success", "submit"),
			BUTTON("Cancel", "btn btn-secondary", null, {onClick:obj.cancel.bind(obj)})
		], "input-group input-group-md mb-2");
		divs.push(div);

		return FORM(divs, {onSubmit:obj.put.bind(obj, obj.form.id)});
	}

	function CreateUnorderedList(obj) {
		return ce("ul", {key:"cust-list", className:"list-group"}, obj.state.customers.map((cust) => {
			return ce("li", {key:cust.id, className:"list-group-item"}, cust.name + " - " + cust.address + " - " + cust.zip);
		}));
	}

	window.onload = function () {
		setTimeout(() => {
			ReactDOM.render(ce(Customers), document.getElementById("root"));
		}, 1000);
	};

	class Customers extends React.Component {
		constructor(props) {
			super(props);
			this.form = {id:"",name:"",address:"",zip:""};
			this.state = {
				customers: [],
				mode: "table"
			};
			this.formChange = this.formChange.bind(this);
		}

		componentDidMount() {
			const t = this;
			fetch("http://www.prowaretech.com/api/customers", {
				method: "GET"
			}).then((res) => {
				return res.json();
			}).then((customers) => {
				t.setState((prevState) => {
					prevState.customers = customers;
					prevState.mode = "table";
					return prevState;
				});
			});
		}

		renderTable() {
			return DIV([
				CreateTable(this),
				DIV(BUTTON("New Customer", "btn btn-primary mb-3", null, {onClick:this.addCust.bind(this)}), "text-center"),
				CreateUnorderedList(this)
			], "container");
		}

		renderAddForm() {
			return DIV(CreateAddForm(this), "container");
		}

		renderEditForm() {
			return DIV(CreateEditForm(this), "container");
		}

		renderConfirmDelete() {
			return DIV([
				BUTTON("Confirm Delete", "btn btn-danger mr-1", null, {onClick:this.delete.bind(this)}),
				BUTTON("Cancel", "btn btn-secondary", null, {onClick:this.cancel.bind(this)})
			], "container text-center");
		}

		render() {
			switch(this.state.mode)
			{
				case "table":
					return this.renderTable();
				case "add":
					return this.renderAddForm();
				case "edit":
					return this.renderEditForm();
				case "confirm":
					return this.renderConfirmDelete();
			}
		}

		cancel() {
			this.setState((prevState) => {
				prevState.mode = "table";
				return prevState;
			});
		}

		editCust(custid) {
			this.state.customers.forEach((cust) => {
				if(cust.id == custid) {
					this.form.id = custid;
					this.form.name = cust.name;
					this.form.address = cust.address;
					this.form.zip = cust.zip;
					this.setState((prevState) => {
						prevState.mode = "edit";
						return prevState;
					});
				}
			});
		}

		confirmDelete(custid) {
			this.setState((prevState) => {
				this.form.id = custid;
				prevState.mode = "confirm";
				return prevState;
			});
		}

		addCust() {
			this.setState((prevState) => {
				prevState.mode = "add";
				return prevState;
			});
		}

		post(event) {
			event.preventDefault();
			const t = this;
			if(t.state.customers.length >= 10) {
				alert("10 records is the limit");
				return;
			}
			fetch("http://www.prowaretech.com/api/customers", {
				method: "POST",
				headers: {"Content-Type":"application/json"},
				body: JSON.stringify(t.form)
			}).then((res) => {
				return res.json();
			}).then((cust) => {
				t.setState((prevState) => {
					prevState.customers.push(cust);
					prevState.mode = "table";
					return prevState;
				});
			});
		}

		put(custid) {
			event.preventDefault();
			const t = this;
			fetch("http://www.prowaretech.com/api/customers/" + custid, {
				method: "PUT",
				headers: {"Content-Type":"application/json"},
				body: JSON.stringify(t.form)
			}).then((res) => {
				return res.json();
			}).then((customer) => {
				t.setState((prevState) => {
					prevState.customers = prevState.customers.map((cust) => {
						if(cust.id == customer.id) {
							return customer;
						}
						else {
							return cust;
						}
					});
					prevState.mode = "table";
					return prevState;
				});
			});
		}

		delete() {
			const t = this;
			fetch("http://www.prowaretech.com/api/customers/" + t.form.id, {
				method: "DELETE"
			}).then((res) => {
				return res.json();
			}).then((deleted) => {
				t.setState((prevState) => {
					prevState.customers = prevState.customers.filter((cust) => {
						return cust.id != deleted.id;
					});
					prevState.mode = "table";
					return prevState;
				});
			});
		}

		formChange(event) {
			const t = event.target;
			this.form[t.name] = t.value;
		}
	}

})();

Download all of these code files: REACTWITHOUTJSX.zip.

Internet Explorer Compatible Code

Here is the above code transformed into Internet Explorer compatible code using ES6CONSOLE.com

// customers.js
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

(function () {

	var ce = React.createElement; // to simplify code: React.createElement == ce

	function setClasses(classes) {
		classes = classes || {};
		if (typeof classes == "string") {
			classes = { className: classes };
		} else if ((typeof classes === "undefined" ? "undefined" : _typeof(classes)) != "object") {
			classes = {};
		}
		return classes;
	}

	// CHILDREN can be a string, an element object, or array of element objects
	function DIV(children, classes, options) {
		classes = setClasses(classes);
		return ce("div", Object.assign(classes, options), children);
	}
	function TH(children, options) {
		return ce("th", options, children);
	}
	function TD(children, options) {
		return ce("td", options, children);
	}
	function TR(children, options) {
		return ce("tr", options, children);
	}
	function THEAD(children) {
		return ce("thead", null, children);
	}
	function TBODY(children) {
		return ce("tbody", null, children);
	}
	function TABLE(children, classes, options) {
		classes = setClasses(classes);
		return ce("table", Object.assign(classes, options), children);
	}
	function A(children, href, classes, options) {
		classes = setClasses(classes);
		href = href || "";
		return ce("a", Object.assign(classes, { href: href }, options), children);
	}
	function BUTTON(children, classes, type, options) {
		classes = setClasses(classes);
		type = type || "";
		return ce("button", Object.assign(classes, { type: type }, options), children);
	}
	function FORM(children, options) {
		return ce("form", options, children);
	}
	function INPUT(type, name, classes, options) {
		classes = setClasses(classes);
		return ce("input", Object.assign({ type: type, name: name }, classes, options), null);
	}
	function SPAN(children, classes, options) {
		classes = setClasses(classes);
		return ce("span", Object.assign(classes, options), children);
	}
	function I(classes) {
		return ce("i", setClasses(classes), null);
	}

	function CreateTable(obj) {
		var thead = THEAD([TR(TH("Customers", { colSpan: "4" })), TR([TH("NAME"), TH("ADDRESS"), TH("ZIP (STATE)", { colSpan: "2" })])]);
		var tbody = TBODY(obj.state.customers.map(function (cust) {
			return TR([TD(cust.name), TD(cust.address), TD(cust.zip + " (" + zipToState(cust.zip) + ")"), TD([BUTTON(I("pencil"), "btn btn-sm btn-primary mr-1", null, { onClick: obj.editCust.bind(obj, cust.id) }), BUTTON(I("trash"), "btn btn-sm btn-danger", null, { onClick: obj.confirmDelete.bind(obj, cust.id) })], { className: "text-center" })]);
		}));
		return TABLE([thead, tbody], "table table-bordered table-striped table-hover");
	}

	function CreateAddForm(obj) {
		var div,
		    divs = [];

		div = DIV([SPAN("Name", "input-group-text"), INPUT("text", "name", "form-control", { onChange: obj.formChange, autoComplete: "off", required: 1 })], "input-group input-group-md mb-2");
		divs.push(div);

		div = DIV([SPAN("Address", "input-group-text"), INPUT("text", "address", "form-control", { onChange: obj.formChange, autoComplete: "off", required: 1 })], "input-group input-group-md mb-2");
		divs.push(div);

		div = DIV([SPAN("Zipcode", "input-group-text"), INPUT("text", "zip", "form-control", { onChange: obj.formChange, autoComplete: "off", required: 1 }), BUTTON("Add", "btn btn-success", "submit"), BUTTON("Cancel", "btn btn-secondary", null, { onClick: obj.cancel.bind(obj) })], "input-group input-group-md mb-2");
		divs.push(div);

		return FORM(divs, { onSubmit: obj.post.bind(obj) });
	}

	function CreateEditForm(obj) {
		var div,
		    divs = [];

		div = DIV([SPAN("Name", "input-group-text"), INPUT("text", "name", "form-control", { defaultValue: obj.form.name, onChange: obj.formChange, autoComplete: "off", required: 1 })], "input-group input-group-md mb-2");
		divs.push(div);

		div = DIV([SPAN("Address", "input-group-text"), INPUT("text", "address", "form-control", { defaultValue: obj.form.address, onChange: obj.formChange, autoComplete: "off", required: 1 })], "input-group input-group-md mb-2");
		divs.push(div);

		div = DIV([SPAN("Zipcode", "input-group-text"), INPUT("text", "zip", "form-control", { defaultValue: obj.form.zip, onChange: obj.formChange, autoComplete: "off", required: 1 }), BUTTON("Save", "btn btn-success", "submit"), BUTTON("Cancel", "btn btn-secondary", null, { onClick: obj.cancel.bind(obj) })], "input-group input-group-md mb-2");
		divs.push(div);

		return FORM(divs, { onSubmit: obj.put.bind(obj, obj.form.id) });
	}

	function CreateUnorderedList(obj) {
		return ce("ul", { key: "cust-list", className: "list-group" }, obj.state.customers.map(function (cust) {
			return ce("li", { key: cust.id, className: "list-group-item" }, cust.name + " - " + cust.address + " - " + cust.zip);
		}));
	}

	window.onload = function () {
		setTimeout(function () {
			ReactDOM.render(ce(Customers), document.getElementById("root"));
		}, 1000);
	};

	var Customers = function (_React$Component) {
		_inherits(Customers, _React$Component);

		function Customers(props) {
			_classCallCheck(this, Customers);

			var _this = _possibleConstructorReturn(this, (Customers.__proto__ || Object.getPrototypeOf(Customers)).call(this, props));

			_this.form = { id: "", name: "", address: "", zip: "" };
			_this.state = {
				customers: [],
				mode: "table"
			};
			_this.formChange = _this.formChange.bind(_this);
			return _this;
		}

		_createClass(Customers, [{
			key: "componentDidMount",
			value: function componentDidMount() {
				var t = this;
				fetch("http://www.prowaretech.com/api/customers", {
					method: "GET"
				}).then(function (res) {
					return res.json();
				}).then(function (customers) {
					t.setState(function (prevState) {
						prevState.customers = customers;
						prevState.mode = "table";
						return prevState;
					});
				});
			}
		}, {
			key: "renderTable",
			value: function renderTable() {
				return DIV([CreateTable(this), DIV(BUTTON("New Customer", "btn btn-primary mb-3", null, { onClick: this.addCust.bind(this) }), "text-center"), CreateUnorderedList(this)], "container");
			}
		}, {
			key: "renderAddForm",
			value: function renderAddForm() {
				return DIV(CreateAddForm(this), "container");
			}
		}, {
			key: "renderEditForm",
			value: function renderEditForm() {
				return DIV(CreateEditForm(this), "container");
			}
		}, {
			key: "renderConfirmDelete",
			value: function renderConfirmDelete() {
				return DIV([BUTTON("Confirm Delete", "btn btn-danger mr-1", null, { onClick: this.delete.bind(this) }), BUTTON("Cancel", "btn btn-secondary", null, { onClick: this.cancel.bind(this) })], "container text-center");
			}
		}, {
			key: "render",
			value: function render() {
				switch (this.state.mode) {
					case "table":
						return this.renderTable();
					case "add":
						return this.renderAddForm();
					case "edit":
						return this.renderEditForm();
					case "confirm":
						return this.renderConfirmDelete();
				}
			}
		}, {
			key: "cancel",
			value: function cancel() {
				this.setState(function (prevState) {
					prevState.mode = "table";
					return prevState;
				});
			}
		}, {
			key: "editCust",
			value: function editCust(custid) {
				var _this2 = this;

				this.state.customers.forEach(function (cust) {
					if (cust.id == custid) {
						_this2.form.id = custid;
						_this2.form.name = cust.name;
						_this2.form.address = cust.address;
						_this2.form.zip = cust.zip;
						_this2.setState(function (prevState) {
							prevState.mode = "edit";
							return prevState;
						});
					}
				});
			}
		}, {
			key: "confirmDelete",
			value: function confirmDelete(custid) {
				var _this3 = this;

				this.setState(function (prevState) {
					_this3.form.id = custid;
					prevState.mode = "confirm";
					return prevState;
				});
			}
		}, {
			key: "addCust",
			value: function addCust() {
				this.setState(function (prevState) {
					prevState.mode = "add";
					return prevState;
				});
			}
		}, {
			key: "post",
			value: function post(event) {
				event.preventDefault();
				var t = this;
				if (t.state.customers.length >= 10) {
					alert("10 records is the limit");
					return;
				}
				fetch("http://www.prowaretech.com/api/customers", {
					method: "POST",
					headers: { "Content-Type": "application/json" },
					body: JSON.stringify(t.form)
				}).then(function (res) {
					return res.json();
				}).then(function (cust) {
					t.setState(function (prevState) {
						prevState.customers.push(cust);
						prevState.mode = "table";
						return prevState;
					});
				});
			}
		}, {
			key: "put",
			value: function put(custid) {
				event.preventDefault();
				var t = this;
				fetch("http://www.prowaretech.com/api/customers/" + custid, {
					method: "PUT",
					headers: { "Content-Type": "application/json" },
					body: JSON.stringify(t.form)
				}).then(function (res) {
					return res.json();
				}).then(function (customer) {
					t.setState(function (prevState) {
						prevState.customers = prevState.customers.map(function (cust) {
							if (cust.id == customer.id) {
								return customer;
							} else {
								return cust;
							}
						});
						prevState.mode = "table";
						return prevState;
					});
				});
			}
		}, {
			key: "delete",
			value: function _delete() {
				var t = this;
				fetch("http://www.prowaretech.com/api/customers/" + t.form.id, {
					method: "DELETE"
				}).then(function (res) {
					return res.json();
				}).then(function (deleted) {
					t.setState(function (prevState) {
						prevState.customers = prevState.customers.filter(function (cust) {
							return cust.id != deleted.id;
						});
						prevState.mode = "table";
						return prevState;
					});
				});
			}
		}, {
			key: "formChange",
			value: function formChange(event) {
				var t = event.target;
				this.form[t.name] = t.value;
			}
		}]);

		return Customers;
	}(React.Component);
})();
.
..
ie11
node-js
three-js
tutorial
JavaScript: About

The story of JavaScript.
JavaScript: Add Line Numbers to Preformatted Text

Automatically add line numbers to the HTML PRE element.
JavaScript: AJAX Library

A simple AJAX library for FormData and REST API.
JavaScript: AJAX Library for React

A simple AJAX library compatible with React.
JavaScript: AJAX Tutorial

A quick guide to Asynchronous JavaScript And XML (AJAX).
JavaScript: Analog Clock

Scalable analog clock made with HTML, CSS and JavaScript - no images required.
JavaScript: Animate-on-Scroll

Apply a CSS class to an element when it is scrolled into view to cause it to animate.
JavaScript: Auto-hide Text Sections That Are Too Long

Use HTML, CSS and JavaScript to better format a page by hiding large sections of text with a fade to a "read more" link that the user can choose to expand the text with. This is often used on user submitted comments.
JavaScript: Browser Window Utility

Find the true browser window size even if it has a scrollbar displayed.
JavaScript: Browser/Client Detection

Detect the browser and client that the end user is using.
JavaScript: Check for Mobile Device

How to determine if the browser is on a mobile device like Apple iPhone, Apple iPod, Google Android or Apple iPad including the iPad Pro with iPadOS version 15.x and 16.x or later.
JavaScript: Classes

Several ways to create classes.
JavaScript: Contact Form Creation Example

How to create a contact form using JavaScript createElement and appendChild procedures.
JavaScript: Cookie Utility

A utility to create, access and delete cookies from the browser.
JavaScript: Copy Text to Clipboard

How to copy text to the clipboard with Chrome, Edge, Firefox and Internet Explorer.
JavaScript: Determine HTML Element Position

Determine where an HTML object is on the screen.
JavaScript: Determine If an Element Has a Class

Determine if an HTML element has a class assigned to it.
JavaScript: Download Images with Progress Indicator Bar

How to download images to the browser while showing the user a percent completion of the download while they wait.
JavaScript: ES5 Array Methods

All the EcmaScript 5 Array Method Functions.
JavaScript: Event Utility

A utility for handling events in the browser.
JavaScript: How to Create WordPress Slugs

Create slugs with only standard characters for use in a URL or other purpose.
JavaScript: Is a Number a Power of Two (2)

How to check or determine if a number has a base of 2 without using modulo operations for maximum performance.
JavaScript: Lazy Load Images

Lazy load images; also works to know if an element has scrolled into view.
JavaScript: LERP - Linear Interpolation Function

A useful function for easing the transition between two values over time (examples included).
JavaScript: Make a Scroll Tracker for a Website

Use JavaScript, CSS and HTML to make a bar move across the screen of a website page to show the user where they are scrolled to.
JavaScript: Parallax Effect

Shift on x-axis and y-axis (horizontal and vertical) parallax effect library.
JavaScript: Parse Internet Links in Plain Text Using Regular Expressions

Use Regex to parse Internet links in plain text and convert to HTML anchor elements.
JavaScript: Play a Pop Sound in a Web Browser

How to play a pop sound in an Internet browser.
JavaScript: Position HTML Element

Position a Speech Bubble (DIV Element) with object.getBoundingClientRect().
JavaScript: React without JSX

Learn React without using the large JSX framework.
JavaScript: Remove SCRIPT Elements from HTML Using Regular Expressions

Use regular expressions to remove SCRIPT elements from HTML text.
JavaScript: REST API Tutorial

Understand how the REST API works with examples.
JavaScript: Reveal and Hide Password in HTML Textbox

Show or hide the password in HTML textboxes.
JavaScript: Slide-on-Scroll

Add a sliding effect to the page as it is scrolled.
JavaScript: Stop Developer Tools and the Inspect Element Option

How to disable F12 and Ctrl+Shift+I for developer tools and the inspect element context menu option on all browsers.
JavaScript: Tips and Tricks

Useful tips and tricks for the budding JavaScript programmer.
JavaScript: URI/URL Parser

Parse a URI/URL location; separate the parameters, hashtag; automatically generate arrays for multiple valued parameters.
JavaScript: Use FileReader to Read the Contents of Files

How to use the FileReader to access file contents in an Internet web browser.
JavaScript: Validate Credit Card Number Using Regular Expressions and Luhn Check

Use the Luhn Check to validate credit card numbers.
JavaScript: Validate Email Address Using Regular Expressions

How to validate email addresses by checking their format using client-side code.
JavaScript: Whole Website Example

An idea for a whole website using mostly HTML/CSS with just a little JavaScript.

PROWAREtech

Hello there! How can I help you today?
Ask any question

PROWAREtech

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
ACCEPT REJECT