Skip to content

Instantly share code, notes, and snippets.

@abelsan

abelsan/twoReactComponents.html

Created June 11, 2020 02:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abelsan/771f0e04db39e9e5c474bbc4f00bbf12 to your computer and use it in GitHub Desktop.
Save abelsan/771f0e04db39e9e5c474bbc4f00bbf12 to your computer and use it in GitHub Desktop.
Download ZIP
Two react components
Raw
twoReactComponents.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello World - React Boostrap link</title>
<!-- ----------------- React scripts ----------------- -->
<!-- React libraries -->
<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>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- ----------------- Bootstrap styles ----------------- -->
<!-- Base target for links in page -->
<base href="https://getbootstrap.com/" target="_blank">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<!-- Bootstrap container -->
<main role="main" class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<!-- React example -->
<div id="root"></div><br>
<div id="car"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
class Toyota extends React.Component {
render() {
return (
<div className="card">
<div className="card-body">
{this.props.name}
</div>
</div>
);
}
}
ReactDOM.render(
<Toyota name="Toyota Corolla" />,
document.getElementById('car')
);
</script>
</main><!-- /.container -->
</body>
<!-- ----------------- Bootstrap scripts ----------------- -->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment