React オススメな開発ツールやモジュールまとめ

Reactで開発していくにあたって次も是非、活用したいと思ったオススメのツールやモジュールなどをまとめたのを紹介します！。
React初心者で何を使って実装していけば良いのか悩みますよね！もちろん、普段から慣れてる方は
この記事で使ってみて下さい！。

React-Tabs

Reactコミュニティで開発されているモジュールで
ものすごく簡単にタブを実装できます！。
個人的にはかなりオススメ
ナビゲーションメニューとして是非使ってみて

コマンドインストール

npm install --save react-tabs

yarn add react-tabs

React Particles-js

JSのライブラリで、Reactで背景をアニメーションにしたい時はこれですぐに実装できちゃいます

公式DEMO
particles.js - A lightweight JavaScript library for creating particles

公式デモサイトで独自にアニメーション設定をいじりながら
JSONファイルとしてexportして使います。

コマンドインストール

npm install react-particles-js

yarn add react-particles-js

3d-react-carousal

React.jsのライブラリで複数の写真画像をスワイプでカルーセルとして切り替えて表示ができます。
実装が楽です！。
似たものだと、JQueryで使われてたSlickの
React-Slickとかもあります。

コマンドインストール

npm install 3d-react-carousal

yarn add 3d-react-carousal

react-responsiv

npmのパッケージでメディアクエリをReactに導入することができます。

こんな感じで分けます。

import MediaQuery from "react-responsive";

<MediaQuery query="(max-width: 767px)">
    <MobileSample  />
</MediaQuery>

<MediaQuery query="(min-width: 767px)">
    <PCSample />
</MediaQuery>

React-Router

React経験者なら一度は使った事があるであろうSPAとしてスムーズにページ移動ができるライブラリ

DOMを書き換えて複数ページがあるのに
URL が変わらないため、ブラウザからは1つのページとしてしか認識されません。
私もよく活用します。

コマンドインストール

npm install react-router-dom

yarn add react-router-dom

簡単な実装

import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from 'react-router-dom';

import { Sample } from 'react';

const Home: Sample = () => {
  return <h2>Home</h2>;
}

const About: Sample = () => {
  return <h2>About</h2>;
}

const Users: Sample = () => {
  return <h2>Users</h2>;
}

const App: Sample = () => {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to='/'>Home</Link>
            </li>
            <li>
              <Link to='/about'>About</Link>
            </li>
            <li>
              <Link to='/users'>Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path='/about'>
            <About />
          </Route>
          <Route path='/users'>
            <Users />
          </Route>
          <Route path='/'>
            <Home />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

material-ui

Reactで簡単にマテリアルデザインを実現できるライブラリです
ReactではBootstrapの代わりがmaterial-uiと思って頂ければ分かりやすいかと思います。

コマンドインストール

npm install  @material-ui/core 

以下略@material-ui/icons 

以下略@material-ui/system

yarn add @material-ui/core

以下略@material-ui/icons

以下略@material-ui/system

create-react-app

React開発で便利なツールで、１つのコマンドを叩くだけでReactで必要な環境構築が整いアプリケーションのテンプレートを作成してくれます。
誰でも気軽に始められるのが強みですね。

コマンドインストール

npx create-react-app 任意のプロジェクト名

cd プロジェクト名

npm start

or

yarn start

TypeScriptで開発の場合
npx create-react-app プロジェクト名 --templete typescript

他にもまだまだ沢山ありますが、とりあえずはすぐ使えて次も使ってみたいとなるようなのを紹介致しました！。