1 // src/components/HelloWorld.js 2 3 import React from 'react'; 4 5 export default () => { 6 return

Hello World

7 } 1 // src/App.js 2 3 import React, { Component } from 'react'; 4 import logo from './logo.svg'; 5 import './App.css'; 6 import HelloWorld from './components/HelloWorld'; 7 8 class App extends Component { 9 render() { 10 return ( 11

1 // src/App.js 2 …… 8 class App extends Component { 9 render() { 10 return ( 11 21 ); 22 } 23 } 24 25 export default App; 1 // src/components/HelloWorld.js 2 3 import React from 'react'; 4 5 export default props => { 6 return

{props.greeting} World

; 7 }; 2 

1 // src/components/HelloWorld.js 2 3 import React from 'react'; 4 5 export default ({ greeting }) => { 6 return

{greeting} World

; 7 }; 3 

1 // src/components/HelloWorld.js 2 3 import React from 'react'; 4 5 export default ({ greeting = 'Bonjour' }) => { 6 return

{greeting} World

; 7 } 1 // src/App.js 2 …… 8 class App extends Component { 9 render() { 10 return ( 11 21 ); 22 } 23 } 24 25 export default App; 4 ←greetingΛফ͢ 

1 // src/components/HelloWorld.js 2 3 import React from 'react'; 4 5 const styles = { 6 h1: { 7 color: 'gold', 8 backgroundColor: 'black' 9 } 10 } 11 12 export default ({ greeting = 'Bonjour', to }) => { 13 return ( 14

15 {greeting} {to} 16

17 ); 18 }; 5 

1 // src/App.js …… 8 class App extends Component { 9 constructor(props) { 10 super(props); 11 this.state = { 12 greeting: 'Hello', 13 to: 'World', 14 }; 15 this.updateGreeting = this.updateGreeting.bind(this); 16 } 17 18 updateGreeting() { 19 this.setState({ greeting: '͜Μʹͪ͸' }); 20 } 21 22 render() { 23 return ( 24