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習得しよう〜