Skip to content

Commit 5997700

Browse files
bvaughnbvaughn
committed
Increased Prettier line-width for examples
1 parent b8213fb commit 5997700

26 files changed

+87
-231
lines changed

‎.prettierrc.examples

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"bracketSpacing": false,
33
"jsxBracketSameLine": true,
44
"parser": "flow",
5-
"printWidth": 40,
5+
"printWidth": 60,
66
"singleQuote": true,
77
"trailingComma": "es5"
88
}

‎examples/16-3-release-blog-create-ref.js

+2-7
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@ class MyComponent extends React.Component {
33
divRef = React.createRef();
44

55
render() {
6-
// highlight-range{4}
7-
return (
8-
<input
9-
type="text"
10-
ref={this.divRef}
11-
/>
12-
);
6+
// highlight-next-line
7+
return <input type="text" ref={this.divRef} />;
138
}
149

1510
componentDidMount() {

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,4 @@ function App() {
1212
);
1313
}
1414

15-
ReactDOM.render(
16-
<App />,
17-
document.getElementById('root')
18-
);
15+
ReactDOM.render(<App />, document.getElementById('root'));

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

+4-10
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ function UserInfo(props) {
1616
return (
1717
<div className="UserInfo">
1818
<Avatar user={props.user} />
19-
<div className="UserInfo-name">
20-
{props.user.name}
21-
</div>
19+
<div className="UserInfo-name">{props.user.name}</div>
2220
</div>
2321
);
2422
}
@@ -27,9 +25,7 @@ function Comment(props) {
2725
return (
2826
<div className="Comment">
2927
<UserInfo user={props.author} />
30-
<div className="Comment-text">
31-
{props.text}
32-
</div>
28+
<div className="Comment-text">{props.text}</div>
3329
<div className="Comment-date">
3430
{formatDate(props.date)}
3531
</div>
@@ -39,12 +35,10 @@ function Comment(props) {
3935

4036
const comment = {
4137
date: new Date(),
42-
text:
43-
'I hope you enjoy learning React!',
38+
text: 'I hope you enjoy learning React!',
4439
author: {
4540
name: 'Hello Kitty',
46-
avatarUrl:
47-
'http://placekitten.com/g/64/64',
41+
avatarUrl: 'http://placekitten.com/g/64/64',
4842
},
4943
};
5044
ReactDOM.render(

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

+3-7
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ function Comment(props) {
1515
{props.author.name}
1616
</div>
1717
</div>
18-
<div className="Comment-text">
19-
{props.text}
20-
</div>
18+
<div className="Comment-text">{props.text}</div>
2119
<div className="Comment-date">
2220
{formatDate(props.date)}
2321
</div>
@@ -27,12 +25,10 @@ function Comment(props) {
2725

2826
const comment = {
2927
date: new Date(),
30-
text:
31-
'I hope you enjoy learning React!',
28+
text: 'I hope you enjoy learning React!',
3229
author: {
3330
name: 'Hello Kitty',
34-
avatarUrl:
35-
'http://placekitten.com/g/64/64',
31+
avatarUrl: 'http://placekitten.com/g/64/64',
3632
},
3733
};
3834
ReactDOM.render(

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

+1-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,4 @@ function Welcome(props) {
33
}
44

55
const element = <Welcome name="Sara" />;
6-
ReactDOM.render(
7-
element,
8-
document.getElementById('root')
9-
);
6+
ReactDOM.render(element, document.getElementById('root'));

‎examples/es5-syntax-example.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
const element = <h1>Hello, world!</h1>;
2-
const container = document.getElementById(
3-
'root'
4-
);
2+
const container = document.getElementById('root');
53
ReactDOM.render(element, container);

‎examples/introducing-jsx.js

+3-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,12 @@
11
function formatName(user) {
2-
return (
3-
user.firstName + ' ' + user.lastName
4-
);
2+
return user.firstName + ' ' + user.lastName;
53
}
64

75
const user = {
86
firstName: 'Harper',
97
lastName: 'Perez',
108
};
119

12-
const element = (
13-
<h1>Hello, {formatName(user)}!</h1>
14-
);
10+
const element = <h1>Hello, {formatName(user)}!</h1>;
1511

16-
ReactDOM.render(
17-
element,
18-
document.getElementById('root')
19-
);
12+
ReactDOM.render(element, document.getElementById('root'));

‎examples/reconciliation/index-used-as-key.js

+16-45
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ const ToDo = props => (
77
<input />
88
</td>
99
<td>
10-
<label>
11-
{props.createdAt.toTimeString()}
12-
</label>
10+
<label>{props.createdAt.toTimeString()}</label>
1311
</td>
1412
</tr>
1513
);
@@ -31,35 +29,26 @@ class ToDoList extends React.Component {
3129
}
3230

3331
sortByEarliest() {
34-
const sortedList = this.state.list.sort(
35-
(a, b) => {
36-
return (
37-
a.createdAt - b.createdAt
38-
);
39-
}
40-
);
32+
const sortedList = this.state.list.sort((a, b) => {
33+
return a.createdAt - b.createdAt;
34+
});
4135
this.setState({
4236
list: [...sortedList],
4337
});
4438
}
4539

4640
sortByLatest() {
47-
const sortedList = this.state.list.sort(
48-
(a, b) => {
49-
return (
50-
b.createdAt - a.createdAt
51-
);
52-
}
53-
);
41+
const sortedList = this.state.list.sort((a, b) => {
42+
return b.createdAt - a.createdAt;
43+
});
5444
this.setState({
5545
list: [...sortedList],
5646
});
5747
}
5848

5949
addToEnd() {
6050
const date = new Date();
61-
const nextId =
62-
this.state.todoCounter + 1;
51+
const nextId = this.state.todoCounter + 1;
6352
const newList = [
6453
...this.state.list,
6554
{id: nextId, createdAt: date},
@@ -72,8 +61,7 @@ class ToDoList extends React.Component {
7261

7362
addToStart() {
7463
const date = new Date();
75-
const nextId =
76-
this.state.todoCounter + 1;
64+
const nextId = this.state.todoCounter + 1;
7765
const newList = [
7866
{id: nextId, createdAt: date},
7967
...this.state.list,
@@ -89,28 +77,16 @@ class ToDoList extends React.Component {
8977
<div>
9078
<code>key=index</code>
9179
<br />
92-
<button
93-
onClick={this.addToStart.bind(
94-
this
95-
)}>
80+
<button onClick={this.addToStart.bind(this)}>
9681
Add New to Start
9782
</button>
98-
<button
99-
onClick={this.addToEnd.bind(
100-
this
101-
)}>
83+
<button onClick={this.addToEnd.bind(this)}>
10284
Add New to End
10385
</button>
104-
<button
105-
onClick={this.sortByEarliest.bind(
106-
this
107-
)}>
86+
<button onClick={this.sortByEarliest.bind(this)}>
10887
Sort by Earliest
10988
</button>
110-
<button
111-
onClick={this.sortByLatest.bind(
112-
this
113-
)}>
89+
<button onClick={this.sortByLatest.bind(this)}>
11490
Sort by Latest
11591
</button>
11692
<table>
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
11995
<th />
12096
<th>created at</th>
12197
</tr>
122-
{this.state.list.map(
123-
(todo, index) => (
124-
<ToDo
125-
key={index}
126-
{...todo}
127-
/>
128-
)
129-
)}
98+
{this.state.list.map((todo, index) => (
99+
<ToDo key={index} {...todo} />
100+
))}
130101
</table>
131102
</div>
132103
);

‎examples/reconciliation/no-index-used-as-key.js

+16-45
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ const ToDo = props => (
77
<input />
88
</td>
99
<td>
10-
<label>
11-
{props.createdAt.toTimeString()}
12-
</label>
10+
<label>{props.createdAt.toTimeString()}</label>
1311
</td>
1412
</tr>
1513
);
@@ -31,35 +29,26 @@ class ToDoList extends React.Component {
3129
}
3230

3331
sortByEarliest() {
34-
const sortedList = this.state.list.sort(
35-
(a, b) => {
36-
return (
37-
a.createdAt - b.createdAt
38-
);
39-
}
40-
);
32+
const sortedList = this.state.list.sort((a, b) => {
33+
return a.createdAt - b.createdAt;
34+
});
4135
this.setState({
4236
list: [...sortedList],
4337
});
4438
}
4539

4640
sortByLatest() {
47-
const sortedList = this.state.list.sort(
48-
(a, b) => {
49-
return (
50-
b.createdAt - a.createdAt
51-
);
52-
}
53-
);
41+
const sortedList = this.state.list.sort((a, b) => {
42+
return b.createdAt - a.createdAt;
43+
});
5444
this.setState({
5545
list: [...sortedList],
5646
});
5747
}
5848

5949
addToEnd() {
6050
const date = new Date();
61-
const nextId =
62-
this.state.toDoCounter + 1;
51+
const nextId = this.state.toDoCounter + 1;
6352
const newList = [
6453
...this.state.list,
6554
{id: nextId, createdAt: date},
@@ -72,8 +61,7 @@ class ToDoList extends React.Component {
7261

7362
addToStart() {
7463
const date = new Date();
75-
const nextId =
76-
this.state.toDoCounter + 1;
64+
const nextId = this.state.toDoCounter + 1;
7765
const newList = [
7866
{id: nextId, createdAt: date},
7967
...this.state.list,
@@ -89,28 +77,16 @@ class ToDoList extends React.Component {
8977
<div>
9078
<code>key=id</code>
9179
<br />
92-
<button
93-
onClick={this.addToStart.bind(
94-
this
95-
)}>
80+
<button onClick={this.addToStart.bind(this)}>
9681
Add New to Start
9782
</button>
98-
<button
99-
onClick={this.addToEnd.bind(
100-
this
101-
)}>
83+
<button onClick={this.addToEnd.bind(this)}>
10284
Add New to End
10385
</button>
104-
<button
105-
onClick={this.sortByEarliest.bind(
106-
this
107-
)}>
86+
<button onClick={this.sortByEarliest.bind(this)}>
10887
Sort by Earliest
10988
</button>
110-
<button
111-
onClick={this.sortByLatest.bind(
112-
this
113-
)}>
89+
<button onClick={this.sortByLatest.bind(this)}>
11490
Sort by Latest
11591
</button>
11692
<table>
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
11995
<th />
12096
<th>created at</th>
12197
</tr>
122-
{this.state.list.map(
123-
(todo, index) => (
124-
<ToDo
125-
key={todo.id}
126-
{...todo}
127-
/>
128-
)
129-
)}
98+
{this.state.list.map((todo, index) => (
99+
<ToDo key={todo.id} {...todo} />
100+
))}
130101
</table>
131102
</div>
132103
);

‎examples/rendering-elements/render-an-element.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
11
const element = <h1>Hello, world</h1>;
2-
ReactDOM.render(
3-
element,
4-
document.getElementById('root')
5-
);
2+
ReactDOM.render(element, document.getElementById('root'));

‎examples/rendering-elements/update-rendered-element.js

+3-9
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,11 @@ function tick() {
22
const element = (
33
<div>
44
<h1>Hello, world!</h1>
5-
<h2>
6-
It is{' '}
7-
{new Date().toLocaleTimeString()}.
8-
</h2>
5+
<h2>It is {new Date().toLocaleTimeString()}.</h2>
96
</div>
107
);
11-
// highlight-range{1-4}
12-
ReactDOM.render(
13-
element,
14-
document.getElementById('root')
15-
);
8+
// highlight-next-line
9+
ReactDOM.render(element, document.getElementById('root'));
1610
}
1711

1812
setInterval(tick, 1000);

0 commit comments

Comments
 (0)