diff --git a/.prettierrc.examples b/.prettierrc.examples
index 1d6941b2..bd17fb7e 100644
--- a/.prettierrc.examples
+++ b/.prettierrc.examples
@@ -2,7 +2,7 @@
"bracketSpacing": false,
"jsxBracketSameLine": true,
"parser": "flow",
- "printWidth": 40,
+ "printWidth": 60,
"singleQuote": true,
"trailingComma": "es5"
}
\ No newline at end of file
diff --git a/examples/components-and-props/composing-components.js b/examples/components-and-props/composing-components.js
index f81f7668..3fb4c9c6 100644
--- a/examples/components-and-props/composing-components.js
+++ b/examples/components-and-props/composing-components.js
@@ -12,7 +12,4 @@ function App() {
);
}
-ReactDOM.render(
- ,
- document.getElementById('root')
-);
+ReactDOM.render(, document.getElementById('root'));
diff --git a/examples/components-and-props/extracting-components-continued.js b/examples/components-and-props/extracting-components-continued.js
index bcd08b85..d35b5e36 100644
--- a/examples/components-and-props/extracting-components-continued.js
+++ b/examples/components-and-props/extracting-components-continued.js
@@ -16,9 +16,7 @@ function UserInfo(props) {
return (
-
- {props.user.name}
-
+
{props.user.name}
);
}
@@ -27,9 +25,7 @@ function Comment(props) {
return (
-
- {props.text}
-
+
{props.text}
{formatDate(props.date)}
@@ -39,12 +35,10 @@ function Comment(props) {
const comment = {
date: new Date(),
- text:
- 'I hope you enjoy learning React!',
+ text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
- avatarUrl:
- 'http://placekitten.com/g/64/64',
+ avatarUrl: 'http://placekitten.com/g/64/64',
},
};
ReactDOM.render(
diff --git a/examples/components-and-props/extracting-components.js b/examples/components-and-props/extracting-components.js
index 1ad153c3..1c5e6bae 100644
--- a/examples/components-and-props/extracting-components.js
+++ b/examples/components-and-props/extracting-components.js
@@ -15,9 +15,7 @@ function Comment(props) {
{props.author.name}
-
- {props.text}
-
+ {props.text}
{formatDate(props.date)}
@@ -27,12 +25,10 @@ function Comment(props) {
const comment = {
date: new Date(),
- text:
- 'I hope you enjoy learning React!',
+ text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
- avatarUrl:
- 'http://placekitten.com/g/64/64',
+ avatarUrl: 'http://placekitten.com/g/64/64',
},
};
ReactDOM.render(
diff --git a/examples/components-and-props/rendering-a-component.js b/examples/components-and-props/rendering-a-component.js
index 5458b516..2b0c4b67 100644
--- a/examples/components-and-props/rendering-a-component.js
+++ b/examples/components-and-props/rendering-a-component.js
@@ -3,7 +3,4 @@ function Welcome(props) {
}
const element = ;
-ReactDOM.render(
- element,
- document.getElementById('root')
-);
+ReactDOM.render(element, document.getElementById('root'));
diff --git a/examples/es5-syntax-example.js b/examples/es5-syntax-example.js
index 122f7c39..c8d2ac98 100644
--- a/examples/es5-syntax-example.js
+++ b/examples/es5-syntax-example.js
@@ -1,5 +1,3 @@
const element = Hello, world!
;
-const container = document.getElementById(
- 'root'
-);
+const container = document.getElementById('root');
ReactDOM.render(element, container);
diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js
index 67013fa8..3f1a07f3 100644
--- a/examples/introducing-jsx.js
+++ b/examples/introducing-jsx.js
@@ -1,7 +1,5 @@
function formatName(user) {
- return (
- user.firstName + ' ' + user.lastName
- );
+ return user.firstName + ' ' + user.lastName;
}
const user = {
@@ -9,11 +7,6 @@ const user = {
lastName: 'Perez',
};
-const element = (
- Hello, {formatName(user)}!
-);
+const element = Hello, {formatName(user)}!
;
-ReactDOM.render(
- element,
- document.getElementById('root')
-);
+ReactDOM.render(element, document.getElementById('root'));
diff --git a/examples/reconciliation/index-used-as-key.js b/examples/reconciliation/index-used-as-key.js
index bb4d4284..8eb76c4b 100644
--- a/examples/reconciliation/index-used-as-key.js
+++ b/examples/reconciliation/index-used-as-key.js
@@ -7,9 +7,7 @@ const ToDo = props => (
-
+
|
);
@@ -31,26 +29,18 @@ class ToDoList extends React.Component {
}
sortByEarliest() {
- const sortedList = this.state.list.sort(
- (a, b) => {
- return (
- a.createdAt - b.createdAt
- );
- }
- );
+ const sortedList = this.state.list.sort((a, b) => {
+ return a.createdAt - b.createdAt;
+ });
this.setState({
list: [...sortedList],
});
}
sortByLatest() {
- const sortedList = this.state.list.sort(
- (a, b) => {
- return (
- b.createdAt - a.createdAt
- );
- }
- );
+ const sortedList = this.state.list.sort((a, b) => {
+ return b.createdAt - a.createdAt;
+ });
this.setState({
list: [...sortedList],
});
@@ -58,8 +48,7 @@ class ToDoList extends React.Component {
addToEnd() {
const date = new Date();
- const nextId =
- this.state.todoCounter + 1;
+ const nextId = this.state.todoCounter + 1;
const newList = [
...this.state.list,
{id: nextId, createdAt: date},
@@ -72,8 +61,7 @@ class ToDoList extends React.Component {
addToStart() {
const date = new Date();
- const nextId =
- this.state.todoCounter + 1;
+ const nextId = this.state.todoCounter + 1;
const newList = [
{id: nextId, createdAt: date},
...this.state.list,
@@ -89,28 +77,16 @@ class ToDoList extends React.Component {
key=index
-
);
diff --git a/examples/reconciliation/no-index-used-as-key.js b/examples/reconciliation/no-index-used-as-key.js
index 04e3ffad..56bbbbdf 100644
--- a/examples/reconciliation/no-index-used-as-key.js
+++ b/examples/reconciliation/no-index-used-as-key.js
@@ -7,9 +7,7 @@ const ToDo = props => (
-
+
|
);
@@ -31,26 +29,18 @@ class ToDoList extends React.Component {
}
sortByEarliest() {
- const sortedList = this.state.list.sort(
- (a, b) => {
- return (
- a.createdAt - b.createdAt
- );
- }
- );
+ const sortedList = this.state.list.sort((a, b) => {
+ return a.createdAt - b.createdAt;
+ });
this.setState({
list: [...sortedList],
});
}
sortByLatest() {
- const sortedList = this.state.list.sort(
- (a, b) => {
- return (
- b.createdAt - a.createdAt
- );
- }
- );
+ const sortedList = this.state.list.sort((a, b) => {
+ return b.createdAt - a.createdAt;
+ });
this.setState({
list: [...sortedList],
});
@@ -58,8 +48,7 @@ class ToDoList extends React.Component {
addToEnd() {
const date = new Date();
- const nextId =
- this.state.toDoCounter + 1;
+ const nextId = this.state.toDoCounter + 1;
const newList = [
...this.state.list,
{id: nextId, createdAt: date},
@@ -72,8 +61,7 @@ class ToDoList extends React.Component {
addToStart() {
const date = new Date();
- const nextId =
- this.state.toDoCounter + 1;
+ const nextId = this.state.toDoCounter + 1;
const newList = [
{id: nextId, createdAt: date},
...this.state.list,
@@ -89,28 +77,16 @@ class ToDoList extends React.Component {
key=id
-
+
Add New to Start
-
+
Add New to End
-
+
Sort by Earliest
-
+
Sort by Latest
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
|
created at |
- {this.state.list.map(
- (todo, index) => (
-
- )
- )}
+ {this.state.list.map((todo, index) => (
+
+ ))}
);
diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js
index 2d4345ef..024b3587 100644
--- a/examples/rendering-elements/render-an-element.js
+++ b/examples/rendering-elements/render-an-element.js
@@ -1,5 +1,2 @@
const element = Hello, world
;
-ReactDOM.render(
- element,
- document.getElementById('root')
-);
+ReactDOM.render(element, document.getElementById('root'));
diff --git a/examples/rendering-elements/update-rendered-element.js b/examples/rendering-elements/update-rendered-element.js
index f16ddcc1..a4dabafc 100644
--- a/examples/rendering-elements/update-rendered-element.js
+++ b/examples/rendering-elements/update-rendered-element.js
@@ -2,17 +2,11 @@ function tick() {
const element = (
Hello, world!
-
- It is{' '}
- {new Date().toLocaleTimeString()}.
-
+ It is {new Date().toLocaleTimeString()}.
);
- // highlight-range{1-4}
- ReactDOM.render(
- element,
- document.getElementById('root')
- );
+ // highlight-next-line
+ ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
diff --git a/examples/tutorial-expanded-version.js b/examples/tutorial-expanded-version.js
index 61a7d094..f3ad0d72 100644
--- a/examples/tutorial-expanded-version.js
+++ b/examples/tutorial-expanded-version.js
@@ -1,7 +1,5 @@
-
- Shopping List for {props.name}
-
+
Shopping List for {props.name}
- Instagram
- WhatsApp
diff --git a/examples/uncontrolled-components/input-type-file.js b/examples/uncontrolled-components/input-type-file.js
index 93dd13fc..cbb855a1 100644
--- a/examples/uncontrolled-components/input-type-file.js
+++ b/examples/uncontrolled-components/input-type-file.js
@@ -1,24 +1,19 @@
class FileInput extends React.Component {
constructor(props) {
super(props);
- this.handleSubmit = this.handleSubmit.bind(
- this
- );
+ this.handleSubmit = this.handleSubmit.bind(this);
}
- // highlight-range{5}
+ // highlight-range{4}
handleSubmit(event) {
event.preventDefault();
alert(
- `Selected file - ${
- this.fileInput.files[0].name
- }`
+ `Selected file - ${this.fileInput.files[0].name}`
);
}
render() {
return (
-
);
}