0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React.jsの基本

Last updated at Posted at 2022-03-31

概要

今回は新たにReactを学習し始めたのでその基本をアウトプットしたいと思います。

基本構文

基本は下記が構文になります。

Sample.jsx
import ReactDOM from "react-dom";

ReactDOM.render(
  <h1>Hello World!</h1>,
  document.getElementalById("root"), // index.htmlタグのidがrootになっていると仮定
);

基本的にはReactDOM.renderを使用してレンダリングを行っていきます。

コンポーネント

Reactにもコンポーネントの概念があります。
コンポーネントは2種類あり、関数コンポーネントクラスコンポーネントがあります。

関数コンポーネント

関数として下記のようにコンポーネント化することができます。

Children.jsx
export const Message = () => { // コンポーネント名はパスカルケースで記載
  return <h1>Hello World!</h1>;
};
Parent.jsx
import ReactDOM from "react-dom";
import { Message } from "Children";

ReactDOM.render(
  <Message />,
  document.getElementalById("root"),
);

上記のようにコンポーネントタグをReactDOM.renderに定義することでブラウザにHello World!がレンダリングされる。

親コンポーネントから子コンポーネントへpropsの受け渡し方

Parent.jsx
import ReactDOM from "react-dom";
import { Message } from "Children";

ReactDOM.render(
  <Message message="Hello World!"/>, // コンポーネントタグにプロパティを渡す
  document.getElementalById("root"),
Children.jsx
export const Message = (props) => { // 引数にpropsを取り親要素から渡されたプロパティを指定する
  return <h1>{props.message}</h1>
};

これでブラウザにHello World!がレンダリングされます。

stateの定義の仕方

関数コンポーネントでstateを利用する場合はuseStateを使用します。

Children.jsx
import { useState } from "react";

export const Message = () => {
  const [message, setMessage] = useState("Hello World!"); // useStateの引数は初期値を入れる
  return <h1>{message}</h1>
};

分割代入の第1引数はstateに設定したい任意の変数を入れ、第2引数にはstate(今回はmessageのこと)変更する際に使用する任意の関数を入れる。
そしてuseState()の引数には初期値を入れる。

stateを更新する場合

例えば、ボタンを押すと表示されるmessageが変わる機能を実装すると仮定すると

Children.jsx
import { useState } from "react";

export const Message = () => {
  const [message, setMessage] = useState("Hello World!"); // useStateの引数は初期値を入れる
  const onClickChangeMessage = () => setMessage("Good Bye"); // 第2引数に設定したsetMessageを利用してstateのmessageを変更する
  return(
    <>  // 複数タグがある場合はひとつのタグで囲わないと行けない
      <h1>{message}</h1>
      <button onClick={onClickChangeMessage}>ボタン</button> // ボタンを押すとGood Byeに文字列が変わる
    </>
  )
};

クラスコンポーネント

クラスコンポーネントは先程の関数コンポーネントとは少し違い作成するのは少し面倒。
また下記のように単純ならそこまで面倒ではないが、propsstateを使用するとなると
関数コンポーネントよりは複雑になる。

Children.jsx
class Message extends React.Component {
  render () {
    return <h1>Hello World!</h1>
  };
};
Parent.jsx
import ReactDOM from "react-dom";
import { Message } from "Children";

ReactDOM.render(
  <Message />,
  document.getElementalById("root"),
);

上記のようにすればブラウザにHello World!がレンダリングされる。

親コンポーネントから子コンポーネントへpropsの受け渡し方

Parent.jsx
import ReactDOM from "react-dom";
import { Message } from "Children";

ReactDOM.render(
  <Message message="Hello World!" />, // 同様にプロパティを設定
  document.getElementalById("root"),
);
Children.jsx
class Message extends React.Component {
  render () {
    return <h1>{this.props.message}</h1> //propsの前にthisを付ける
  };
};

関数コンポーネントと異なりthisをつけなければなりません。

stateの定義の仕方

クラスコンポーネントの場合はconstructorを設定しないといけません

Children.jsx
class Message extends React.Component {
  // 追加
  constructor(props) {
    super(props); // super(props)を必ず付ける
    this.state = {
      message: "Hello World!",
    };
  };
  //

  render () {
    return <h1>{this.state.message}</h1> //propsの前にthisを付ける
  };
};

stateを更新する場合

Children.jsx
class Message extends React.Component {
  constructor(props) {
    super(props); // super(props)を必ず付ける
    this.state = {
      message: "Hello World!",
    };
  };
  const onClickChangeMessage = () => this.setState({ message: "Good Bye" })
  render () {
    return <h1 onClick={() => this.setState("Good Bye")}>{this.state.message}</h1> //propsの前にthisを付ける
  };
};

クラスコンポーネントではsetStateを使用してstateを更新する。

関数コンポーネントとクラスコンポーネントの使い分け

以前まではstateはクラスコンポーネントでしか使用できなかったようだが、
現在はバーションアップして関数コンポーネントでもstateを利用できるようになったので
簡易的に書ける関数コンポーネントを使用した方が良さそう。

まとめ

基本的なことをまとめましたが、まだまだ序盤なのでもっと応用的な部分も学びポートフォリオをReact化したいです。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?