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

Update Prettier line-widths for example code

Browse Source
This commit is contained in:
Brian Vaughn
2018-02-07 09:20:56 -08:00
parent d98c4de255
commit 11a780d84c
13 changed files with 56 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.examples
View File

@@ -2,7 +2,7 @@
"bracketSpacing": false,
"jsxBracketSameLine": true,
"parser": "flow",
"printWidth": 40,
"printWidth": 60,
"singleQuote": true,
"trailingComma": "es5"
}

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

@@ -12,7 +12,4 @@ function App() {
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
ReactDOM.render(<App />, document.getElementById('root'));

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

@@ -16,9 +16,7 @@ function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
<div className="UserInfo-name">{props.user.name}</div>
</div>
);
}
@@ -27,9 +25,7 @@ function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
@@ -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(

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

@@ -15,9 +15,7 @@ function Comment(props) {
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
@@ -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(

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

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

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

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

13
examples/introducing-jsx.js
View File

@@ -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 = (
<h1>Hello, {formatName(user)}!</h1>
);
const element = <h1>Hello, {formatName(user)}!</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
ReactDOM.render(element, document.getElementById('root'));

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

@@ -7,9 +7,7 @@ const ToDo = props => (
<input />
</td>
<td>
<label>
{props.createdAt.toTimeString()}
</label>
<label>{props.createdAt.toTimeString()}</label>
</td>
</tr>
);
@@ -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 {
<div>
<code>key=index</code>
<br />
<button
onClick={this.addToStart.bind(
this
)}>
<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>
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
<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>
);

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

@@ -7,9 +7,7 @@ const ToDo = props => (
<input />
</td>
<td>
<label>
{props.createdAt.toTimeString()}
</label>
<label>{props.createdAt.toTimeString()}</label>
</td>
</tr>
);
@@ -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 {
<div>
<code>key=id</code>
<br />
<button
onClick={this.addToStart.bind(
this
)}>
<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>
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
<th />
<th>created at</th>
</tr>
{this.state.list.map(
(todo, index) => (
<ToDo
key={todo.id}
{...todo}
/>
)
)}
{this.state.list.map((todo, index) => (
<ToDo key={todo.id} {...todo} />
))}
</table>
</div>
);

5
examples/rendering-elements/render-an-element.js
View File

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

12
examples/rendering-elements/update-rendered-element.js
View File

@@ -2,17 +2,11 @@ function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>
It is{' '}
{new Date().toLocaleTimeString()}.
</h2>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
// highlight-range{1-4}
ReactDOM.render(
element,
document.getElementById('root')
);
// highlight-next-line
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);

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

@@ -1,7 +1,5 @@
<div className="shopping-list">
<h1>
Shopping List for {props.name}
</h1>
<h1>Shopping List for {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>

17
examples/uncontrolled-components/input-type-file.js
View File

@@ -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 (
<form
onSubmit={this.handleSubmit}>
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
{/* highlight-range{1-6} */}
@@ -30,9 +25,7 @@ class FileInput extends React.Component {
/>
</label>
<br />
<button type="submit">
Submit
</button>
<button type="submit">Submit</button>
</form>
);
}