PROGRAMMING

Webサイトの作成【React.js】

今日からReact.jsでWebサイトを作っていこうと思います。

今回の内容:
・reactの開発環境
・Linkコンポーネント

以上について今回はやっていこうと思います。

今回の内容

開発環境の構築

Webサイトを作っていくのに、まずはReactの開発環境を構築していきます。

HomebrewNode.jsYarnをインストールします。

HomebrewNode.jsはすでにインストールしていますので 、バージョンだけ確認します。

$ brew -v
Homebrew 2.2.15
$node -v
v14.1.0
$ npm -v
6.14.4

Yarnはインストールしていなかったので、インストールします。

$ npm install -g yarn

$ yarn -v
1.22.4

最後にCreate React Appをインストールします。

$ yarn global add create-react-app

それでは、アプリを作っていきます。

アプリ名はなんでもいいので、react-websiteにします。

$ create-react-app react-website

アプリを作ったので、アプリの場所に移動しましょう。

$ cd react-website

無事にアプリが作られました。

いらないファイルは上記のように消しておきます。

そしてアプリケーションを起動します。

$ yarn start

以上のようになっていれば、開発環境の構築の完了です。

Linkコンポーネント

まずは最初にナビゲーションバーを設定しようと思います。

ナビゲーションバーのコンポーネントを作成して、以下のようにしました。

 // eslint-disable-next-line
import React,{useState} from 'react'
import {Link} from 'react-router-dom';
function Navbar() {
  const [click, setClick] = useState(false);

  const handleClick = () =>  setClick(!click);
  return (
    <>
    <nav className="navbar">
      <div className="navbar-container">
        <Link to="/" className="nabvar-logo">
          ISSEI <i className="fab fa-typo3" /> 
        </Link>
        <div className="menu-icon" onClick={handleClick}>
          <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
        </div>
      </div>
      </nav>
    </>
  );
}

export default Navbar

書き方はreact hooksというやつですね。

書き方については下記が参考になります。

const [click, setClick] = useState(false);

上では、clickという変数を定義して、初期値をfalseにしています。

clickを更新するにはsetClickを使います。setStateみたいな感じなんですかね。

 const handleClick = () =>  setClick(!click);

上記では、handleClickというメソッドを定義しています。

このメソッドを実行することで、clickの値が逆になるので、trueに変更されるようになります。

下記が上記のコードを起動したものです。

現在はエラーが出ずに出来ているのですが、リンクの部分でエラーが出てしまいました。

Error: Invariant failed: You should not use <Link> outside a <Router>

リンクがRouterの外にあるからいけないとのことです。

どのようにすればいいのかわからないので、検索してみたらありました。

//エラー
import React from 'react';
import Navbar from './components/Navbar';
import './App.css';

function App() {
  return (
    <>
    <Navbar />
    </>
  );
}

export default App;

この <Navbar />をルーターの中にないといけないとのことです。

下記のように変更したら無事にエラー分が消えました。

まずはreact-router-domをインストールします。

$ npm install react-router-dom
//正常
import React from 'react';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';

function App() {
  return (
    <>
    <Router>
    <Navbar />
      <Switch>
        <Route exact path="/" />
      </Switch>
      </Router>
    </>
  );
}

export default App;

これで無事にエラーが出ずにリンクとアイコンを表示させられました。

まとめ

ナビゲーションバーの部分から今後どうやって行けばいいのかわからないですね。

少しずつ調べながらやっていきたいと思います。

最後まで読んでいただき、ありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.