stemcstudio/README.md

## README.md

      
    Raw
  

              README.md
            
          
    React

Copyright (c) 2015-2020 David Geo Holmes.

  
## generated.index.html
<!DOCTYPE html>
<html>

<head>
    <base href="/">
    <style>
        //
    </style>
    <script src="https://unpkg.com/systemjs@0.19.34/dist/system.js"></script>
</head>

<body>
    <script>
        System.config({
          "warnings": false,
          "map": {
            "prop-types": "https://unpkg.com/prop-types@15.8.1/umd/prop-types.js",
            "react": "https://unpkg.com/react@17.0.2/umd/react.development.js",
            "react-dom": "https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
          }
        });
    </script>
    <div id="container"></div>


    <script>
        System.register("./index.js", ["react", "react-dom"], function (exports_1, context_1) {
            "use strict";
            var __extends = (this && this.__extends) || (function () {
                var extendStatics = function (d, b) {
                    extendStatics = Object.setPrototypeOf ||
                        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
                        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
                    return extendStatics(d, b);
                };
                return function (d, b) {
                    if (typeof b !== "function" && b !== null)
                        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
                    extendStatics(d, b);
                    function __() { this.constructor = d; }
                    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
                };
            })();
            var React, react_1, react_dom_1, AppComponent;
            var __moduleName = context_1 && context_1.id;
            return {
                setters: [
                    function (React_1) {
                        React = React_1;
                        react_1 = React_1;
                    },
                    function (react_dom_1_1) {
                        react_dom_1 = react_dom_1_1;
                    }
                ],
                execute: function () {
                    AppComponent = (function (_super) {
                        __extends(AppComponent, _super);
                        function AppComponent(props) {
                            var _this = _super.call(this, props) || this;
                            _this.state = { name: 'World' };
                            return _this;
                        }
                        AppComponent.prototype.render = function () {
                            return (React.createElement("h1", null, "".concat(this.props.greeting, ", ").concat(this.state.name, "!")));
                        };
                        return AppComponent;
                    }(react_1.Component));
                    react_dom_1.render(React.createElement(AppComponent, { greeting: 'Hello' }), document.getElementById('container'));
                }
            };
        });
    </script>
    <script>
        System.defaultJSExtensions = true
        System.import('./index.js').catch(function(e) { console.error(e) })
    </script>
</body>

</html>

## index.html
<!DOCTYPE html>
<html>

<head>
    <base href='/'>
    <link rel='stylesheet' href='style.css'>
</head>

<body>
    <div id='container'></div>
</body>

</html>

## index.tsx
import * as React from 'react'
import { Component } from 'react'
import { render } from 'react-dom'

interface AppProps {
    greeting: string
}

interface AppSpec {
    name: string
}

class AppComponent extends Component<AppProps, AppSpec> {
    constructor(props: AppProps) {
        super(props)
        this.state = { name: 'World' }
    }
    render(): JSX.Element {
        return (
            <h1>{`${this.props.greeting}, ${this.state.name}!`}</h1>
        )
    }
}

render<AppComponent>(
    <AppComponent greeting='Hello' />,
    document.getElementById('container')
)

## package.json
{
    "description": "React Hello World",
    "dependencies": {
        "csstype": "^3.0.10",
        "prop-types": "^15.8.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "linting": true,
    "name": "react-hello-world",
    "version": "1.0.0",
    "author": "David Geo Holmes",
    "hideReferenceFiles": true,
    "noLoopCheck": true,
    "keywords": [
        "React",
        "Hello",
        "World",
        "STEMCstudio"
    ]
}

## style.css
//

## tsconfig.json
{
    "allowJs": false,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "system",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": false,
    "strict": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "traceResolution": true
}

## tslint.json
{
    "rules": {
        "array-type": [
            true,
            "array"
        ],
        "curly": false,
        "comment-format": [
            true,
            "check-space"
        ],
        "eofline": true,
        "forin": true,
        "jsdoc-format": true,
        "new-parens": true,
        "no-conditional-assignment": false,
        "no-consecutive-blank-lines": true,
        "no-construct": true,
        "no-for-in-array": true,
        "no-inferrable-types": [
            true
        ],
        "no-magic-numbers": false,
        "no-shadowed-variable": true,
        "no-string-throw": true,
        "no-trailing-whitespace": [
            true,
            "ignore-jsdoc"
        ],
        "no-var-keyword": true,
        "one-variable-per-declaration": [
            true,
            "ignore-for-loop"
        ],
        "prefer-const": true,
        "prefer-for-of": true,
        "prefer-function-over-method": false,
        "prefer-method-signature": true,
        "radix": true,
        "semicolon": [
            true,
            "never"
        ],
        "trailing-comma": [
            true,
            {
                "multiline": "never",
                "singleline": "never"
            }
        ],
        "triple-equals": true,
        "use-isnan": true
    }
}
	<!DOCTYPE html>
	<html>

	<head>
	<base href="/">
	<style>
	//
	</style>
	<script src="https://unpkg.com/systemjs@0.19.34/dist/system.js"></script>
	</head>

	<body>
	<script>
	System.config({
	"warnings": false,
	"map": {
	"prop-types": "https://unpkg.com/prop-types@15.8.1/umd/prop-types.js",
	"react": "https://unpkg.com/react@17.0.2/umd/react.development.js",
	"react-dom": "https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
	}
	});
	</script>
	<div id="container"></div>


	<script>
	System.register("./index.js", ["react", "react-dom"], function (exports_1, context_1) {
	"use strict";
	var __extends = (this && this.__extends) \|\| (function () {
	var extendStatics = function (d, b) {
	extendStatics = Object.setPrototypeOf \|\|
	({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
	function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
	return extendStatics(d, b);
	};
	return function (d, b) {
	if (typeof b !== "function" && b !== null)
	throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
	extendStatics(d, b);
	function __() { this.constructor = d; }
	d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	};
	})();
	var React, react_1, react_dom_1, AppComponent;
	var __moduleName = context_1 && context_1.id;
	return {
	setters: [
	function (React_1) {
	React = React_1;
	react_1 = React_1;
	},
	function (react_dom_1_1) {
	react_dom_1 = react_dom_1_1;
	}
	],
	execute: function () {
	AppComponent = (function (_super) {
	__extends(AppComponent, _super);
	function AppComponent(props) {
	var _this = _super.call(this, props) \|\| this;
	_this.state = { name: 'World' };
	return _this;
	}
	AppComponent.prototype.render = function () {
	return (React.createElement("h1", null, "".concat(this.props.greeting, ", ").concat(this.state.name, "!")));
	};
	return AppComponent;
	}(react_1.Component));
	react_dom_1.render(React.createElement(AppComponent, { greeting: 'Hello' }), document.getElementById('container'));
	}
	};
	});
	</script>
	<script>
	System.defaultJSExtensions = true
	System.import('./index.js').catch(function(e) { console.error(e) })
	</script>
	</body>

	</html>
	import * as React from 'react'
	import { Component } from 'react'
	import { render } from 'react-dom'

	interface AppProps {
	greeting: string
	}

	interface AppSpec {
	name: string
	}

	class AppComponent extends Component<AppProps, AppSpec> {
	constructor(props: AppProps) {
	super(props)
	this.state = { name: 'World' }
	}
	render(): JSX.Element {
	return (
	<h1>{`${this.props.greeting}, ${this.state.name}!`}</h1>
	)
	}
	}

	render<AppComponent>(
	<AppComponent greeting='Hello' />,
	document.getElementById('container')
	)
	{
	"description": "React Hello World",
	"dependencies": {
	"csstype": "^3.0.10",
	"prop-types": "^15.8.1",
	"react": "^17.0.2",
	"react-dom": "^17.0.2"
	},
	"linting": true,
	"name": "react-hello-world",
	"version": "1.0.0",
	"author": "David Geo Holmes",
	"hideReferenceFiles": true,
	"noLoopCheck": true,
	"keywords": [
	"React",
	"Hello",
	"World",
	"STEMCstudio"
	]
	}
	{
	"allowJs": false,
	"declaration": true,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"jsx": "react",
	"module": "system",
	"noImplicitAny": true,
	"noImplicitReturns": true,
	"noImplicitThis": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"preserveConstEnums": true,
	"removeComments": true,
	"sourceMap": false,
	"strict": true,
	"strictNullChecks": true,
	"suppressImplicitAnyIndexErrors": true,
	"target": "es5",
	"traceResolution": true
	}
	{
	"rules": {
	"array-type": [
	true,
	"array"
	],
	"curly": false,
	"comment-format": [
	true,
	"check-space"
	],
	"eofline": true,
	"forin": true,
	"jsdoc-format": true,
	"new-parens": true,
	"no-conditional-assignment": false,
	"no-consecutive-blank-lines": true,
	"no-construct": true,
	"no-for-in-array": true,
	"no-inferrable-types": [
	true
	],
	"no-magic-numbers": false,
	"no-shadowed-variable": true,
	"no-string-throw": true,
	"no-trailing-whitespace": [
	true,
	"ignore-jsdoc"
	],
	"no-var-keyword": true,
	"one-variable-per-declaration": [
	true,
	"ignore-for-loop"
	],
	"prefer-const": true,
	"prefer-for-of": true,
	"prefer-function-over-method": false,
	"prefer-method-signature": true,
	"radix": true,
	"semicolon": [
	true,
	"never"
	],
	"trailing-comma": [
	true,
	{
	"multiline": "never",
	"singleline": "never"
	}
	],
	"triple-equals": true,
	"use-isnan": true
	}
	}