{"id":1624,"date":"2021-08-08T12:51:46","date_gmt":"2021-08-08T03:51:46","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1624"},"modified":"2021-09-05T15:49:20","modified_gmt":"2021-09-05T06:49:20","slug":"reacthookssns","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1624","title":{"rendered":"ReactHooks[SNS]"},"content":{"rendered":"\n
\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8<\/div>\n

API\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306eURI<\/p>\n<\/div>\n\n\n\n

React\u306e\u30a4\u30f3\u30dd\u30fc\u30c8<\/h2>\n\n\n\n
npx create-react-app  sns-react<\/code><\/pre><\/div>\n\n\n\n
\u4f5c\u6210\u3057\u305fsns-react\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
Material UI<\/h2>\n\n\n\n
npm install @material-ui\/core\nnpm install @material-ui\/icons\nnpm install react-cookie\nnpm install react-icons\nnpm install axios\nnpm install --save react-router-dom<\/code><\/pre><\/div>\n\n\n\n
src<components<\/h2>\n\n\n\n
src<context<\/h2>\n\n\n\n
App.js<\/h2>\n\n\n\n
React Material-UI\u3067\u306fThemeProvider<\/code>\u306b\u30c6\u30fc\u30de\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3059\u3053\u3068\u3067\u30d5\u30a9\u30f3\u30c8\u3084\u30c6\u30fc\u30de\u306e\u8272\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002\u30c6\u30fc\u30de\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306fcreateMuiTheme<\/code>\u3067\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u8272\u3068\u30d5\u30a9\u30f3\u30c8\u3092\u5909\u66f4<\/h3>\n\n\n\n
const theme = createMuiTheme({\n  palette: {\n    primary: indigo,\n    secondary: {\n      main: "#f44336",\n    },\n  },\n  typography: {\n    fontFamily: "Comic Neue",\n  },\n});<\/code><\/pre><\/div>\n\n\n\n
import React from "react";\nimport ".\/App.css";\n\nimport { createMuiTheme } from "@material-ui\/core\/styles";\nimport { ThemeProvider as MuiThemeProvider } from "@material-ui\/core\/styles";\nimport indigo from "@material-ui\/core\/colors\/indigo";\nimport Navbar from ".\/components\/Navbar";\nimport ApiContextProvider from ".\/context\/ApiContext.js";\nimport Main from ".\/components\/Main";\n\nconst theme = createMuiTheme({\n  palette: {\n    primary: indigo,\n    secondary: {\n      main: "#f44336",\n    },\n  },\n  typography: {\n    fontFamily: "Comic Neue",\n  },\n});\n\nfunction App() {\n  return (\n    <ApiContextProvider>\n      <MuiThemeProvider theme={theme}>\n        <Navbar \/>\n        <div className="container">\n          <Main \/>\n        <\/div>\n      <\/MuiThemeProvider>\n    <\/ApiContextProvider>\n  );\n}\n\nexport default App;<\/code><\/pre><\/div>\n\n\n\n
Login.js<\/h2>\n\n\n\n
\u5165\u529b\u30d5\u30a9\u30fc\u30e0<\/h3>\n\n\n\n
Login<\/h4>\n\n\n\n
 <TextField\n              variant="outlined"\n              margin="normal"\n              fullWidth\n              label="Email"\n              name="username"\n              value={state.credentialsLog.username}\n              onChange={inputChangedLog()}\n              autoFocus\n            \/>\n          ) <\/code><\/pre><\/div>\n\n\n\n
register<\/h4>\n\n\n\n
(\n            <TextField\n              variant="outlined"\n              margin="normal"\n              fullWidth\n              label="Email"\n              name="email"\n              value={state.credentialsReg.email}\n              onChange={inputChangedReg()}\n              autoFocus\n            \/>\n          )<\/code><\/pre><\/div>\n\n\n\n
button<\/h4>\n\n\n\n
context<ApiContext.js<\/h2>\n","protected":false},"excerpt":{"rendered":"
React\u306e\u30a4\u30f3\u30dd\u30fc\u30c8 \u4f5c\u6210\u3057\u305fsns-react\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002 Material UI srclt;components srclt;context App.js React Material-UI\u3067\u306fTh<\/p>\n","protected":false},"author":1,"featured_media":1736,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jin_ogp_image_url":"","_jin_last_featured_id":0,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-1624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1624"}],"version-history":[{"count":2,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1624\/revisions"}],"predecessor-version":[{"id":1735,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/posts\/1624\/revisions\/1735"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=\/wp\/v2\/media\/1736"}],"wp:attachment":[{"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agile-software.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}