【REACT】Componentを学びましょう！part.1 (初心者向け)

概要

社内勉強会のため、
Reactの資料を作りました。
自分も、よく知らないので、
一緒に勉強しましょう！！

---

事前準備

https://codesandbox.io/?from-app=1

---

Component

Componentは、状態値を利用してUIを表現します。
Component間の一方向にデータを送受信するprops、
Componentの内部で使用されるstateです

---

Componentを作成

Componentは、Classと関数形Componentがあります。
まず、関数形Componentの作成から始めます。

MyComponent.js

import React from "react";

const MyComponent = () => {
  return <div> This is new Component. </div>
}
export default MyComponent;

MyComponent.js

import React from "react";

function MyComponent() {
  return <div> This is new Component. </div>;
}
export default MyComponent;

App.js

import React from "react";
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent />
}

export default App;

結果

---

Class形Component

MyComponent.js

import React from "react";

class MyComponent extends React.Component {
  render() {
    return <div> This is new Component. </div>;
  }
}
export default MyComponent;

---

propsを使う！

props(properties)は、
Componentで使用するデータの変更されないデータを扱う際に使用します。
親Componentで子Componentにデータを転送するときに使います。
propsは、変更が不可能です。

MyComponent.js

import React from "react";

const MyComponent = props => {
  return <div> My name is {props.name}.</div>;
};

export default MyComponent;

App.js

import React from "react";
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name="Tom" />;
};

export default App;

結果

---

defaultProps

MyComponent.js

import React from "react";

const MyComponent = props => {
  return <div> My name is {props.name}.</div>;
};

MyComponent.defaultProps = {
  name: "NULL"
};

export default MyComponent;

---

propsTypes

MyComponent.js

import React from "react";
import PropsType from "prop-types";

const MyComponent = ({ name }) => {
  return <div> My name is {name}.</div>;
};

MyComponent.defaultProps = {
  name: "NULL"
};

MyComponent.propsType = {
  name: PropsType.string
};

export default MyComponent;

---

Class形Component

MyComponent.js

import React, { Component } from "react";
import PropsType from "prop-types";

class MyComponent extends Component {
  static defaultProps = {
    name: "NULL"
  };

  static propsType = {
    name: PropsType.string
  };

  render(){
    const {name} = this.props;
    return <div> My name is {name}.</div>;
  }
}

export default MyComponent;