Luke Watts lukewatts

## index.js
import dom from 'jsx-render';

class Test {
    constructor()
    {
        var app = document.getElementById('app')
        var htmlCreatedByJSXRender = dom('h1', {}, 'Test Class');
        app.appendChild(htmlCreatedByJSXRender);
    }
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

## package.json
{
  "scripts": {
    "start": "webpack --watch"
  },
  "dependencies": { },
  "devDependencies": { }
}

## index.js
class Test
{
    constructor()
    {
        console.log('Test class successfully initialized');
    }
}

new Test;

## directory-structure-01.txt
root
  |-- node_modules
        |-- ...
  |-- src
        |-- index.js
  |-- .babelrc
  |-- index.html
  |-- package.json
  |-- webpack.config.js

## webpack.config.js
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'src', 'index.js'), // Main file will be at ./src/index.js
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js' // Bundled file will be at ./build/bundle.js
    },
    module: {
        rules: [

## .babelrc
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "dom"
    }]
  ]
}

## index.js
import Reactbone, { Component } from './Reactbone';

class Test extends Component
{
    constructor()
    {
        super();
        this.view('#app');
    }

## Reactbone.js
import dom from 'jsx-render';

const Reactbone = (tagname, attrs, ...children) => dom(tagname, attrs, ...children);
export default Reactbone;

export class Component {
    view(el)
    {
        const $el = document.querySelector(el);
        $el.appendChild(this.render());

## install-npm-packages.sh
yarn add backbone underscore webpack webpack-cli babel-loader @babel/core @babel/plugin-transform-react-jsx jsx-render
	import dom from 'jsx-render';

	class Test {
	constructor()
	{
	var app = document.getElementById('app')
	var htmlCreatedByJSXRender = dom('h1', {}, 'Test Class');
	app.appendChild(htmlCreatedByJSXRender);
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<div id="app"></div>
	{
	"scripts": {
	"start": "webpack --watch"
	},
	"dependencies": { },
	"devDependencies": { }
	}
	class Test
	{
	constructor()
	{
	console.log('Test class successfully initialized');
	}
	}

	new Test;
	root
	\|-- node_modules
	\|-- ...
	\|-- src
	\|-- index.js
	\|-- .babelrc
	\|-- index.html
	\|-- package.json
	\|-- webpack.config.js
	const path = require('path');

	module.exports = {
	entry: path.resolve(__dirname, 'src', 'index.js'), // Main file will be at ./src/index.js
	output: {
	path: path.resolve(__dirname, 'build'),
	filename: 'bundle.js' // Bundled file will be at ./build/bundle.js
	},
	module: {
	rules: [
	{
	"plugins": [
	["@babel/plugin-transform-react-jsx", {
	"pragma": "dom"
	}]
	]
	}
	import Reactbone, { Component } from './Reactbone';

	class Test extends Component
	{
	constructor()
	{
	super();
	this.view('#app');
	}
	import dom from 'jsx-render';

	const Reactbone = (tagname, attrs, ...children) => dom(tagname, attrs, ...children);
	export default Reactbone;

	export class Component {
	view(el)
	{
	const $el = document.querySelector(el);
	$el.appendChild(this.render());