Skip to content

Commit 6d5d102

Browse files
bvaughnbvaughn
authored
Merge pull request #245 from bvaughn/codepen-continued
Seamlessly sync examples from Github -> Codepen
2 parents 49ee183 + cadaeae commit 6d5d102

14 files changed

+260
-9
lines changed

‎.eslintignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,7 @@ node_modules/*
44
content/*
55

66
# Ignore built files
7-
public/*
7+
public/*
8+
9+
# Ignore examples
10+
codepen/*

‎codepen/components-and-props/composing-components.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
function Welcome(props) {
2+
return <h1>Hello, {props.name}</h1>;
3+
}
4+
5+
function App() {
6+
return (
7+
<div>
8+
<Welcome name="Sara" />
9+
<Welcome name="Cahal" />
10+
<Welcome name="Edite" />
11+
</div>
12+
);
13+
}
14+
15+
ReactDOM.render(
16+
<App />,
17+
document.getElementById('root')
18+
);

‎codepen/components-and-props/extracting-components-continued.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
function formatDate(date) {
2+
return date.toLocaleDateString();
3+
}
4+
5+
function Avatar(props) {
6+
return (
7+
<img className="Avatar"
8+
src={props.user.avatarUrl}
9+
alt={props.user.name} />
10+
);
11+
}
12+
13+
function UserInfo(props) {
14+
return (
15+
<div className="UserInfo">
16+
<Avatar user={props.user} />
17+
<div className="UserInfo-name">
18+
{props.user.name}
19+
</div>
20+
</div>
21+
);
22+
}
23+
24+
function Comment(props) {
25+
return (
26+
<div className="Comment">
27+
<UserInfo user={props.author} />
28+
<div className="Comment-text">
29+
{props.text}
30+
</div>
31+
<div className="Comment-date">
32+
{formatDate(props.date)}
33+
</div>
34+
</div>
35+
);
36+
}
37+
38+
const comment = {
39+
date: new Date(),
40+
text: 'I hope you enjoy learning React!',
41+
author: {
42+
name: 'Hello Kitty',
43+
avatarUrl: 'http://placekitten.com/g/64/64'
44+
}
45+
};
46+
ReactDOM.render(
47+
<Comment
48+
date={comment.date}
49+
text={comment.text}
50+
author={comment.author} />,
51+
document.getElementById('root')
52+
);

‎codepen/components-and-props/extracting-components.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
function formatDate(date) {
2+
return date.toLocaleDateString();
3+
}
4+
5+
function Comment(props) {
6+
return (
7+
<div className="Comment">
8+
<div className="UserInfo">
9+
<img className="Avatar"
10+
src={props.author.avatarUrl}
11+
alt={props.author.name} />
12+
<div className="UserInfo-name">
13+
{props.author.name}
14+
</div>
15+
</div>
16+
<div className="Comment-text">
17+
{props.text}
18+
</div>
19+
<div className="Comment-date">
20+
{formatDate(props.date)}
21+
</div>
22+
</div>
23+
);
24+
}
25+
26+
const comment = {
27+
date: new Date(),
28+
text: 'I hope you enjoy learning React!',
29+
author: {
30+
name: 'Hello Kitty',
31+
avatarUrl: 'http://placekitten.com/g/64/64'
32+
}
33+
};
34+
ReactDOM.render(
35+
<Comment
36+
date={comment.date}
37+
text={comment.text}
38+
author={comment.author} />,
39+
document.getElementById('root')
40+
);

‎codepen/components-and-props/rendering-a-component.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
function Welcome(props) {
2+
return <h1>Hello, {props.name}</h1>;
3+
}
4+
5+
const element = <Welcome name="Sara" />;
6+
ReactDOM.render(
7+
element,
8+
document.getElementById('root')
9+
);

‎codepen/hello-world.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
ReactDOM.render(
2+
<h1>Hello, world!</h1>,
3+
document.getElementById('root')
4+
);

‎codepen/introducing-jsx.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
function formatName(user) {
2+
return user.firstName + ' ' + user.lastName;
3+
}
4+
5+
const user = {
6+
firstName: 'Harper',
7+
lastName: 'Perez',
8+
};
9+
10+
const element = (
11+
<h1>
12+
Hello, {formatName(user)}!
13+
</h1>
14+
);
15+
16+
ReactDOM.render(
17+
element,
18+
document.getElementById('root')
19+
);

‎content/docs/components-and-props.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ ReactDOM.render(
7676
);
7777
```
7878

79-
[Try it on CodePen.](http://codepen.io/gaearon/pen/YGYmEG?editors=0010)
79+
<a href="/codepen/components-and-props/rendering-a-component" target="_blank">Try it on CodePen</a>.
8080

8181
Let's recap what happens in this example:
8282

@@ -118,7 +118,7 @@ ReactDOM.render(
118118
);
119119
```
120120

121-
[Try it on CodePen.](http://codepen.io/gaearon/pen/KgQKPr?editors=0010)
121+
<a href="/codepen/components-and-props/composing-components" target="_blank">Try it on CodePen</a>.
122122

123123
Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
124124

@@ -152,7 +152,7 @@ function Comment(props) {
152152
}
153153
```
154154

155-
[Try it on CodePen.](http://codepen.io/gaearon/pen/VKQwEo?editors=0010)
155+
<a href="/codepen/components-and-props/extracting-components" target="_blank">Try it on CodePen</a>.
156156

157157
It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
158158

@@ -231,7 +231,7 @@ function Comment(props) {
231231
}
232232
```
233233

234-
[Try it on CodePen.](http://codepen.io/gaearon/pen/rrJNJY?editors=0010)
234+
<a href="/codepen/components-and-props/extracting-components-continued" target="_blank">Try it on CodePen</a>.
235235

236236
Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
237237

‎content/docs/hello-world.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ redirect_from:
1212
- "docs/getting-started-zh-CN.html"
1313
---
1414

15-
The easiest way to get started with React is to use [this Hello World example code on CodePen](http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
15+
The easiest way to get started with React is to use <a href="/codepen/hello-world" target="_blank">this Hello World example code on CodePen</a>. You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
1616

1717
The smallest React example looks like this:
1818

‎content/docs/introducing-jsx.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ ReactDOM.render(
4646
);
4747
```
4848

49-
[Try it on CodePen.](http://codepen.io/gaearon/pen/PGEjdG?editors=0010)
49+
<a href="/codepen/introducing-jsx" target="_blank">Try it on CodePen.</a>
5050

5151
We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
5252

0 commit comments

Comments
 (0)