Skip to content

Instantly share code, notes, and snippets.

@adamaig

adamaig/reactbase.html

Created July 9, 2016 17:14
Show Gist options
  • Save adamaig/bafae351014099db7d5a8f7d5df6bf20 to your computer and use it in GitHub Desktop.
Save adamaig/bafae351014099db7d5a8f7d5df6bf20 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
reactbase.html
<!DOCTYPE html>
<html>
<head>
<title>Intro to React</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<style>
.user-profile {
width: 200px;
padding: 3px;
border: solid black thin;
}
.user-profile img {
width: 48px;
height: 48px;
border-radius: 24px;
border: thin black solid;
}
.user-profile .details {
display: inline-block;
vertical-align: top;
margin-left: 10px;
margin-top: 5px;
}
.user-profile .color {
margin-top: 3px;
border-bottom: 2px solid blue;
}
.user-profile .first-name:after {
content: " "
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var UserProfile = function() {
return (
<div className='user-profile'>
<img src="https://randomuser.me/api/portraits/med/lego/1.jpg" />
<div className='details'>
<div className='name'>
<span className="first-name">Adam</span>
<span className="last-name">Ingram-Goble</span>
</div>
<div className='color'>Color: blue</div>
</div>
</div>
);
};
ReactDOM.render(
<UserProfile />,
document.getElementById('app')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment