Reactハンズオン 01 入門編 コード部分抜粋 / React Handson 01 components (excerpt)

改訂2版

Transcript

1. 1 // src/components/HelloWorld.js 2 3 import React from 'react'; 4 5 export default () => { 6 return <h1>Hello World</h1> 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 <div className="App"> 12 <HelloWorld /> 13 <header className="App-header"> 14 <img src={logo} className="App-logo" alt="logo" /> 15 <h1 className="App-title">Welcome to React</h1> 16 </header> 17 <p className="App-intro"> 1
2. 1 // src/App.js 2 …… 8 class App extends Component { 9 render() { 10 return ( 11 <div className="App"> 12 <HelloWorld greeting="͓͸Α͏" /> …… 20 </div> 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 <h1>{props.greeting} World</h1>; 7 }; 2
3. 1 // src/components/HelloWorld.js 2 3 import React from 'react'; 4 5 export default ({ greeting }) => { 6 return <h1>{greeting} World</h1>; 7 }; 3
4. 1 // src/components/HelloWorld.js 2 3 import React from 'react'; 4 5 export default ({ greeting = 'Bonjour' }) => { 6 return <h1>{greeting} World</h1>; 7 } 1 // src/App.js 2 …… 8 class App extends Component { 9 render() { 10 return ( 11 <div className="App"> 12 <HelloWorld /> …… 20 </div> 21 ); 22 } 23 } 24 25 export default App; 4 ←greetingΛফ͢
5. 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 <h1 style={styles.h1}> 15 {greeting} {to} 16 </h1> 17 ); 18 }; 5
6. 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 <div className="App"> 25 <HelloWorld greeting={this.state.greeting} to={this.state.to} /> 26 <button onClick={this.updateGreeting}>͍͋ͭ͞มߋ</button> 27 <header className="App-header"> 28 <img src={logo} className="App-logo" alt="logo" /> 6