ReactHooks[SNS]

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

エンドポイント

APIにアクセスするためのURI

Reactのインポート

npx create-react-app  sns-react

作成したsns-reactフォルダに移動します。

Material UI

npm install @material-ui/core
npm install @material-ui/icons
npm install react-cookie
npm install react-icons
npm install axios
npm install --save react-router-dom

src<components

src<context

App.js

React Material-UIではThemeProviderにテーマオブジェクトを渡すことでフォントやテーマの色を変更することが出来ます。テーマオブジェクトはcreateMuiThemeで作成します。

色とフォントを変更

const theme = createMuiTheme({
  palette: {
    primary: indigo,
    secondary: {
      main: "#f44336",
    },
  },
  typography: {
    fontFamily: "Comic Neue",
  },
});

import React from "react";
import "./App.css";

import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider as MuiThemeProvider } from "@material-ui/core/styles";
import indigo from "@material-ui/core/colors/indigo";
import Navbar from "./components/Navbar";
import ApiContextProvider from "./context/ApiContext.js";
import Main from "./components/Main";

const theme = createMuiTheme({
  palette: {
    primary: indigo,
    secondary: {
      main: "#f44336",
    },
  },
  typography: {
    fontFamily: "Comic Neue",
  },
});

function App() {
  return (
    <ApiContextProvider>
      <MuiThemeProvider theme={theme}>
        <Navbar />
        <div className="container">
          <Main />
        </div>
      </MuiThemeProvider>
    </ApiContextProvider>
  );
}

export default App;

Login.js

入力フォーム

Login

 <TextField
              variant="outlined"
              margin="normal"
              fullWidth
              label="Email"
              name="username"
              value={state.credentialsLog.username}
              onChange={inputChangedLog()}
              autoFocus
            />
          )

register

(
            <TextField
              variant="outlined"
              margin="normal"
              fullWidth
              label="Email"
              name="email"
              value={state.credentialsReg.email}
              onChange={inputChangedReg()}
              autoFocus
            />
          )