Increased Prettier line-width for examples

reactjs · Feb 7, 2018 · 5997700 · 5997700
1 parent b8213fb
commit 5997700
Showing 26 changed files with 87 additions and 231 deletions.
diff --git a/.prettierrc.examples b/.prettierrc.examples
@@ -2,7 +2,7 @@
   "bracketSpacing": false,
   "jsxBracketSameLine": true,
   "parser": "flow",
-  "printWidth": 40,
+  "printWidth": 60,
   "singleQuote": true,
   "trailingComma": "es5"
 }
diff --git a/examples/16-3-release-blog-create-ref.js b/examples/16-3-release-blog-create-ref.js
@@ -3,13 +3,8 @@ class MyComponent extends React.Component {
   divRef = React.createRef();
 
   render() {
-    // highlight-range{4}
-    return (
-      <input
-        type="text"
-        ref={this.divRef}
-      />
-    );
+    // highlight-next-line
+    return <input type="text" ref={this.divRef} />;
   }
 
   componentDidMount() {

diff --git a/examples/components-and-props/composing-components.js b/examples/components-and-props/composing-components.js
@@ -12,7 +12,4 @@ function App() {
   );
 }
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git 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 (
     <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(

diff --git 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}
         </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(

diff --git 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 = <Welcome name="Sara" />;
-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
@@ -1,5 +1,3 @@
 const element = <h1>Hello, world!</h1>;
-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
@@ -1,19 +1,12 @@
 function formatName(user) {
-  return (
-    user.firstName + ' ' + user.lastName
-  );
+  return user.firstName + ' ' + user.lastName;
 }
 
 const user = {
   firstName: 'Harper',
   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'));
diff --git a/examples/reconciliation/index-used-as-key.js b/examples/reconciliation/index-used-as-key.js
@@ -7,9 +7,7 @@ const ToDo = props => (
       <input />
     </td>
     <td>
-      <label>
-        {props.createdAt.toTimeString()}
-      </label>
+      <label>{props.createdAt.toTimeString()}</label>
     </td>
   </tr>
 );
@@ -31,35 +29,26 @@ 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],
     });
   }
 
   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>
     );

diff --git 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 => (
       <input />
     </td>
     <td>
-      <label>
-        {props.createdAt.toTimeString()}
-      </label>
+      <label>{props.createdAt.toTimeString()}</label>
     </td>
   </tr>
 );
@@ -31,35 +29,26 @@ 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],
     });
   }
 
   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>
     );

diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js
@@ -1,5 +1,2 @@
 const element = <h1>Hello, world</h1>;
-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
@@ -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);