hyeyeon-sun

Make Customer component

1 -import React from 'react'; 1 +import React, { Component } from 'react';
2 -import logo from './logo.svg';
3 import './App.css'; 2 import './App.css';
3 +import Customer from './components/Customer'
4 4
5 -function App() { 5 +const customer ={
6 - return ( 6 + 'name': '이혜연',
7 - <div className="App"> 7 + 'birthday': '000416',
8 - <header className="App-header"> 8 + 'gender': '여자',
9 - <img src={logo} className="App-logo" alt="logo" /> 9 + 'job': '대학생'
10 - <p>
11 - Edit <code>src/App.js</code> and save to reload.
12 - </p>
13 - <a
14 - className="App-link"
15 - href="https://reactjs.org"
16 - target="_blank"
17 - rel="noopener noreferrer"
18 - >
19 - Learn React
20 - </a>
21 - </header>
22 - </div>
23 - );
24 } 10 }
25 11
12 +class App extends Component {
13 + render() {
14 + return (
15 + <Customer
16 + name={customer.name}
17 + birthday={customer.birthday}
18 + gender={customer.gender}
19 + job={customer.job}
20 + />
21 + );
22 + }
23 +}
24 +
25 +
26 +
26 export default App; 27 export default App;
......
1 +import React from 'react';
2 +
3 +class Customer extends React.Component {
4 + render(){
5 + return(
6 + <div>
7 + <h2>{this.props.name}</h2>
8 + <p>{this.props.birthday}</p>
9 + <p>{this.props.gender}</p>
10 + <p>{this.props.job}</p>
11 + </div>
12 + );
13 + }
14 +
15 +}
16 +
17 +
18 +export default Customer;
...\ No newline at end of file ...\ No newline at end of file