Skip to content

Commit 5f95004

Browse files
pam3000pam3000
authored
Add files via upload
0 parents  commit 5f95004

10 files changed

+306
-0
lines changed

‎React/Part 1 React

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
</head>
5+
<body>
6+
7+
<h1>Part 1</h1>
8+
9+
<div id="root"> <!-- component will go in this div --> </div>
10+
11+
<script src=
12+
"https://unpkg.com/react/umd/react.development.js"></script>
13+
<script src=
14+
"https://unpkg.com/react-dom/umd/react-dom.development.js">
15+
</script>
16+
17+
<script src="https://unpkg.com/babel-standalone"></script>
18+
19+
<script src="FirstComponent.js" type="text/jsx"></script>
20+
<script src="NamedComponent.js" type="text/jsx"></script>
21+
<script src="App.js" type="text/jsx"></script>
22+
<script src="index.js" type="text/jsx"></script>
23+
24+
</body>
25+
</html>
26+
27+

‎React/part 2 react.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="style.css">
5+
</head>
6+
<body>
7+
8+
<h1>Part 2</h1>
9+
10+
<div id="root"> <!-- component will go in this div --> </div>
11+
12+
<script src=
13+
"https://unpkg.com/react/umd/react.development.js"></script>
14+
<script src=
15+
"https://unpkg.com/react-dom/umd/react-dom.development.js">
16+
</script>
17+
18+
<script src="https://unpkg.com/babel-standalone"></script>
19+
20+
<!-- add script tags for your components here -->
21+
<script src="Tweet.js" type="text/jsx"></script>
22+
<script src="App.js" type="text/jsx"></script>
23+
<script src="index.js" type="text/jsx"></script>
24+
25+
</body>
26+
</html>

‎React/part 3 react.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
</head>
5+
<body>
6+
7+
<h1>Part 3</h1>
8+
9+
<div id="root"> <!-- component will go in this div --> </div>
10+
11+
<script src=
12+
"https://unpkg.com/react/umd/react.development.js"></script>
13+
<script src=
14+
"https://unpkg.com/react-dom/umd/react-dom.development.js">
15+
</script>
16+
17+
<script src="https://unpkg.com/babel-standalone"></script>
18+
19+
<!-- add script tags for your components here -->
20+
<script src="Person.js" type="text/jsx"></script>
21+
<script src="App.js" type="text/jsx"></script>
22+
<script src="index.js" type="text/jsx"></script>
23+
24+
</body>
25+
</html>

‎React/part1.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
*part1/NamedComponent.js*
2+
3+
```jsx
4+
/** NamedComponent: greets
5+
*
6+
* Props:
7+
* - name: name to introduce self with
8+
*/
9+
10+
function NamedComponent({ name }) {
11+
return <p>My name is {name}.</p>;
12+
}
13+
```
14+
15+
*part1/App.js*
16+
17+
*part1/NamedComponent.js*
18+
19+
```jsx
20+
/** NamedComponent: greets
21+
*
22+
* Props:
23+
* - name: name to introduce self with
24+
*/
25+
26+
function NamedComponent({ name }) {
27+
return <p>My name is {name}.</p>;
28+
}
29+
```
30+
31+
/** Tweet: a single tweet.
32+
*
33+
* Props:
34+
* - name
35+
* - username
36+
* - data
37+
* - message
38+
*/
39+
40+
function Tweet({ date, message, name, username }) {
41+
return (
42+
<div className="tweet">
43+
<span>{name}</span>
44+
<span className="username">{username}</span>
45+
<span className="date">{date}</span>
46+
<p>{message}</p>
47+
</div>
48+
);
49+
}function App() {
50+
return (
51+
<div>
52+
<Tweet
53+
name="Matt Lane"
54+
username="mmmaaatttttt"
55+
date={new Date().toDateString()}
56+
message="This app will disrupt everything!!"
57+
/>
58+
<Tweet
59+
name="Elie Schoppik"
60+
username="eschoppik"
61+
date={new Date().toDateString()}
62+
message="#Ilovehashtags"
63+
/>
64+
<Tweet
65+
name="Tim Garcia"
66+
username="TimGarcia0"
67+
date={new Date().toDateString()}
68+
message="Follow me on Twitter!"
69+
/>
70+
</div>
71+
);
72+
}const root = ReactDOM.createRoot(document.getElementById('root'));
73+
root.render(
74+
<App />
75+
);

‎React/part2.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.tweet {
2+
border: 1px solid #0099CC;
3+
border-radius: 5px;
4+
margin: 20px 20%;
5+
padding: 20px;
6+
}
7+
8+
.username,
9+
.date {
10+
color: #999;
11+
display: inline-block;
12+
margin: 0 10px;
13+
}
14+
15+

‎React/part2.js

Whitespace-only changes.

‎React/part3.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
</head>
5+
<body>
6+
7+
<h1>Part 3</h1>
8+
9+
<div id="root"> <!-- component will go in this div --> </div>
10+
11+
<script src=
12+
"https://unpkg.com/react/umd/react.development.js"></script>
13+
<script src=
14+
"https://unpkg.com/react-dom/umd/react-dom.development.js">
15+
</script>
16+
17+
<script src="https://unpkg.com/babel-standalone"></script>
18+
19+
<!-- add script tags for your components here -->
20+
<script src="Person.js" type="text/jsx"></script>
21+
<script src="App.js" type="text/jsx"></script>
22+
<script src="index.js" type="text/jsx"></script>
23+
24+
</body>
25+
</html>

‎React/part3.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const MAX_NAME_LENGTH_TO_SHOW = 6;
2+
3+
/** Info on a single person.
4+
*
5+
* Props:
6+
* - name
7+
* - age
8+
* - hobbies: array, like ["cats", "bridge", "fighting the patriarchy"]
9+
*/
10+
11+
function Person({ age, hobbies, name }) {
12+
const voteText = age >= 18
13+
? "Go vote!"
14+
: "Go study!";
15+
16+
// your browser will issue a stern warning about this; we'll learn how to fix
17+
// that later.
18+
const hobbiesLIs = hobbies.map(hobby => <li>{hobby}</li>);
19+
20+
return (
21+
<div>
22+
<p>Learn some information about this person:</p>
23+
<ul>
24+
<li>Name: {name.slice(0, MAX_NAME_LENGTH_TO_SHOW)}</li>
25+
<li>Age: {age}</li>
26+
<ul>
27+
Hobbies:
28+
{hobbiesLIs}
29+
</ul>
30+
</ul>
31+
<h3>{voteText}</h3>
32+
</div>
33+
);
34+
}

‎React/part3js.index

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const root = ReactDOM.createRoot(document.getElementById('root'));
2+
root.render(
3+
<App />
4+
);

‎React/react.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
*part1/NamedComponent.js*
2+
3+
```jsx
4+
/** NamedComponent: greets
5+
*
6+
* Props:
7+
* - name: name to introduce self with
8+
*/
9+
10+
function NamedComponent({ name }) {
11+
return <p>My name is {name}.</p>;
12+
}
13+
```
14+
15+
*part1/App.js*
16+
17+
*part1/NamedComponent.js*
18+
19+
```jsx
20+
/** NamedComponent: greets
21+
*
22+
* Props:
23+
* - name: name to introduce self with
24+
*/
25+
26+
function NamedComponent({ name }) {
27+
return <p>My name is {name}.</p>;
28+
}
29+
```
30+
31+
/** Tweet: a single tweet.
32+
*
33+
* Props:
34+
* - name
35+
* - username
36+
* - data
37+
* - message
38+
*/
39+
40+
function Tweet({ date, message, name, username }) {
41+
return (
42+
<div className="tweet">
43+
<span>{name}</span>
44+
<span className="username">{username}</span>
45+
<span className="date">{date}</span>
46+
<p>{message}</p>
47+
</div>
48+
);
49+
}function App() {
50+
return (
51+
<div>
52+
<Tweet
53+
name="Matt Lane"
54+
username="mmmaaatttttt"
55+
date={new Date().toDateString()}
56+
message="This app will disrupt everything!!"
57+
/>
58+
<Tweet
59+
name="Elie Schoppik"
60+
username="eschoppik"
61+
date={new Date().toDateString()}
62+
message="#Ilovehashtags"
63+
/>
64+
<Tweet
65+
name="Tim Garcia"
66+
username="TimGarcia0"
67+
date={new Date().toDateString()}
68+
message="Follow me on Twitter!"
69+
/>
70+
</div>
71+
);
72+
}const root = ReactDOM.createRoot(document.getElementById('root'));
73+
root.render(
74+
<App />
75+
);

0 commit comments

Comments
 (0)