94日目：React componentsの作成スタート＆React Routerの設定

2019年06月17日 2019年06月17日

キョウコ

React Appの準備ができた後は必要ないファイルを削除して、最初に必要なReact Componentsを作成していきます。またReact Routerの設定も行いました。

↑現在制作中のReact App "devconnector"のトップ画面です。

フロントエンドとバックエンドを同時起動させて作業スタート

npm run dev

でフロントエンドとバックエンドを同時起動させます。（学習期間が2日あいたので、このことを思い出すのに数分を要する）

後は、React Componentsとなるファイルをコピペを使いながら次々と作成していきました。

VScodeのショートカット活用で、React Componentsとなるファイルをどんどん作成

VScodeで

racf

と書いてエンターキーを押せば、基本のfunctional componentsがパッと出てくるのでとても便利でした。例えば、Landing.jsというファイル内で racf と書いた後にエンターキーを押せば、このようなコードが自動で出てきます。

import React from 'react'

const Landing = () => {
    return (
) } export default Landing

React componentsのファイルのコードを書き次第、App.jsに追加していきました。

import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Landing from "./components/layout/Landing";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import "./App.css";

ここからはコードが上手くブログ記事に反映されなかったので省きますが、FragmentやRoute exact pathを使ってrouteを通していきました。

最後は、お決まりの