Skip to content

Instantly share code, notes, and snippets.

@stemcstudio

stemcstudio/Board.tsx

Last active January 31, 2022 20:15
Show Gist options
  • Save stemcstudio/a4a6605c0927275e16a67c486b316efe to your computer and use it in GitHub Desktop.
Save stemcstudio/a4a6605c0927275e16a67c486b316efe to your computer and use it in GitHub Desktop.
Download ZIP
React Official Tutorial Starter Code
Raw
README.md

React

Copyright (c) 2015-2020 David Geo Holmes.

Raw
Board.tsx
import * as React from 'react'
import { Component } from 'react'
import { Square } from './Square'
interface BoardProps {
}
interface BoardSpec {
}
export class Board extends Component<BoardProps, BoardSpec> {
constructor(props: BoardProps) {
super(props)
}
renderSquare(_i: number): JSX.Element {
return <Square />
}
render(): JSX.Element {
const status = 'Next player: X'
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
)
}
}
Raw
generated.index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<style>
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol,
ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
</style>
<script src="https://unpkg.com/[email protected]/dist/system.js"></script>
</head>
<body>
<script>
System.config({
"warnings": false,
"map": {
"prop-types": "https://unpkg.com/[email protected]/umd/prop-types.js",
"react": "https://unpkg.com/[email protected]/umd/react.development.js",
"react-dom": "https://unpkg.com/[email protected]/umd/react-dom.development.js"
}
});
</script>
<div id="container"></div>
<script>
System.register("./index.js", ["react", "react-dom", "./Board.js"], 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, Board_1, Game;
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;
},
function (Board_1_1) {
Board_1 = Board_1_1;
}
],
execute: function () {
Game = (function (_super) {
__extends(Game, _super);
function Game(props) {
return _super.call(this, props) || this;
}
Game.prototype.render = function () {
return (React.createElement("div", { className: "game" },
React.createElement("div", { className: "game-board" },
React.createElement(Board_1.Board, null)),
React.createElement("div", { className: "game-info" },
React.createElement("div", null),
React.createElement("ol", null))));
};
return Game;
}(react_1.Component));
react_dom_1.render(React.createElement(Game, null), document.getElementById('container'));
}
};
});
System.register("./Board.js", ["react", "./Square.js"], 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, Square_1, Board;
var __moduleName = context_1 && context_1.id;
return {
setters: [
function (React_1) {
React = React_1;
react_1 = React_1;
},
function (Square_1_1) {
Square_1 = Square_1_1;
}
],
execute: function () {
Board = (function (_super) {
__extends(Board, _super);
function Board(props) {
return _super.call(this, props) || this;
}
Board.prototype.renderSquare = function (_i) {
return React.createElement(Square_1.Square, null);
};
Board.prototype.render = function () {
var status = 'Next player: X';
return (React.createElement("div", null,
React.createElement("div", { className: "status" }, status),
React.createElement("div", { className: "board-row" },
this.renderSquare(0),
this.renderSquare(1),
this.renderSquare(2)),
React.createElement("div", { className: "board-row" },
this.renderSquare(3),
this.renderSquare(4),
this.renderSquare(5)),
React.createElement("div", { className: "board-row" },
this.renderSquare(6),
this.renderSquare(7),
this.renderSquare(8))));
};
return Board;
}(react_1.Component));
exports_1("Board", Board);
}
};
});
System.register("./Square.js", ["react"], 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, Square;
var __moduleName = context_1 && context_1.id;
return {
setters: [
function (React_1) {
React = React_1;
react_1 = React_1;
}
],
execute: function () {
Square = (function (_super) {
__extends(Square, _super);
function Square(props) {
return _super.call(this, props) || this;
}
Square.prototype.render = function () {
return (React.createElement("button", { className: "square" }));
};
return Square;
}(react_1.Component));
exports_1("Square", Square);
}
};
});
</script>
<script>
System.defaultJSExtensions = true
System.import('./index.js').catch(function(e) { console.error(e) })
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base href='/'>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div id='container'></div>
</body>
</html>
Raw
index.tsx
import * as React from 'react'
import { Component } from 'react'
import { render } from 'react-dom'
import { Board } from './Board'
interface GameProps {
}
interface GameSpec {
}
class Game extends Component<GameProps, GameSpec> {
constructor(props: GameProps) {
super(props)
}
render(): JSX.Element {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
)
}
}
render<Game>(
<Game />,
document.getElementById('container')
)
Raw
package.json
{
"description": "React Official Tutorial Starter Code",
"dependencies": {
"csstype": "^3.0.10",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"linting": true,
"name": "react-official-tutorial",
"version": "1.0.0",
"author": "David Geo Holmes",
"hideReferenceFiles": true,
"noLoopCheck": true,
"keywords": [
"React",
"Official",
"Tutorial",
"STEMCstudio",
"Starter",
"Code"
]
}
Raw
Square.tsx
import * as React from 'react'
import { Component } from 'react'
interface SquareProps {
}
interface SquareSpec {
}
export class Square extends Component<SquareProps, SquareSpec> {
constructor(props: SquareProps) {
super(props)
}
render(): JSX.Element {
return (
<button className="square">
{/* TODO */}
</button>
)
}
}
Raw
style.css
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol,
ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
Raw
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
}
Raw
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
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment