掲示板アプリの作成-２(ローカル一覧表示)

2020年6月21日2021年1月24日

前回で前準備をしました。

まずはローカルで動くよう作っていきたいと思います。
※classNameはMaterializedを使用するための名前です。

編集ファイル名

src/components/layout/Navbar.js

共通のレイアウトのナビゲーションバーを作成します。

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

const Navbar = () => {
	return (
		<nav className="nav-wrapper black">
			<div className="container">
				<Link to="/">掲示板アプリ</Link>
			</div>
		</nav>
	);
}

export default Navbar;

src/App.js

こちらをsrc/App.jsから呼び出してあげます。

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Navbar from './components/layout/Navbar';

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

export default App;

yarn startのコマンドで動いているかを確認しましょう。

無事動けば画面が表示されるはずです。
※control+Cで実行(yarn start)は止められます

これから一覧表示をするための
コードを書いていきたいと思います。

流れとしては、
Dashboard.jsがProjectList.jsを呼び出し、
ProjectList.jsがProjectSummary.jsを呼び出す形になります。

1：ProjectSummary.js
2：ProjectList.js
3：Dashboard.js
の順で作っていきます。

src/components/projects/ProjectSummary.js

import React from 'react';

const ProjectSummary = () => {
	return (
		<div className="card">
			<div className="card-content">
				<span className="card-title">タイトル1</span>
				<p>内容　：内容1</p>
				<p>投稿者：名前1</p>
				<p>日付　：6/18</p>
			</div>
		</div>
	);
}

export default ProjectSummary;

src/components/projects/ProjectList.js

import React from 'react';
import ProjectSummary from './ProjectSummary';

const ProjectList = () => {
	return (
		<div className="section">
			<ProjectSummary />
			<ProjectSummary />
			<ProjectSummary />
		</div>
	);
}

export default ProjectList;

src/components/projects/ProjectList.js

import React, { Component } from 'react';
import ProjectList from '../projects/ProjectList';

class Dashboard extends Component {
	render() {
		return (
			<div className="container">
				<div className="row">
					<div className="col s12 m8">
						<ProjectList />
					</div>
				</div>
			</div>
		);
	};
}

export default Dashboard;

Dashboard.jsを呼び出すためsrc/App.jsを編集します。

src/App.js

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Dashboard from './components/dashboard/Dashboard';

class App extends Component {
	render() {
		return (
			<BrowserRouter>
				<div>
					<Navbar/>
					<Switch>
						<Route exact path="/" component={Dashboard} />
					</Switch>
				</div>
			</BrowserRouter>
		);
	};
}

export default App;

これで一覧表示を呼び出してくれるはずです。
yarn start で実行して、画面を確認してみましょう。