Skip to content

Commit b379d9a

Browse files
aravindballaaravindballa
committed
Add lessons 3 & 4
1 parent 9f8cfe6 commit b379d9a

File tree

3 files changed

+145
-0
lines changed

3 files changed

+145
-0
lines changed

‎lesson_0/03-hello-react-jsx.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Hello</title>
9+
</head>
10+
11+
<body>
12+
<div id="root"></div>
13+
14+
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
15+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
16+
<!-- <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
17+
babel-->
18+
<script type="text/javascript">
19+
const rootElement = document.getElementById('root');
20+
/*
21+
Just for reference
22+
const element = React.createElement(
23+
'div',
24+
{ className: 'title' },
25+
'Hello World'
26+
);
27+
/**/
28+
29+
const element = <div className="title">Hello World</div>
30+
// console.log(element);
31+
ReactDOM.render(element, rootElement);
32+
33+
/*
34+
const blogTitle = 'What the JSX???'
35+
const blogContent = `This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.`
36+
37+
const blog = (
38+
<div className="blog">
39+
<div className="blog--title">{blogTitle}</div>
40+
<div className="blog--content">{blogContent}</div>
41+
</div>
42+
)
43+
44+
ReactDOM.render(blog, rootElement);
45+
/**/
46+
47+
/*
48+
You would normally have a dev environment setup to
49+
do the transpiling of babel to JSX.
50+
/**/
51+
</script>
52+
</body>
53+
54+
</html>

‎lesson_0/04-resuable-comp.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Hello</title>
9+
<!-- <link rel="stylesheet" href="assets/style.css"> -->
10+
</head>
11+
12+
<body>
13+
<div id="root"></div>
14+
15+
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
16+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
17+
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
18+
<script type="text/babel">
19+
20+
const blogComp = ({title, content}) => (
21+
<div className="blog">
22+
<h2 className="blog--title">{title}</h2>
23+
<p className="blog--content">{content}</p>
24+
</div>
25+
)
26+
27+
const blogs = (
28+
<div className="blog--wrap">
29+
{
30+
blogComp({
31+
title: 'Hello World',
32+
content: 'React is a JavaScript library, and so we’ll assume you have a basic understanding of the JavaScript language.'
33+
})
34+
}
35+
{
36+
blogComp({
37+
title: 'Thinking in React',
38+
content: 'One of the many great parts of React is how it makes you think about apps as you build them.'
39+
})
40+
}
41+
</div>
42+
)
43+
44+
/*
45+
<BlogComp
46+
title="Lifting State Up"
47+
content="Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor."
48+
/>
49+
/**/
50+
/*
51+
<BlogComp
52+
title="Lifting State Up"
53+
/>
54+
Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor.
55+
</BlogComp>
56+
/**/
57+
ReactDOM.render(blogs, document.getElementById('root'));
58+
/**/
59+
60+
/*
61+
You would normally have a dev environment setup to
62+
do the transpiling of babel to JSX.
63+
/**/
64+
</script>
65+
</body>
66+
67+
</html>

‎lesson_0/assets/style.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
#root {
2+
display: flex;
3+
height: 100vh;
4+
justify-content: center;
5+
align-items: center;
6+
background: #eee;
7+
font-family: Arial, Helvetica, sans-serif;
8+
}
9+
10+
.blog--wrap {
11+
display: flex;
12+
flex-direction: column;
13+
max-width: 480px;
14+
15+
}
16+
17+
.blog {
18+
background: white;
19+
border-radius: 5px;
20+
padding: 10px 30px;
21+
margin-bottom: 20px;
22+
border-left: 4px solid orangered;
23+
box-shadow: 2px 4px 6px #ddd;
24+
}

0 commit comments

Comments
 (0)