amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-22 20:01:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format examples with Prettier

Browse Source
This commit is contained in:
Brian Vaughn
2017-11-23 08:32:54 -08:00
parent 77aab0bb80
commit a03aa6c812
12 changed files with 185 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/components-and-props/composing-components.js
View File

@@ -14,5 +14,5 @@ function App() {
ReactDOM.render(
<App />,
document.getElementById('root')
);
document.getElementById('root'),
);

20
examples/components-and-props/extracting-components-continued.js
View File

@@ -4,9 +4,11 @@ function formatDate(date) {
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name} />
<img
className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
@@ -40,13 +42,15 @@ const comment = {
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(
<Comment
date={comment.date}
text={comment.text}
author={comment.author} />,
document.getElementById('root')
);
author={comment.author}
/>,
document.getElementById('root'),
);

20
examples/components-and-props/extracting-components.js
View File

@@ -6,9 +6,11 @@ function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name} />
<img
className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
@@ -28,13 +30,15 @@ const comment = {
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(
<Comment
date={comment.date}
text={comment.text}
author={comment.author} />,
document.getElementById('root')
);
author={comment.author}
/>,
document.getElementById('root'),
);

4
examples/components-and-props/rendering-a-component.js
View File

@@ -5,5 +5,5 @@ function Welcome(props) {
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
document.getElementById('root'),
);

6
examples/es5-syntax-example.js
View File

@@ -1,3 +1,5 @@
const element = <h1>Hello, world!</h1>;
const container = document.getElementById('root');
ReactDOM.render(element, container);
const container = document.getElementById(
'root',
);
ReactDOM.render(element, container);

2
examples/hello-world.js
View File

@@ -1,4 +1,4 @@
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
document.getElementById('root'),
);

10
examples/introducing-jsx.js
View File

@@ -1,5 +1,7 @@
function formatName(user) {
return user.firstName + ' ' + user.lastName;
return (
user.firstName + ' ' + user.lastName
);
}
const user = {
@@ -8,12 +10,10 @@ const user = {
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
<h1>Hello, {formatName(user)}!</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
document.getElementById('root'),
);

2
examples/jsx-simple-example.js
View File

@@ -1,3 +1,3 @@
function hello() {
return <div>Hello world!</div>;
}
}

111
examples/reconciliation/index-used-as-key.js
View File

@@ -1,8 +1,16 @@
const ToDo = (props) => (
const ToDo = props => (
<tr>
<td><label>{props.id}</label></td>
<td><input/></td>
<td><label>{props.createdAt.toTimeString()}</label></td>
<td>
<label>{props.id}</label>
</td>
<td>
<input />
</td>
<td>
<label>
{props.createdAt.toTimeString()}
</label>
</td>
</tr>
);
@@ -14,90 +22,111 @@ 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 (
<div>
<code>key=index</code><br/>
<button onClick={this.addToStart.bind(this)}>
<code>key=index</code>
<br />
<button
onClick={this.addToStart.bind(
this,
)}>
Add New to Start
</button>
<button onClick={this.addToEnd.bind(this)}>
<button
onClick={this.addToEnd.bind(
this,
)}>
Add New to End
</button>
<button onClick={this.sortByEarliest.bind(this)}>
<button
onClick={this.sortByEarliest.bind(
this,
)}>
Sort by Earliest
</button>
<button onClick={this.sortByLatest.bind(this)}>
<button
onClick={this.sortByLatest.bind(
this,
)}>
Sort by Latest
</button>
<table>
<tr>
<th>ID</th><th></th><th>created at</th>
<th>ID</th>
<th />
<th>created at</th>
</tr>
{
this.state.list.map((todo, index) => (
<ToDo
key={index}
{...todo}
/>
))
}
{this.state.list.map(
(todo, index) => (
<ToDo key={index} {...todo} />
),
)}
</table>
</div>
)
);
}
}
ReactDOM.render(
<ToDoList />,
document.getElementById('root')
document.getElementById('root'),
);

106
examples/reconciliation/no-index-used-as-key.js
View File

@@ -1,8 +1,16 @@
const ToDo = (props) => (
const ToDo = props => (
<tr>
<td><label>{props.id}</label></td>
<td><input/></td>
<td><label>{props.createdAt.toTimeString()}</label></td>
<td>
<label>{props.id}</label>
</td>
<td>
<input />
</td>
<td>
<label>
{props.createdAt.toTimeString()}
</label>
</td>
</tr>
);
@@ -13,91 +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 (
<div>
<code>key=id</code><br/>
<button onClick={this.addToStart.bind(this)}>
<code>key=id</code>
<br />
<button
onClick={this.addToStart.bind(
this,
)}>
Add New to Start
</button>
<button onClick={this.addToEnd.bind(this)}>
<button
onClick={this.addToEnd.bind(
this,
)}>
Add New to End
</button>
<button onClick={this.sortByEarliest.bind(this)}>
<button
onClick={this.sortByEarliest.bind(
this,
)}>
Sort by Earliest
</button>
<button onClick={this.sortByLatest.bind(this)}>
<button
onClick={this.sortByLatest.bind(
this,
)}>
Sort by Latest
</button>
<table>
<tr>
<th>ID</th><th></th><th>created at</th>
<th>ID</th>
<th />
<th>created at</th>
</tr>
{
this.state.list.map((todo, index) => (
{this.state.list.map(
(todo, index) => (
<ToDo
key={todo.id}
{...todo}
/>
))
}
),
)}
</table>
</div>
)
);
}
}
ReactDOM.render(
<ToDoList />,
document.getElementById('root')
document.getElementById('root'),
);

2
examples/tutorial-expanded-version.js
View File

@@ -5,4 +5,4 @@
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
</div>;

8
package.json
View File

@@ -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 --write --print-width 44 \"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 --list-different --print-width 44 \"examples/**/*.js\"",
"prettier": "yarn format:source && yarn format:examples",
"prettier:diff": "yarn nit:source && yarn nit:examples",
"reset": "rimraf ./.cache"
},
"devDependencies": {