[Front]Reactソース(6)-NavBarの実装

4512 ワード
programming react.js toy-pj テキストリンク
この投稿は、src/comonent/route/pathwayのNavBarのソースコメントであり、個人が行うtoyプロジェクトの一部です.

完全なソース

import React from 'react';

import AppBar from '@material-ui/core/AppBar';
import ToolBar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/core/Menu';


const NavBar=()=>{
	return(
		<div>
			<AppBar position="static">
				<ToolBar>
					<IconButton edge="start" color="inherit" aria-label="Menu">
						<MenuIcon/>
					</IconButton>
					<Typography variant="h6" style={style}>
						React User Application
					</Typography>
					<Button color="inherit">Login</Button>
				</ToolBar>
			</AppBar>
		</div>
	);
}

const style={
	flexGrow:1
}
export default NavBar;

roll


各ページ上部のナビゲーションバーロール

ソースビュー


このソースは、下の赤色領域を構成する部分である.

アプリケーションのため、ページの上部だけでなく、すべてのページの上部にも存在します.jsにあります.
関連部分は後で単独で議論します.
このナビゲーションバーは、クリックイベントに基づいてイベントを提供する場合がありますが、本プロジェクトの目的は基本的なCRUD機能であるため、ナビゲーションバーに追加機能を追加していないため、このセクションでは省略します.
Java static, this
クラウド関数