Skip to content

Instantly share code, notes, and snippets.

@rileyrg
Created November 9, 2022 23:12
Show Gist options
  • Save rileyrg/27551b0e6fee4993ab8bef32bead6222 to your computer and use it in GitHub Desktop.
Save rileyrg/27551b0e6fee4993ab8bef32bead6222 to your computer and use it in GitHub Desktop.
My first react pen
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
body{
background-image: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment