react 事始め 4

◾️Component

1) Class Component：AppというクラスがComponentを継承して存在

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
    <React.Fragment>
      <label htmlFor="bar">bar</label>
      <input type="text" onChange={() => {console.log("I am clicked!")}}></input>
    </React.Fragment>
    )
  }
}

2) Functional Component：関数で定義しているので、Componentは不要

import React from 'react';

const App = () => {
  return (
  <div>
    <Input />
  </div>
  )
}

const Input = () => {
  return <div>
    <label htmlFor="bar">bar</label>
    <input type="text" onChange={() => {console.log("I am clicked!")}}></input>
  </div>    
}

export default App;

◾️Props

propsとは、componentの属性をいい、あるデータの属性に対して参照できるもののことをいう。propsには数値、文字列、配列、オブジェクト、関数など何でも使用することができる。{ }で囲ってpropsを渡す。

import React from 'react';

const App = () => {
  const profiles = [
    { name: "TKB_48", age: 15,},
    { name: "HKT_48", age: 12,},
    { name: "NMB_48" }
  ]
  return (
  <div>
    {
      profiles.map((profile, index) => {
        return <User name={profile.name} age={profile.age} key={index} />
      })
    }
  </div>
  )
}

const User = (props) => {
  return <div>Hi, I am {props.name}, and {props.age} years old! </div>    
}

User.defaultProps = {
  age: 10
}

export default App;

◾️そのほかに使用例

./src/App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person.js'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is really working!</p>
        <Person />
      </div>
    );
  }
}

export default App;

========================
./Person/Person.js

import React from 'react'

const person = () => {
  return <p>I'm a Person!</p>
}

export default person

./src/App.js

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person.js'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is really working!</p>
        <Person name="Max" age="28" />
        <Person name="Manu" age="29" />
        <Person name="Stephanie" age="26" />
      </div>
    );
  }
}

export default App;

=======================
.src/Person/Person.js

import React from 'react'

const person = (props) => {
  return <p>I'm {props.name} and I am {props.age} years old!</p>
}

export default person