RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

トップ > React > React入門~環境構築から簡単なSPAの作成~

React入門~環境構築から簡単なSPAの作成~

React

はじめに

こんにちは、Engawaです。
ここ最近業務でReactについて触れる機会があり、Reactの学習を行ったので、
環境構築からreact-router-domを使用した簡単なSPAの作成方法についてザックリ紹介していこうと思います。

Reactとは

React はFaceBook社が開発した、UIを作るためのJavaScript用ライブラリです。
アプリに特化したReactNativeもあります。
そちらについてはこちらで紹介していますのでご覧いただけれと思います。

環境構築

私が学習をした際の環境は以下になります。
node： v10.19.0
OS ： macOS Catalina
使用したエディタ：VSCode

こちらで記載する環境構築方法はmacOSのみになります。
windowsでnodeをインストールする時はこちらを参考にしてください。

次の５つのコマンドを順番にターミナルで実行してください。
Homebrewのインストール(nodeをインストールする際に使用します)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

nodeのインストール

brew install node

nのインストール

npm -g i n

nodeのバージョン確認

node -v

上記コマンドを実行してバージョンが表示されていればnodeのインストールは完了です。

$ node -v
vバージョン


続いてファイル等の作成を行います。
が、1から設定ファイル等の作成は面倒なのでcreate-react-appを使用します。
create-reeact-appは環境構築ツールで一度インストールしてしまえば、コマンド1つでReactに必要な環境を構築することができます。
まずは下記コマンドでcreate-react-appをインストールします。

npm install create-react-app

インストールが完了したらプロジェクトを作成したいフォルダ上で、下記コマンドでcreate-react-appを実行してReactプロジェクトを作成します。

create-react-app 作成したいプロジェクト名

上記コマンド実行後、プロジェクトフォルダの中に以下のフォルダおよびファイルが作成されていたら作成完了です。

プロジェクト名
├── node_modules/
├── package.json
├── public/
├── README.md
├── src/
└── yarn.lock

起動

作成したプロジェクトフォルダに移動して、

cd プロジェクト名

下記コマンドで起動します。

npm install
↓
npm start

実行後下記画面が表示されれば問題なく起動できています。

SPAの作成

react-router-domのインストール

Reactで画面遷移させるため、react-router-domを使用します。
プロジェクト名のフォルダ直下で下記コマンドを実行してreact-router-domをインストールしてください。

npm install react-router-dom

package.jsonにreact-router-domのライブラリが追加されていたらインストール完了です。

サンプルコード

src/index.js
<BrowserRouter>でrouterの導入を行います。
react-router関連の処理はすべて<BrowserRouter>内で使用しなくてはいけないかつ、1プロジェクトにつき1つしか使用できないため、<BrowserRouter>は上位層で使用することになります。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

reportWebVitals();


src/App.js
<Route>にはルーティング先のURLとコンポーネントの切り替えを行います。
今回はroutes.jsにパスを記載して、routesからそれぞれの値を呼び出し、
<Switch>でURLが一致した時にコンポーネントを表示させます。

import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import routes from './routes';

const App = () => {
    return (
         <Switch>
             {routes.map((route, idx) => (
                <Route
                    path={route.path}
                    exact={route.exact}
                    component={route.component}
                    key={idx}
                />
             ))}
          </Switch>
    );
};

export default withRouter(App);


src/routes.js(新規で作成)

import One from './page/one';
import Two from './page/two';

const routes = [
    { path: '/', component: One, exact : true },
    { path: '/two', component: Two,},
  ];
  
  export default routes;


src/page/one.js(新規で作成)
画面遷移をするために<link>を使用しています。
やっていることはaタグと同じで、to属性でリンク先のURLを指定しています。

import React from 'react';
import { Link } from 'react-router-dom';
import Two from './two';

class One extends React.Component{
    render(){
        return (
            <div>
                test_one<br/>
                <Link to='/two'>twoへ</Link> 
            </div>
        )
    } 
}

export default One;


src/page/two.js(新規で作成)

import React from 'react';
import { Link } from 'react-router-dom';
import One from './one';

class Two extends React.Component{
    render(){
        return (
            <div>
                test_two<br/>
                <Link to='/'>oneへ</Link>
            </div>
        )
    }
}

export default Two;

実行

実行するとこんな感じで画面遷移することができます。

おわりに

今回はReactの触りについて学習を行ったので、環境構築から簡単な画面遷移のやり方について紹介させていただきました。
何かしら学習を行う際は大体環境構築あたりで躓いて投げ出すことが多いので、今回みたいにcreate-reeact-appを実行するだけで簡単に環境構築ができるのは大変助かりました。

参考資料

https://qiita.com/ShinKano/items/541050c36e08e78a5176
https://dezanari.com/react-react-router/

https://code-ship-blog.wemotion.co.jp/technology/react-js%E3%81%A7%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEreact-router%E3%81%AE%E7%B4%B9%E4%BB%8B/

◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.