Skip to content
Snippets Groups Projects
Commit 59424a9b authored by Andrej Rasevic's avatar Andrej Rasevic
Browse files

code along for react more complex component example

parent 4ba92bcf
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
cmsc388a/code_along/add_card_component.html 0 → 100644
+ 66
− 0
View file @ 59424a9b
<!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
cmsc388a/code_along/add_label_component.html 0 → 100644
+ 79
− 0
View file @ 59424a9b
<!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
cmsc388a/code_along/add_square_component.html 0 → 100644
+ 71
− 0
View file @ 59424a9b
<!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
cmsc388a/code_along/component_skeletons.html 0 → 100644
+ 57
− 0
View file @ 59424a9b
<!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
cmsc388a/code_along/skeleton.html 0 → 100644
+ 32
− 0
View file @ 59424a9b
<!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
cmsc388a/code_along/with_properties.html 0 → 100644
+ 79
− 0
View file @ 59424a9b
<!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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment