Rails에서는 Bootstrap을 사용하는 것이 쉽다고 생각하지만 익숙한 디자인으로 재미 없기 때문에 이번에는
사용자 등록 화면을 Material-ui의 디자인으로 해보고 싶습니다.

준비

・다음의 기사를 참고로 react-rails,material-ui의 인스톨을 실시해 주세요.
htps : // m / an x ​​/ ms / 6039f9 ~ cf2bd835194d (기존 Rails 앱에 React를 도입하는 방법)
htps : // 이 m / an x ​​/ ms / 8bf9855 a 2118 96d 5c (react-rails에서 Material-ui)
· 사용자 등록 기능을 구현하십시오.

구현

먼저 SignUp 구성 요소를 만듭니다.

$rails g react:component SignUp 

그런 다음 로그인 화면의 view 파일에 다음을 추가하고 SignUp 구성 요소를 호출합니다.

/app/views/users/new.html.slim

= react_component("SignUp", {csrf_params: request_forgery_protection_token, csrf_token: form_authenticity_token }) 

Rails의 폼 헬퍼는, CSRF(Cross-Site Request Forgeries의 약자로, 유저의 의도하지 않은 동작을 시키는 공격) 대책을 마음대로 실시해 줍니다. 그러나, 이번과 같이, 프런트 부분을 Rails로부터 분리하고 있는 경우, CSRF 대책을 스스로 실시하지 않으면 안됩니다. 따라서 {csrf_params: request_forgery_protection_token, csrf_token: form_authenticity_token}에서 CSRF 토큰을 React 구성 요소에 전달해야 합니다.

그런 다음 SignUp 구성 요소를 다음과 같이 합니다. 양식 내부는 자신의 양식에 따라 변경하십시오.
*주의(Qiita의 신택스 하이라이트가 React에 대응하고 있지 않다고 하기 때문에, 코드의 신택스가 잘 하고 있지 않습니다만, 정상적으로 동작할 것입니다.)
　

qiita.rb

import React from "react"
import PropTypes from "prop-types"
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Box from '@material-ui/core/Box';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const theme = createMuiTheme({
  palette: {
    primary: { main: '#00838f' }, // cyan系
    secondary: { main: '#e0f7fa' }, // cyan系
  },
});


class SignUp extends React.Component {
  render () {
    return (

      <div>
        <ThemeProvider theme={theme}>
          <Box p={2} bgcolor="primary.main" color="primary.contrastText">
　　　　　　  新規登録
        　</Box>

          <Box p={2} bgcolor="secondary.main" color="primary.main">
            <form action="/users" acceptCharset="UTF-8" method="post">
              <input type="hidden" name={this.props.csrf_params} value={this.props.csrf_token} />
              <div><TextField id="user_name" type="text" name="user[name]" label="Name" style={{ width: 500 }}/></div>
              <div><TextField id="user_email" type="email" name="user[email]" label="Email" style={{ width: 500 }}/></div>
              <div><TextField id="user_password" type="password" name="user[password]" label="Password" style={{ width: 500 }}/></div>
              <div><TextField id="user_password_confirmation" type="password" name="user[password_confirmation]" label="password_confirmation" style={{ width: 500 }}/></div>
              <Button color="primary" type="submit" name="commit">登録する</Button>
            </form>
          </Box>
        </ThemeProvider>
      </div>
    );
  }
}

export default SignUp

이하의 부분에서, 방금전의 CSRF 대책을 하고 있습니다.

<input type="hidden" name={this.props.csrf_params} value={this.props.csrf_token} />

색상 변경은 다음 부분을 h tps : // 마테리아 음. 코 m / 쿠 s와 미자치 온 / 코 r /
를 참고로 적절히 변경해 주십시오.

const theme = createMuiTheme({
  palette: {
    primary: { main: '#00838f' }, // cyan系
    secondary: { main: '#e0f7fa' }, // cyan系
  },
});

이상으로 종료입니다. 결과는 다음과 같습니다. 이미지와 같이 입력 위치에 커서를 맞추면 테두리와 라벨이 애니메이션을줍니다.