Vue.jsエンジニアのためのReact入門

<template>
  <div>
    <h1>Sample</h1>
    <h2>This is a component.</h2>
  </div>
</template>

<script>
export default {
  // dataやmethodsなど...
}
</script>

<style>
/* スタイル定義 */
</style>

import React from 'react';

function Sample() {
  return (
    <div>
      <h1>Sample</h1>
      <h2>This is a component.</h2>
    </div>
  );
}

export default Sample;

import React from 'react';

class Sample extends React.Component {
  render() {
    return (
      <div>
        <h1>Sample</h1>
        <h2>This is a component.</h2>
      </div>
    );
  }
}

export default Sample;

<template>
  <div>
    <h1>Hello, {{ name }} !</h1>
    <a :href="link">Click me</a>
    <ul>
      <li v-for="item in items" :key="item.key">
        {{ item.title }}
      </li>
    </ul>
    <p v-if="isActive">Paragraph</p>
    <p v-show="isShow">Second paragraph</p>
  </div>
</template>

return (
  <div>
    <h1>Hello, {name} !</h1>
    <a href={link}>Click me</a>
    <ul>
      {items.map(item => (
        <li key={item.key}>{item.title}</li>
      ))}
    </ul>
    {isActive && <p>Paragraph</p>}
    <p style={{ display: isShow ? 'initial' : 'none' }}>Second paragraph</p>
  </div>
);

return (
  <React.Fragment>
    <h1>...</h1>
    <h2>...</h2>
    <h3>...</h3>
  </React.Fragment>
);

return (
  <>
    <h1>...</h1>
    <h2>...</h2>
    <h3>...</h3>
  </>
);

<!-- オブジェクト -->
<button class="btn" :class="{ 'btn-primary': isPrimary }">...</button>

<!-- 配列 -->
<button class="btn" :class="['btn-primary', 'btn-small']">...</button>

return <button className="btn btn-primary">...</button>;

import classNames from 'classnames'

const buttonClass = classNames({
  btn: true,
  'btn-primary': isPrimary
});

return <button className={buttonClass}>...</button>;

const buttonClass = classNames('btn', 'btn-primary', 'btn-small');

return <button className={buttonClass}>...</button>;

<div v-html="htmlString"></div>

return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;

<button @click="handleClick">Click me</button>

<!-- イベント修飾子 -->
<form @submit.prevent="handleSubmit">...</form>

<button onClick={handleClick}>Click me</button>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => setCount(count + 1);

  return <button onClick="handleClick">{count}</button>;
}

const [name, setName] = useState("John Doe");
const [age, setAge] = useState(20);

const [user, setUser] = useState({ name: "John Doe", age: 20 });

<input type="text" v-model="name" />

const [name, setName] = useState('');
const handleInput = e => setName(e.target.value);

return <input type="text" onChange="handleInput" value="name" />;

<script>
export default {
  methods: {
    sayHello() {
      console.log(`Hello, ${this.name}!`)
    }
  }
}
</script>

function MyComponent() {
  const [name, setName] = useState('');

  function sayHello() {
    console.log(`Hello, ${name}!`);
  }

  return <button onClick={sayHello}>...</button>;
}

<template>
  <div>
    <div ref="target">...</div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.target);
    }
  }
}
</script>

import React, { useRef } from 'react';

function MyComponent() {
  const target = useRef(null);

  const handleClick = () => {
    console.log(target.current);
  };

  return (
    <>
      <div ref={target}>...</div>
      <button onClick={handleClick}>Click me</button>
    </>
  );
}

export default MyComponent;

<p>Hello, {{ fullName }} !</p>

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

import React, { useMemo } from 'react';

function MyComponent() {
  const [firstName, setFirstName] = useState("John");
  const [lastName, setlastName] = useState("Doe");

  const getFullName = () => `${firstName} ${lastName}`;
  const fullName = useMemo(getFullName, [firstName, lastName]);

  return <p>Hello, {fullName} !</p>;
}

export default MyComponent;

export default {
  watch: {
    name(newVal, oldVal) {
      // newVal -> 変更後の値
      // oldVal -> 変更前の値
    }
  }
}

<p>￥{{ price | formatNumber }}</p>

const formatNumber = num => {
  // ...
};

return <p>￥{formatNumber(price)}</p>

export default {
  created() {
    // ...
  }
}

function MyComponent() {
  // おそらくここが created にあたる

  return <div>...</div>;
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // created
  }

  render() {
    return <div>...</div>;
  }
}

export default {
  mounted() {
    // ...
  }
}

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // マウント後に実行したい処理
    someApi.getItems().then(response => {
      // ...
    });
  }, []);

  return <div>...</div>;
}

// 第二引数：なし
// 第一引数：レンダリング時に毎回呼ばれる
useEffect(() => {});

// 第二引数：空配列
// 第一引数：初回のレンダリング時のみ呼ばれる
// → つまり mounted と同等
useEffect(() => {}, []);

// 第二引数：中身のある配列
// 第一引数：配列で渡した変数のいずれかに変更があった場合のみ呼ばれる
useEffect(() => {}, [aaa, bbb]);

useEffect(async () => {
  const response = await someApi.getItems();
  // ...
}, []);

useEffect(() => {
  const getItems = async () => {
    const response = await someApi.getItems();
    // ...
  };
  getItems();
}, []);

class MyComponent extends React.Component {
  componentDidMount() {
    // ...
  }

  render() {
    return <div>...</div>;
  }
}

export default {
  updated() {
    // ...
  }
}

import React, { useEffect, useRef } from 'react';

function MyComponent() {
  const mounted = useRef(false);

  useEffect(() => {
    if (!mounted.current) {
      mounted.current = true;
      return false;
    }

    // ...
  });

  return <div>...</div>;
}

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState, snapshot) {
    // ...
  }

  render() {
    return <div>...</div>;
  }
}

export default {
  destroyed() {
    // ...
  }
}

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // ...

    return () => {
      // この関数はコンポーネントが UI から削除される前に呼び出される
    };
  });

  return <div>...</div>;
}

class MyComponent extends React.Component {
  componentWillUnmount() {
    // ...
  }

  render() {
    return <div>...</div>;
  }
}

export default {
  errorCaptured() {
    // ...
  }
}

class MyComponent extends React.Component {
  componentDidCatch(error, info) {
    // ...
  }

  render() {
    return <div>...</div>;
  }
}

useEffect(() => {
  fetchUser().then(/* ... */);
  fetchItems().then(/* ... */);
}, []);

useEffect(() => {
  fetchUser().then(/* ... */);
}, []);

useEffect(() => {
  fetchItems().then(/* ... */);
}, []);

const user = useUser(userId);
const items = useItems();

<Child :name="test" :item="sampleData" />

<script>
function Item(one, two) {
  this.one = one
  this.two = two
}

export default {
  props: {
    name: {
      type: String,
      required: false,
      default: 'John Doe'
    },
    item: {
      type: Item,
      required: true
    }
  }
}
</script>

<Child name={test} item={sampleData} />

import React from 'react'
import PropTypes from 'prop-types'

function Child(props) {
  // props.name
  // props.item
}

Child.propTypes = {
  name: PropTypes.string,
  item: PropTypes.shape({
    one: PropTypes.string.isRequired,
    two: PropTypes.number.isRequired
  }).isRequired
}

Child.defaultProps = {
  name: 'John Doe'
}

export default Child

onSomethingHappened() {
  this.$emit('hello');
}

<Child @hello="parentMethod" />

function Child(props) {
  const onSomethingHappened = () => {
    props.onHello();
  };
}

<Child onHello={parentMethod} />

<Child>
  <p>Hello world</p>
</Child>

<template>
  <div>
    <slot></slot>
  </div>
</template>

<Child>
  <p>Hello world</p>
</Child>

function Child(props) {
  return <div>{props.children}</div>
}

<MyComponent>
  <template #header>
    <MyHeader />
  </template>
  <template #content>
    <MyContent />
  </template>
  <template #footer>
    <MyFooter />
  </template>
</MyComponent>

return (
  <MyComponent
    header={<MyHeader />}
    content={<MyContent />}
    footer={<MyFooter />}
  />
);

function MyComponent(props) {
  return (
    <div>
      <header>{props.header}</header>
      <main>{props.contnet}</main>
      <footer>{props.footer}</footer>
    </div>
  )
}