nkvenom/recursive-render.html

## 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>