nkvenom · August 5, 2022 08:15 · ConnerAiken · Oct 12, 2017 · NickersWeb · Sep 2, 2018
diff --git a/recursive-render.html b/recursive-render.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
 	<meta charset="UTF-8">
 	<title>Recursive Component in React</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.development.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.development.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 </head>

 <body>
 	<div id="react-app"></div>
 	<script type="text/babel">

 		function BookmarkNode({ node }) {
 			if (!node.children) return <a href={node.url}> {node.name} </a>;

 			return (
 				<div>
 					<strong>{node.name}</strong>
 					<ul>
 						{node.children.map(c => (<li key={c.id}> <BookmarkNode node={c} /> </li>))}
 					</ul>
 				</div>
 			);
 		};


 		var FAKE_BOOKMARKS = {
 			"id": "1",
 			"name": "Bookmarks bar",
 			"children": [
 				{
 					"id": "6",
 					"name": "TensorFlow",
 					"url": "http://www.tensorflow.org/"
 				},
 				{
 					"id": "96",
 					"name": "Introduction to Deep Learning with Python",
 					"url": "https://www.youtube.com/watch?v=S75EdAcXHKk"
 				},
 				{
 					"children": [
 						{
 							"id": "8",
 							"name": "What interests reddit?",
 							"url": "http://markallenthornton.com/blog/what-interests-reddit/?utm_content=buffer6ba72&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer"
 						},
 						{
 							"id": "215",
 							"name": "Foobaz",
 							"url": "http://www.code-labs.io/",
 							"children": [
 								{
 									"id": "9",
 									"name": "NG2",
 									"url": "https://angular.io"
 								},
 								{
 									"id": "11",
 									"name": "Fast Refresh",
 									"url": "https://facebook.github.io/react-native/docs/fast-refresh",
 									"children": [{
 										"id": 56,
 										"name": "Hot Reloading with Time Travel",
 										"url": "https://www.youtube.com/watch?v=xsSnOQynTHs"
 									},
 									{
 										"id": 196,
 										"name": "Gource Visualization",
 										"url": "https://www.youtube.com/watch?v=bzLCvFG6WbY"
 									}]
 								}
 							]
 						}
 					],
 					"id": "7",
 					"name": "Dev",
 				}
 			]
 		};

 		ReactDOM.render(
 			<BookmarkNode node={FAKE_BOOKMARKS} />, document.getElementById('react-app')
 		);
 	</script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Recursive Component in React</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
	</head>

	<body>
	<div id="react-app"></div>
	<script type="text/babel">

	function BookmarkNode({ node }) {
	if (!node.children) return <a href={node.url}> {node.name} </a>;

	return (
	<div>
	<strong>{node.name}</strong>
	<ul>
	{node.children.map(c => (<li key={c.id}> <BookmarkNode node={c} /> </li>))}
	</ul>
	</div>
	);
	};


	var FAKE_BOOKMARKS = {
	"id": "1",
	"name": "Bookmarks bar",
	"children": [
	{
	"id": "6",
	"name": "TensorFlow",
	"url": "http://www.tensorflow.org/"
	},
	{
	"id": "96",
	"name": "Introduction to Deep Learning with Python",
	"url": "https://www.youtube.com/watch?v=S75EdAcXHKk"
	},
	{
	"children": [
	{
	"id": "8",
	"name": "What interests reddit?",
	"url": "http://markallenthornton.com/blog/what-interests-reddit/?utm_content=buffer6ba72&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer"
	},
	{
	"id": "215",
	"name": "Foobaz",
	"url": "http://www.code-labs.io/",
	"children": [
	{
	"id": "9",
	"name": "NG2",
	"url": "https://angular.io"
	},
	{
	"id": "11",
	"name": "Fast Refresh",
	"url": "https://facebook.github.io/react-native/docs/fast-refresh",
	"children": [{
	"id": 56,
	"name": "Hot Reloading with Time Travel",
	"url": "https://www.youtube.com/watch?v=xsSnOQynTHs"
	},
	{
	"id": 196,
	"name": "Gource Visualization",
	"url": "https://www.youtube.com/watch?v=bzLCvFG6WbY"
	}]
	}
	]
	}
	],
	"id": "7",
	"name": "Dev",
	}
	]
	};

	ReactDOM.render(
	<BookmarkNode node={FAKE_BOOKMARKS} />, document.getElementById('react-app')
	);
	</script>
	</body>

	</html>