Created
April 15, 2020 19:01
-
-
Save jmmarco/6fcc0979418698b799231bf3b3eed5b9 to your computer and use it in GitHub Desktop.
Basic React template for beginners or small projects
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Popular Repos</title> | |
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
<script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script> | |
<style> | |
/* CSS styles go here */ | |
body { | |
font-family: sans-serif; | |
margin: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='app'></div> | |
<script> | |
// Regular JS can go here if you want | |
</script> | |
<script type='text/babel'> | |
// Javascript ES6 and JSX goes here | |
class App extends React.Component { | |
state = { | |
// App state goes here | |
name: 'Felix' | |
} | |
render() { | |
return ( | |
<div> | |
<p>Hello my name is {this.state.name}</p> | |
</div> | |
) | |
} | |
} | |
// This renders the our React app to the <div id="app"> container inside the <body> | |
ReactDOM.render( | |
<App />, | |
document.getElementById('app') | |
) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment