React・Gulp・SCSS・Routerを使ってみた

React・Gulp・Sass・Routerを使ってみたので備忘録メモを書いておきます。

こんな時に使えます

  • Reactで開発する時にgulp・scssを使いたい
  • 異なるurlで違うコンポーネントをレンダーしたい

下準備

reactをグローバル環境にインストールし、create-react-app プロジェクト名で開発環境を作る。
npm install gulpでgulpをインストール済み
*Reactの準備は割愛します。公式ページを参照ください


gulpfile.js

create-react-appで作成されたフォルダの中にgulpfile.jsを作成
中身は以下

'use strict';

// dependenciesを宣言
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');


// scss/cssの場所の指定
// Assetsフォルダを作り、その中にscssフォルダとcssフォルダを作っておく

var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';


//compile scss
// scssをminify(圧縮)・リネーム・コンパイルして指定した場所に保存。
gulp.task('compile_scss', function(){

    gulp.src(SCSS_SRC)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(changed(SCSS_DEST))
    .pipe(gulp.dest(SCSS_DEST));

});


// detect changes in SCSS
// scssを編集・保存したら勝手にコンパイルしてくれる
gulp.task('watch_scss', function(){
    gulp.watch(SCSS_SRC, ['compile_scss']);
});


// run tasks
// ターミナルでgulpをrunするとwatchしてくれます。
gulp.task('default', ['watch_scss']);

必要に応じて編集してください。

package.jsonにdependencyに以下を追加

gulp-sass
gulp-clean-css
gulp-uglify
gulp-rename
gulp-changed

追加方法

プロジェクトのディレクトリにいることを確認してターミナル:command+tで新しいタブを開く

npm install —save-dev gulp-sass
npm install —save-dev gulp-clean-css
npm install —save-dev gulp-uglify
npm install —save-dev gulp-rename
npm install —save-dev gulp-changed

追加していないとエラーが出る

package.jsonのdependencyはこんな感じで上記のものが追加されているかと思います。

componentsフォルダを作成

この中にheader.jsやfooter.js、content.jsなどを必要に応じて入れていく

例:header.js

import React, { Component } from 'react';

export class Header extends Component {
    render() {
        return (
            <header>
                <div className="logo">
                    LOGO
                </div>

                <nav>
                    <ul>
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Works</a>
                        </li>
                    </ul>
                </nav>
            </header>
        );
    }
}

export default Header;

これは後でイジるナビゲーションメニューです。

App.jsにHeaderをimportするのを忘れない(他のコンポーネントを作った時も同じ)

App.js

import React, { Component } from 'react';
import Header from './components/header/header';


class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
      </div>
    );
  }
}

export default App;

scssフォルダに〇〇.scssファイルを作る

プロジェクトのディレクトリにいることを確認してターミナルでgulpをrun

これでscssファイルを編集して保存すると、scssをコンパイルしてgulpfile.jsで指定した場所に〇〇.min.cssを作ってくれる。

こんな感じ
default.scssを作ってちょっと編集

すると、default.scssがコンパイルされてdefault.min.cssが作られる。

ターミナルでも変更・コンパイルされたことを確認できます

App.jsでmin.cssを読み込む

import ‘./Assets/css/default.min.css’;

*エラーが出る場合【対処法】

control+cで一旦テストサーバーを停止して、npm startし直します
すると、エラーが出てnpm startできないことがあります。
エラー:sh: react-scripts: command not found

その時は、
node_modulesディレクトリがあるか確認。
あったらrm -rf node_modulesで削除して、npm installします。
するとまた、node_modulesディレクトリができ、npm startができるようになるかと思います。

これでダメな時は、Reactのバージョンを確認したり、エラー内容をググってください

*この時gulpもcontrol+cで停止しておきましょう
エラーが解決したら、gulpを再びrunしてscssを保存するたびにcssにコンパイルしてくれるようにしましょう。

scssのtip

scssフォルダ内に_config.scssを作成
色やフォントサイズなどをあらかじめ定義しておく
例:

$black: #010000;
$white: #fff;
$lightgrey: #e6e6e6;
$darkgrey: #333;
$red: #ff1755;

body {
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic',sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: $black;
    font-style: normal;
}

default.scssで
@import “_config.scss”;
と記述して_config.scss内ので定義したものを使えるようにする。
すると後から色の変更とかは定義を変更するとその定義が使われているところ全部変わる

こんな感じでスタイリングをしていく

Routerの設定

ページを推移させるにはRouterが必要になってきます。

npm i —dev—save react-router-dom

でRouterをインストールしてApp.jsにimportします

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom’;

そして以下のようにRouterで全体を囲み、Routeでページのurlを設定します。*App.jsです

<Router>
        <div className="App">
         <Header />

          <Route exact path='/' component={Homepage} />
          <Route exact path='/About' component={About} />

         <Footer />
        </div>
</Router>

すると、urlがlocal:XXXX/の時はHomepageが表示され
local:XXXX/Aboutの時はAboutが表示されます。

*もちろんHomepageコンポーネントとAboutコンポーネントを作っていないと、「レンダーするものがないよぉぉぉぉぉ、お母さーーーーん!!」っとエラーが出ます。

使い方の例:header.jsを編集

今はこんな感じ

import React, { Component } from 'react’;

export class Header extends Component {
    render() {
        return (
            <header>
                <div className="logo">
                    LOGO
                </div>

                <nav>
                    <ul>
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Works</a>
                        </li>
                    </ul>
                </nav>
            </header>
        );
    }
}

export default Header;

ここに先ほどインストールしたreact-router-domからLinkをimportします
import { Link } from 'react-router-dom’;
Reactではアンカーリンクは使わないので、Linkというカスタムエレメントを使います。
こんな感じ
<Link to="/About">About</Link>
でもコンパイルした時に<a href="/About">になります。
結局アンカーリンクになっとるやん!というツッコミは無しでww

編集後はこんな感じ

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export class Header extends Component {
	render() {
		return (
			<header>
				<div className="logo">
					LOGO
				</div>

				<nav>
					<ul>
						<li>
							<Link to="/">Home</Link>
						</li>
						<li>
							<Link to="/About">About</Link>
						</li>
						<li>
							<a href="#">Works</a>
						</li>
					</ul>
				</nav>
			</header>
		);
	}
}

export default Header;

Worksのコンポーネントはまだ作っていなかったので無視してください。

これで違うurlにいくとそのルートのコンポーネントがレンダーされるようになります。

以上React・Gulp・SCSS・Routerを使ってみた備忘録でした〜

どんどん練習してReact習得しよう〜



Posted

in