{"id":1529,"date":"2021-07-31T12:43:01","date_gmt":"2021-07-31T03:43:01","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1529"},"modified":"2022-11-27T04:37:38","modified_gmt":"2022-11-26T19:37:38","slug":"youtubereact-hooks","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1529","title":{"rendered":"Youtube[React Hooks]"},"content":{"rendered":"\n

components<\/h2>\n\n\n\n

components >NavBar.js<\/h3>\n\n\n\n

components \u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3001\u305d\u306e\u76f4\u4e0b\u306b NavBar.js \u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
React\u306eicon\u3092\u4f7f\u7528\u3059\u308b<\/p>\n\n\n\n

import React from 'react'\nimport { withCookies } from 'react-cookie';\nimport { makeStyles } from '@material-ui\/core\/styles';\nimport AppBar from '@material-ui\/core\/AppBar'\nimport Toolbar from '@material-ui\/core\/Toolbar'\nimport Typography from '@material-ui\/core\/Typography';\n\nimport { FiLogOut } from 'react-icons\/fi';\nimport { FaYoutube } from 'react-icons\/fa';<\/code><\/pre><\/div>\n\n\n\n
\u9069\u7528\u3057\u305f\u3044CSS\u3092\u8a18\u8ff0\u3001useStyles\u306b\u683c\u7d0d<\/p>\n\n\n\n
const useStyles = makeStyles((theme) => ({\n    title: {\n      flexGrow: 1,\n    },\n}));<\/code><\/pre><\/div>\n\n\n\n
AppBar\u3068Toolbar\u3067\u56f2\u3080
classes.title\u3068\u3059\u308b\u3053\u3068\u3067useStyles\u306etitle\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
const NavBar = (props) => {\n    const classes = useStyles();\n\n    const Logout = () =>  {\n      props.cookies.remove('jwt-token');\n      window.location.href = '\/';\n    }\n\n    return (\n        <AppBar position="static">\n        <Toolbar>\n        <button className="logo">\n          <FaYoutube\/>\n        <\/button>\n        <Typography variant="h5" className={classes.title}>Youtube App<\/Typography>\n\n        <button className="logout" onClick={()=>Logout()}>\n          <FiLogOut\/>\n        <\/button>\n\n        <\/Toolbar>\n        <\/AppBar>\n    )\n}<\/code><\/pre><\/div>\n\n\n\n
App.js<\/h3>\n\n\n\n
\u30a2\u30a4\u30b3\u30f3\u306b<\/p>\n\n\n\n
.logo {\n  background-color: transparent;\n  color: lightgray;\n  margin-top: 7px;\n  font-size: 25px;\n  border: none;\n  outline: none;\n}\n\n.logout {\n  background-color: transparent;\n  color: lightgray;\n  margin-top: 7px;\n  font-size: 25px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n}<\/code><\/pre><\/div>\n\n\n\n
Router<\/h2>\n\n\n\n
npm install react-router-dom<\/code><\/pre><\/div>\n\n\n\n
 components > Logins.js\u306e\u4f5c\u6210<\/h3>\n\n\n\n
BrowserRouter\u3067\u56f2\u3080\u3053\u3068\u3067router\u3092<CookiesProvider> \u3067\u56f2\u3080\u3053\u3068\u3067Cookies\u3092\u4f7f\u7528\u3059\u308b <\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport App from '.\/App';\nimport * as serviceWorker from '.\/serviceWorker';\n\nimport { Route, BrowserRouter } from 'react-router-dom';\nimport Login from '.\/components\/Login';\nimport { CookiesProvider } from 'react-cookie';\n\nReactDOM.render(\n  <React.StrictMode>\n  <BrowserRouter>\n  <CookiesProvider>\n  \n  <Route exact path="\/" component={Login} \/>\n  <Route exact path="\/youtube" component={App} \/>\n\n  <\/CookiesProvider>\n  <\/BrowserRouter>\n  <\/React.StrictMode>,\n  document.getElementById('root')\n\nserviceWorker.unregister();<\/code><\/pre><\/div>\n\n\n\n
Login<\/h2>\n\n\n\n
material-ui<\/p>\n\n\n\n