Skip to content

Commit e4ddace

Browse files
SuperSimpleDevSuperSimpleDev
committed
Add lesson 1 materials
1 parent 3bb05ef commit e4ddace

File tree

14 files changed

+259
-5
lines changed

14 files changed

+259
-5
lines changed

‎1-exercise-solutions/lesson-01/1a.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
10+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
11+
12+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
13+
<script type="text/babel">
14+
const button = <button>Good job!</button>;
15+
16+
const container = document.querySelector('.js-container');
17+
ReactDOM.createRoot(container).render(button);
18+
</script>
19+
</body>
20+
</html>

‎1-exercise-solutions/lesson-01/1b.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
10+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
11+
12+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
13+
<script type="text/babel">
14+
const paragraph = <p>My name is Simon</p>;
15+
16+
const container = document.querySelector('.js-container');
17+
ReactDOM.createRoot(container).render(paragraph);
18+
</script>
19+
</body>
20+
</html>

‎1-exercise-solutions/lesson-01/1c.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
10+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
11+
12+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
13+
<script type="text/babel">
14+
const div = (
15+
<div>
16+
<p>Cotton socks</p>
17+
<p>Price: $10</p>
18+
<button>Add to Cart</button>
19+
</div>
20+
);
21+
22+
const container = document.querySelector('.js-container');
23+
ReactDOM.createRoot(container).render(div);
24+
</script>
25+
</body>
26+
</html>

‎3-starting-code/react-basics.html ‎1-exercise-solutions/lesson-01/1d.html

+4-5
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,16 @@
66
<body>
77
<div class="js-container"></div>
88

9-
<!-- Load the React external library. -->
109
<script src="https://unpkg.com/supersimpledev/react.js"></script>
1110
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
1211

13-
<!-- Load the babel external library -->
1412
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
15-
1613
<script type="text/babel">
17-
// This code starts React.
14+
const productCost = 10 + 8 * 2;
15+
console.log(productCost);
16+
1817
const container = document.querySelector('.js-container');
1918
ReactDOM.createRoot(container).render();
2019
</script>
2120
</body>
22-
</html>
21+
</html>

‎1-exercise-solutions/lesson-01/1e.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
10+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
11+
12+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
13+
<script type="text/babel">
14+
const productCost = 10 + 8 * 2;
15+
16+
const paragraph = <p>Product cost: ${productCost}</p>;
17+
18+
const container = document.querySelector('.js-container');
19+
ReactDOM.createRoot(container).render(paragraph);
20+
</script>
21+
</body>
22+
</html>

‎1-exercise-solutions/lesson-01/1f.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
10+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
11+
12+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
13+
<script type="text/babel">
14+
const productCost = 10 + 8 * 2;
15+
const shippingCost = 5;
16+
17+
const div = (
18+
<div>
19+
<p>Product cost: ${productCost}</p>
20+
<p>Shipping cost: ${shippingCost}</p>
21+
<p>Total cost: ${productCost + shippingCost}</p>
22+
<button>Place your order</button>
23+
</div>
24+
);
25+
26+
const container = document.querySelector('.js-container');
27+
ReactDOM.createRoot(container).render(div);
28+
</script>
29+
</body>
30+
</html>

‎1-exercise-solutions/lesson-01/1g.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/dayjs.js"></script>
10+
11+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
12+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
13+
14+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
15+
<script type="text/babel">
16+
console.log(dayjs().format('MMMM D'));
17+
18+
const container = document.querySelector('.js-container');
19+
ReactDOM.createRoot(container).render();
20+
</script>
21+
</body>
22+
</html>

‎1-exercise-solutions/lesson-01/1h.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/dayjs.js"></script>
10+
11+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
12+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
13+
14+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
15+
<script type="text/babel">
16+
const paragraph = <p>Today is {dayjs().format('MMMM D')}</p>;
17+
18+
const container = document.querySelector('.js-container');
19+
ReactDOM.createRoot(container).render(paragraph);
20+
</script>
21+
</body>
22+
</html>

‎1-exercise-solutions/lesson-01/1i.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/dayjs.js"></script>
10+
11+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
12+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
13+
14+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
15+
<script type="text/babel">
16+
const paragraph = <p>Current time: {dayjs().format('HH:mm:ss')}</p>;
17+
18+
const container = document.querySelector('.js-container');
19+
ReactDOM.createRoot(container).render(paragraph);
20+
</script>
21+
</body>
22+
</html>

‎1-exercise-solutions/lesson-01/1j.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/dayjs.js"></script>
10+
11+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
12+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
13+
14+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
15+
<script type="text/babel">
16+
const paragraph = <p>Current time: {dayjs().format('HH:mm:ss')}</p>;
17+
18+
const container = document.querySelector('.js-container');
19+
const root = ReactDOM.createRoot(container);
20+
root.render(paragraph);
21+
22+
setInterval(() => {
23+
const paragraph = <p>Current time: {dayjs().format('HH:mm:ss')}</p>;
24+
root.render(paragraph);
25+
}, 1000);
26+
</script>
27+
</body>
28+
</html>

‎1-links.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Links mentioned in each lesson of the React Course:
2+
3+
### Lesson 1
4+
- Google Chrome installation instructions: https://github.com/SuperSimpleDev/installation-instructions/blob/main/google-chrome.md
5+
- VSCode (Visual Studio Code) installation instructions: https://github.com/SuperSimpleDev/installation-instructions/blob/main/vscode.md
6+
<br><br>
7+
- JavaScript Full course: https://youtu.be/EerdGm-ehJQ
8+
- HTML CSS Full course: https://youtu.be/G3e-cpL7ofc
9+
<br><br>
10+
- Starting code: https://supersimple.dev/react-basics
11+
- External library example: https://unpkg.com/supersimpledev/external-library.js

‎2-copy-of-code/lesson-01/react-basics.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>React Basics</title>
5+
</head>
6+
<body>
7+
<div class="js-container"></div>
8+
9+
<script src="https://unpkg.com/supersimpledev/react.js"></script>
10+
<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
11+
12+
<script src="https://unpkg.com/supersimpledev/babel.js"></script>
13+
<script type="text/babel">
14+
const button = <button>hello</button>;
15+
const paragraph = <p>paragraph of text</p>;
16+
17+
const div = (
18+
<div>
19+
<button>hello</button>
20+
<p>paragraph of text {2 + 2}</p>
21+
</div>
22+
);
23+
24+
const container = document.querySelector('.js-container');
25+
ReactDOM.createRoot(container).render(div);
26+
</script>
27+
</body>
28+
</html>

‎2-copy-of-code/lesson-01/react-basics.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('hello');

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## SuperSimpleDev React Course
2+
These are the materials for the SuperSimpleDev React Course (work-in-progress).<br><br>
3+
To get access to work-in-progress courses and to support course creation, you can join the SuperSimpleDev membership! https://www.youtube.com/@SuperSimpleDev/join

0 commit comments

Comments
 (0)