From 59424a9b7fed8f62734aff4c15e2908da06427c7 Mon Sep 17 00:00:00 2001
From: Andrej Rasevic <andrej@rasevicengineering.com>
Date: Fri, 11 Jan 2019 12:21:25 -0500
Subject: [PATCH] code along for react more complex component example
---
cmsc388a/code_along/add_card_component.html | 66 ++++++++++++++++
cmsc388a/code_along/add_label_component.html | 79 +++++++++++++++++++
cmsc388a/code_along/add_square_component.html | 71 +++++++++++++++++
cmsc388a/code_along/component_skeletons.html | 57 +++++++++++++
cmsc388a/code_along/skeleton.html | 32 ++++++++
cmsc388a/code_along/with_properties.html | 79 +++++++++++++++++++
6 files changed, 384 insertions(+)
create mode 100644 cmsc388a/code_along/add_card_component.html
create mode 100644 cmsc388a/code_along/add_label_component.html
create mode 100644 cmsc388a/code_along/add_square_component.html
create mode 100644 cmsc388a/code_along/component_skeletons.html
create mode 100644 cmsc388a/code_along/skeleton.html
create mode 100644 cmsc388a/code_along/with_properties.html
diff --git a/cmsc388a/code_along/add_card_component.html b/cmsc388a/code_along/add_card_component.html
new file mode 100644
index 0000000..9c40932
--- /dev/null
+++ b/cmsc388a/code_along/add_card_component.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>More Components</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+
+ <script type="text/babel">
+
+ class Square extends React.Component {
+ render() {
+ return(
+ <br/>
+ );
+ }
+ }
+
+ class Label extends React.Component {
+ render() {
+ return (
+ <br/>
+ );
+ }
+ }
+
+ class Card extends React.Component {
+ render() {
+ var cardStyle = {
+ height: 200,
+ width: 150,
+ padding: 0,
+ backgroundColor: "#FFF",
+ boxShadow: "0px 0px 5px #666"
+ };
+ return (
+ <div style={cardStyle}>
+
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <Card/>
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/add_label_component.html b/cmsc388a/code_along/add_label_component.html
new file mode 100644
index 0000000..3f5ff2d
--- /dev/null
+++ b/cmsc388a/code_along/add_label_component.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>More Components</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+
+ <script type="text/babel">
+
+ class Square extends React.Component {
+ render() {
+ var squareStyle = {
+ height: 150,
+ backgroundColor: "#FF6663"
+ };
+ return(
+ <div style={squareStyle}>
+ </div>
+ );
+ }
+ }
+
+ class Label extends React.Component {
+ render() {
+ var labelStyle = {
+ fontFamily: "sans-serif",
+ fontWeight: "bold",
+ padding: 13,
+ margin: 0
+ };
+
+ return (
+ <p style={labelStyle}>#FF6663</p>
+ );
+ }
+ }
+
+ class Card extends React.Component {
+ render() {
+ var cardStyle = {
+ height: 200,
+ width: 150,
+ padding: 0,
+ backgroundColor: "#FFF",
+ boxShadow: "0px 0px 5px #666"
+ };
+ return (
+ <div style={cardStyle}>
+ <Square />
+ <Label />
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <Card />
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/add_square_component.html b/cmsc388a/code_along/add_square_component.html
new file mode 100644
index 0000000..1b83dc9
--- /dev/null
+++ b/cmsc388a/code_along/add_square_component.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>More Components</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+
+ <script type="text/babel">
+
+ class Square extends React.Component {
+ render() {
+ var squareStyle = {
+ height: 150,
+ backgroundColor: "#FF6663"
+ };
+ return(
+ <div style={squareStyle}>
+ </div>
+ );
+ }
+ }
+
+ class Label extends React.Component {
+ render() {
+ return (
+ <br/>
+ );
+ }
+ }
+
+ class Card extends React.Component {
+ render() {
+ var cardStyle = {
+ height: 200,
+ width: 150,
+ padding: 0,
+ backgroundColor: "#FFF",
+ boxShadow: "0px 0px 5px #666"
+ };
+ return (
+ <div style={cardStyle}>
+ <Square />
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <Card/>
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/component_skeletons.html b/cmsc388a/code_along/component_skeletons.html
new file mode 100644
index 0000000..0790a6b
--- /dev/null
+++ b/cmsc388a/code_along/component_skeletons.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>More Components</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+
+ <script type="text/babel">
+ // why are we returning the <br/> ??
+ class Square extends React.Component {
+ render() {
+ return(
+ <br/>
+ );
+ }
+ }
+
+ class Label extends React.Component {
+ render() {
+ return (
+ <br/>
+ );
+ }
+ }
+
+ class Card extends React.Component {
+ render() {
+ return (
+ <br/>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/skeleton.html b/cmsc388a/code_along/skeleton.html
new file mode 100644
index 0000000..465eee9
--- /dev/null
+++ b/cmsc388a/code_along/skeleton.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>More Components</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+
+ <script type="text/babel">
+ ReactDOM.render(
+ <div>
+
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/cmsc388a/code_along/with_properties.html b/cmsc388a/code_along/with_properties.html
new file mode 100644
index 0000000..64de516
--- /dev/null
+++ b/cmsc388a/code_along/with_properties.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>More Components</title>
+ <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+ <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+
+ <style>
+ #container {
+ padding: 50px;
+ background-color: #FFF;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="container"></div>
+
+ <script type="text/babel">
+
+ class Square extends React.Component {
+ render() {
+ var squareStyle = {
+ height: 150,
+ backgroundColor: this.props.color
+ };
+ return(
+ <div style={squareStyle}>
+ </div>
+ );
+ }
+ }
+
+ class Label extends React.Component {
+ render() {
+ var labelStyle = {
+ fontFamily: "sans-serif",
+ fontWeight: "bold",
+ padding: 13,
+ margin: 0
+ };
+
+ return (
+ <p style={labelStyle}>{this.props.color}</p>
+ );
+ }
+ }
+
+ class Card extends React.Component {
+ render() {
+ var cardStyle = {
+ height: 200,
+ width: 150,
+ padding: 0,
+ backgroundColor: "#FFF",
+ boxShadow: "0px 0px 5px #666"
+ };
+ return (
+ <div style={cardStyle}>
+ <Square color={this.props.color} />
+ <Label color={this.props.color} />
+ </div>
+ );
+ }
+ }
+
+ ReactDOM.render(
+ <div>
+ <Card color="#004D4D" />
+ </div>,
+ document.querySelector("#container")
+ );
+ </script>
+</body>
+
+</html>
\ No newline at end of file
--
GitLab