Syntax tweaks

examples/context/motivation.js

@@ -11,12 +11,13 @@ class Button extends React.Component {
 class Message extends React.Component {
   render() {
     // highlight-range{1-3}
-    // The Message component must take `color` as as prop to pass it 
-    // to the Button. Using context, the Button could connect to the 
+    // The Message component must take `color` as as prop to pass it
+    // to the Button. Using context, the Button could connect to the
     // color context on its own.
     return (
       <div>
-        {this.props.text} <Button color={this.props.color}>Delete</Button>
+        <p>{this.props.text}</p>
+        <Button color={this.props.color}>Delete</Button>
       </div>
     );
   }
@@ -24,10 +25,10 @@ class Message extends React.Component {
 
 class MessageList extends React.Component {
   render() {
-    const color = "purple";
-    const children = this.props.messages.map((message) =>
+    const color = 'purple';
+    const children = this.props.messages.map(message => (
       <Message text={message.text} color={color} />
-    );
+    ));
     return <div>{children}</div>;
   }
 }

examples/context/theme-detailed-app.js

@@ -1,4 +1,4 @@
-import ThemeContext, {themes} from './theme-context';
+import {ThemeContext, themes} from './theme-context';
 import ThemedButton from './button';
 
 class App extends React.Component {

examples/context/theme-detailed-theme-context.js

@@ -10,6 +10,6 @@ export const themes = {
 };
 
 // highlight-next-line
-const ThemeContext = React.createContext(themes.dark);
-
-export default ThemeContext;
+export const ThemeContext = React.createContext(
+  themes.dark
+);

examples/context/theme-detailed-themed-button.js

@@ -1,4 +1,4 @@
-import ThemeContext from './theme-context';
+import {ThemeContext} from './theme-context';
 
 class ThemedButton extends React.Component {
   // highlight-range{3-10}