html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>React-Skeleton</title>
<!--
author: Burey
date: 27/02/2020
description: React.js Skeleton component
-->
</head>
<body>
<div id="loader" class="fade">
<h1>Loading...</h1>
</div>
<div id="root"></div>
<!-- include sass compiler -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.7/sass.sync.min.js"></script>
<!--
babel polyfill are required for older devices to run React
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<!--
it is important that the scripts come after the loader div element.
without this the loader will not show as the program will be busy loading the scripts and transpiling any JSX code we have in the Javascript tab and we'll end up with a long white loading screen and no indication if the app is even running.
the loader will be hidden by using Javascript once the React code done loading.
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
}
/* center the loader */
#loader{
display: flex;
flex-direction: column;
justify-content: center;
height:95vh;
text-align:center;
}
/* some animation for the loader */
@-webkit-keyframes fade {
0% {opacity: 0}
50% {opacity: 1}
100% {opacity: 0}
}
#loader.fade > h1 {
animation: fade 3s infinite;
}
/* PLACE ALL SCSS CODE BELOW THIS COMMENT */
/*</style><style type="scss">/**/
.app-container{
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//</script><script type="text/babel">
// Credits to @KrOW for finding out how to use JSX in JS tab ^_^
// Credits to InvBoy and Swapnil Srivastava (स्वप्निल श्रीवास्तव) for figuring how to use SCSS in the code playground
(function scss_compile() {
Sass.compile(
document.querySelector("style[type=scss]")
.innerHTML,
function(res){
var s=document.createElement("style");
s.innerHTML=res.text;
//console.log(res.text);
res.formatted&&console.error(res.formatted);
//if error console.error it.
res.text&&document.head.appendChild(s);
// append style element only if no error.
});
})();
// hide the loader after babel done transpiling the JSX code
document.getElementById("loader").style.display = "none";
// your react code goes below
// get Component from React library (kind of like an import)
const {Component} = React;
const {useState, useEffect} = React;
const data = {
headerImage: "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-512.png",
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run