初心者が始めるReactハンズオン

前回はVue.jsを利用したハンズオンを実施していましたが、今回はReactのハンズオンを実施し、記述方法や導入、特徴などからVue.jsとの差異を明確にしつつ、Reactの学習を進めていきます。

1. Reactとは


ReactとはJavaScriptライブラリです。

FacebookをはじめInstagram・Slack・Netflix・Yahoo!など、世界的なWebサイト・WebアプリでReactが採用されています。


Reactが注目されている背景として、SPA「Single Page Application」の普及があげられます。

SPAでは、クリックなどによって他ページに遷移などはせず、1つのWebページだけで全ての処理が完結します。

1つのページで全ての処理を完結させる必要上、同じページにたくさんの機能が集約されることになります。

そのため、機能を厳選してページ内に配置しないと、UIは雑然として使いにくくなってしまいます。

そのため、Reactをはじめとしたライブラリやフレームワークで一貫したクオリティの担保と、開発性の工場を計ることができます。


加えてReactは、数あるUI用ライブラリ・フレームワークの中でもパフォーマンスが高く、最先端のUIを作りやすいのが特徴です。

またReactはライブラリであることから、フレームワークと違い必要な機能だけを抜粋して利用できることも注目されている理由といえます。


参考：
https://www.kagoya.jp/howto/it-glossary/develop/react/#:~:text=React%E3%81%A8%E3%81%AF%E3%80%81Web%E3%82%B5%E3%82%A4%E3%83%88,%E3%82%BD%E3%83%BC%E3%82%B9%E5%8C%96%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82

2. 環境構築

前回のVueのインストール時にnode.jsをインストール済みのため、node.jsのインストール手順は省略します。

npx create-react-app react-project

npxはnパッケージに含まれる、パッケージ実行ツールです。

npmはパッケージ管理ツールなのに対し、npxでは実行のみを行います。

cd react-project

npm start

npmでサーバを起動します。

この状態で http://localhost:xxxxのようにhttpポートが解放されるので、こちらにアクセスすると下図のような画面になります。


3. 実装


create-react-appコマンドでプロジェクトを作成すると、publicとsrcという名称のディレクトリが作成されます。

publicは、ビルドを実行した際に、加工されることなく公開されるファイルを保存するための場所です。


一方、srcにはビルド時にトランスパイルやバンドルが必要なソースコードを保存します。

要するにpublicには静的なファイル、srcにはソースの実体を配置するといったところでしょうか。

3-1. 実行のサイクル

React実行の流れとしては

トップページ（index.html）→index.js→Apps.jsの流れで動いていきます。

・public/index.html

アプリが動作するメインのページ

・src/index.js

Reactアプリを実行する際、一番最初に呼び出されるファイル

・Appコンポーネント

コンポーネント＝ページを構成するUI部品。

3-2. コンポーネント

reactではコンポーネントを作成しUIを構築するのが一般的なようです。

そのため、コンポーネント用にsrc/componentsなどのディレクトリに格納しておくと便利とのことでした。

コンポーネントには種類があり、主にこの2種類になります。

　・Class Component : クラスによって定義されたコンポーネント

　・Functional Component : 関数型で定義されたコンポーネント

・クラスコンポーネント

クラスコンポーネントでは、React.Componentクラスを継承してクラスを返す形になります。

クラスを使用しているため、ライフサイクルやstateを持っています。

import React from 'react';

class Test extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
              <h2>{this.props.title}</h2>
            </div>
        );
    }
}

export default Test ;

上記ではReact Componentを継承したTestクラスを生成しています。

クラス内ではコンストラクタにてpropsという値をもっています。

このpropsは親コンポーネントから子コンポーネントへ値を渡すための仕組みのことを指し、テキストやスタイル、イベントの受け渡しができるものです。


例えば親コンポーネントに下記のような記述をします。

import Title from './components/Title';

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Title titleStyle={{backgroundColor: "pink"}} title="リンゴ"/>
        <Title titleStyle={{backgroundColor: "yellow"}} title="バナナ"/>
        <Title titleStyle={{backgroundColor: "orange"}} title="オレンジ"/>
      </View>
    );
  }
}

続けて子コンポーネントに下記のような記述をします。

export default class Title extends React.Component {
  render() {
&n

3-3. Hello World

ここまでを踏まえたうえで、Hello Worldを出力するコンポーネントを作成してみたいと思います。

まずは親コンポーネントを用意してみます。

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

const Parent= () => {
    return (
        <React.Fragment>
            <Child title={'Hello World'}/>
        </React.Fragment>
    );
}

export default Parent;

子コンポーネントに対してtitle = Hello Worldを渡しています。

小コンポーネント側を実装してみます。

import React from 'react';

const Child = (props) => {
    return (
        <div>
            <h2>{props.title}</h2>
        </div>
    );
};

export default Child ;

propsでわたってきた値をprops.titleで出力しています。

子コンポーネント側からはどこからでも値を受け取れるように、親に関する記述をしないという作りになっていのかなという印象です。


たとえば、商品コンポーネントを親として、値段や画像などのプロパティを返すようにして、各コンポーネントで表示の仕方を変えるなどといった利用が想像できます。

人気のタグ一覧

関連記事

カテゴリー