\n
\n
<!DOCTYPE html>
\n
<html lang="en">
\n
<head>
\n
<meta charset="UTF-8">
\n
<meta name="viewport" content="width=device-width,\n initial-scale=1.0">\n
\n
<meta http-equiv="X-UA-Compatible" content="ie=edge">
\n
<title>HTML 5 Boilerplate</title>
\n
<link rel="stylesheet" href="style.css">
\n
</head>
\n
<body>
\n
<script src="index.js"></script>
\n
</body>
\n
</html>
\n
\n
\n
function Greeting({ name }) {
\n
return <h1>Hello, {name}!</h1>;
\n
}
\n
\n
export default function App() {
\n
return (
\n
<div>
\n
<Greeting name="Divyesh" />
\n
<Greeting name="Sarah" />
\n
<Greeting name="Taylor" />
\n
</div>
\n
);
\n
}
\n
\n
function Greeting({ name }) {
\n
return <h1>Hello, {name}!</h1>;
\n
}
\n
\n
export default function App() {
\n
return (
\n
<div>
\n
<Greeting name="Divyesh" />
\n
<Greeting name="Sarah" />
\n
<Greeting name="Taylor" />
\n
</div>
\n
);
\n
}
\n
\n
body\n {
\n
background-color: lightblue;
\n
}
\n
\n
h1 {
\n
color: white;
\n
text-align: center;
\n
}
\n
\n
p {
\n
font-family: verdana;
\n
font-size: 20px;
\n
}
\n
\n
<template>
\n
<div class="column is-12">
\n
<label class="label" for="email">Email</label>
\n
<p :class="{\n \'control\': true }">\n
\n
<input v-validate="\'required|email\'" :class="{\'input\': true, \'is-danger\': errors.has(\'email\')\n }" name="email" type="text" placeholder="Email">
\n
<span v-show="errors.has(\'email\')" class="help is-danger">{{ errors.first(\'email\') }}</span>
\n
</p>
\n
</div>
\n
</template>
\n
\n
<script>
\n
export default {
\n
name: \'basic-example\'
\n
};
\n
</script>
\n
\n
const\n people = [{
\n
id: 0,
\n
name: \'Creola Katherine Johnson\',
\n
profession: \'mathematician\',
\n
}, {
\n
id: 1,
\n
name: \'Mario JosĂ© Molina-Pasquel HenrĂquez\',
\n
profession: \'chemist\',
\n
}];
\n
\n
export default function List() {
\n
const [text, setText] = useState("")
\n
const listItems = people.map(person =>
\n
<li>{person}</li>
\n
);
\n
return <ul>{listItems}</ul>;
\n
}
\n
\n
import "./styles.css";
\n
\n
document.getElementById("app").innerHTML = `
\n
<h1>Hello\n World</h1>
\n
<div>
\n
We use the same\n configuration as Parcel to bundle this sandbox, you can find more\n
\n
info about Parcel \n
\n
<a\n href="https://parceljs.org" target="_blank" rel="noopener\n noreferrer">here</a>.
\n
</div>
\n
`;
\n
\n