-
+
{props.author.name}
@@ -25,16 +27,19 @@ 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(
,
+ author={comment.author}
+ />,
document.getElementById('root')
-);
\ No newline at end of file
+);
diff --git a/examples/components-and-props/rendering-a-component.js b/examples/components-and-props/rendering-a-component.js
index d42e1681..5458b516 100644
--- a/examples/components-and-props/rendering-a-component.js
+++ b/examples/components-and-props/rendering-a-component.js
@@ -6,4 +6,4 @@ const element =
;
ReactDOM.render(
element,
document.getElementById('root')
-);
\ No newline at end of file
+);
diff --git a/examples/es5-syntax-example.js b/examples/es5-syntax-example.js
index 6d1e2033..122f7c39 100644
--- a/examples/es5-syntax-example.js
+++ b/examples/es5-syntax-example.js
@@ -1,3 +1,5 @@
const element =
Hello, world!
;
-const container = document.getElementById('root');
-ReactDOM.render(element, container);
\ No newline at end of file
+const container = document.getElementById(
+ 'root'
+);
+ReactDOM.render(element, container);
diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js
index adb32664..67013fa8 100644
--- a/examples/introducing-jsx.js
+++ b/examples/introducing-jsx.js
@@ -1,5 +1,7 @@
function formatName(user) {
- return user.firstName + ' ' + user.lastName;
+ return (
+ user.firstName + ' ' + user.lastName
+ );
}
const user = {
@@ -8,9 +10,7 @@ const user = {
};
const element = (
-
- Hello, {formatName(user)}!
-
+
Hello, {formatName(user)}!
);
ReactDOM.render(
diff --git a/examples/jsx-simple-example.js b/examples/jsx-simple-example.js
index af770ebc..4fa46d3b 100644
--- a/examples/jsx-simple-example.js
+++ b/examples/jsx-simple-example.js
@@ -1,3 +1,3 @@
function hello() {
return
Hello world!
;
-}
\ No newline at end of file
+}
diff --git a/examples/reconciliation/index-used-as-key.js b/examples/reconciliation/index-used-as-key.js
index 9d7ff13c..bb4d4284 100644
--- a/examples/reconciliation/index-used-as-key.js
+++ b/examples/reconciliation/index-used-as-key.js
@@ -1,8 +1,16 @@
-const ToDo = (props) => (
+const ToDo = props => (
- |
- |
- |
+
+
+ |
+
+
+ |
+
+
+ |
);
@@ -14,86 +22,114 @@ class ToDoList extends React.Component {
this.state = {
todoCounter: todoCounter,
list: [
- { id: todoCounter, createdAt: date },
- ]
- }
+ {
+ id: todoCounter,
+ createdAt: date,
+ },
+ ],
+ };
}
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]
- })
+ 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]
- })
+ list: [...sortedList],
+ });
}
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 }
+ {id: nextId, createdAt: date},
];
this.setState({
list: newList,
- todoCounter: nextId
+ todoCounter: nextId,
});
}
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
+ {id: nextId, createdAt: date},
+ ...this.state.list,
];
this.setState({
list: newList,
- todoCounter: nextId
+ todoCounter: nextId,
});
}
render() {
- return(
+ return (
-
key=index
-
- )
+ );
}
}
diff --git a/examples/reconciliation/no-index-used-as-key.js b/examples/reconciliation/no-index-used-as-key.js
index b083118d..04e3ffad 100644
--- a/examples/reconciliation/no-index-used-as-key.js
+++ b/examples/reconciliation/no-index-used-as-key.js
@@ -1,8 +1,16 @@
-const ToDo = (props) => (
+const ToDo = props => (
- |
- |
- |
+
+
+ |
+
+
+ |
+
+
+ |
);
@@ -13,87 +21,115 @@ class ToDoList extends React.Component {
const toDoCounter = 1;
this.state = {
list: [
- { id: toDoCounter, createdAt: date },
+ {
+ id: toDoCounter,
+ createdAt: date,
+ },
],
- toDoCounter: toDoCounter
- }
+ toDoCounter: toDoCounter,
+ };
}
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]
- })
+ 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]
- })
+ list: [...sortedList],
+ });
}
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 }
+ {id: nextId, createdAt: date},
];
this.setState({
list: newList,
- toDoCounter: nextId
+ toDoCounter: nextId,
});
}
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
+ {id: nextId, createdAt: date},
+ ...this.state.list,
];
this.setState({
list: newList,
- toDoCounter: nextId
+ toDoCounter: nextId,
});
}
render() {
- return(
+ return (
-
key=id
-
+ key=id
+
+
Add New to Start
-
+
Add New to End
-
+
Sort by Earliest
-
+
Sort by Latest
- ID | | created at |
+ ID |
+ |
+ created at |
- {
- this.state.list.map((todo, index) => (
+ {this.state.list.map(
+ (todo, index) => (
- ))
- }
+ )
+ )}
- )
+ );
}
}
diff --git a/examples/tutorial-expanded-version.js b/examples/tutorial-expanded-version.js
index 767a233f..61a7d094 100644
--- a/examples/tutorial-expanded-version.js
+++ b/examples/tutorial-expanded-version.js
@@ -1,8 +1,10 @@
-
Shopping List for {props.name}
+
+ Shopping List for {props.name}
+
- Instagram
- WhatsApp
- Oculus
-
\ No newline at end of file
+
;
diff --git a/package.json b/package.json
index 7ebc70ae..4b551bb2 100644
--- a/package.json
+++ b/package.json
@@ -79,10 +79,14 @@
"ci-check": "npm-run-all prettier:diff --parallel lint flow",
"dev": "gatsby develop -H 0.0.0.0",
"flow": "flow",
+ "format:source": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
+ "format:examples": "prettier --config .prettierrc.examples --write \"examples/**/*.js\"",
"lint": "eslint .",
"netlify": "yarn install && yarn build",
- "prettier": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
- "prettier:diff": "prettier --config .prettierrc --list-different \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
+ "nit:source": "prettier --config .prettierrc --list-different \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
+ "nit:examples": "prettier --config .prettierrc.examples --list-different \"examples/**/*.js\"",
+ "prettier": "yarn format:source && yarn format:examples",
+ "prettier:diff": "yarn nit:source && yarn nit:examples",
"reset": "rimraf ./.cache"
},
"devDependencies": {