Self order system(1) intro. to React

Posted byktke109 23 Comments on Self order system(1) intro. to React

1. Introduction

I try to develop self order system of Japanese Monjayaki shop.

2. Prerequities

OS: Windows10
UI framework: React 17(using create-react-app) and Material UI 4.11

3. Goal of this article

The goal is to create the followings.
(1) Navigation menu as toggle button
(2) Language menu which switch display language

4. Installing React and Material UI

(1) Install nodejs and npm using installer from [1]

(2) Install create-react-app and yarn globally. create-react-app is a toolchain for developing react app. yarn is a node.js package manager.

npm install -g create-react-app
npm install -g yarn

(3) Install react

create-react-app self-order
cd self-order
yarn add @material-ui/core
yarn add @material-ui/icons
yarn add @material-ui/lab

5. Code

Demo is available from the following link.
https://osmanthus.work/monja/

5.1 HTML(index.html)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>Monja Store</title>
    <style>
      main {
        display: flex;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

5.2 Code(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from '@material-ui/styles';

class App extends React.Component {
  constructor() {
    super();
    this.handleData = this.handleData.bind(this);
    this.state = {
      language: 'ja'
    };
  }
  
  handleData(data) {
    this.setState({
      language: data
    });
  }
  
  render() {
    return (
      <div>
        <main>
          <Head language_cd = {this.state.language} style={{width:10}}/>
          <LangButtons handlerFromParant={this.handleData}/> 
        </main>
        <div><NavButtons language_cd = {this.state.language} /></div>
      </div>
    );
  }
}

export function Head({language_cd}){
  let message;
  if(language_cd === 'ja'){
    message = 'もんじゃ焼き屋 セルフオーダー';
  }else{
    message = 'Monjayaki Store Self Order';
  }
  return <h1 style={{textAlign: 'center', width:1000, backgroundColor: '#99ccff'}}>{message}</h1>;
}


const theme = createMuiTheme({
  // Set up default theme with color palette, typography etc
  palette: {
    primary: {
      main: "#ff00ff"
    }
  }
});

theme.overrides.MuiToggleButton = {
  selected: {
    backgroundColor: 'rgba(255, 99, 71, 0.5) !important'
  }
};

export function NavButtons({language_cd}) {
  const [alignment, setAlignment] = React.useState('top');

  const handleAlignment = (event, newAlignment) => {
    if(newAlignment != null){
      setAlignment(newAlignment);
    }
  };

  const style = {color: "#000000", bordercolor: "#000000", margin: 5, width: 150};

  return (
    <ToggleButtonGroup
      value={alignment}
      exclusive
      onChange={handleAlignment}
      aria-label="text alignment"
    >
      <ToggleButton value = "top" style={style}>
      {language_cd === 'ja' ? 'トップ':'Top'}
      </ToggleButton>
      <ToggleButton value = "monjayaki" style={style}>
      {language_cd === 'ja' ? 'もんじゃ焼き':'Monjayaki'}  
      </ToggleButton>
      <ToggleButton value = "okonomiyaki" style={style}>
      {language_cd === 'ja' ? 'お好み焼き':'Okonomiyaki'}  
      </ToggleButton>
      <ToggleButton value = "single" style={style}>
      {language_cd === 'ja' ? '一品料理':'Single dish'}   
      </ToggleButton>
      <ToggleButton value = "dessert" style={style}>
      {language_cd === 'ja' ? 'デザート':'Dessert'}     
      </ToggleButton>
      <ToggleButton value = "history" style={style}>
      {language_cd === 'ja' ? '注文料理':'History'}   
      </ToggleButton>
      <ToggleButton value = "accounting" style={style}>
      {language_cd === 'ja' ? '会計':'Accounting'}    
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

class LangButtons extends React.Component {
  constructor() {
    super();
    this.state = {
      language: 'ja'
    };
  }
  
  switchLanguage(evt, language_cd) {
    evt.preventDefault();
    if(language_cd != null){
      this.props.handlerFromParant(language_cd);
      
      this.setState({
        language: language_cd
      });
    }
  }
  
  render(){
    const style = {color: "#000000", bordercolor: "#FF334C", margin: 5, width: 150};
    return (
      <ThemeProvider theme={theme}>
      <ToggleButtonGroup
        value = {this.state.language}
        exclusive
        onChange = {this.switchLanguage = this.switchLanguage.bind(this)}
        aria-label = "text alignment"
      >
        <ToggleButton value = "ja" style={style}>
          日本語
        </ToggleButton>
        <ToggleButton value = "en" style={style}>
          ENGLISH
        </ToggleButton>
      </ToggleButtonGroup>
      </ThemeProvider>
      )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

6. References

[1] Downloads node.js Latest LTS Version: 14.15.5 (includes npm 6.14.11)
https://nodejs.org/en/download/

[2] Create a New React App
https://reactjs.org/docs/create-a-new-react-app.html#creating-a-toolchain-from-scratch

[3] Create React App, Getting Started
https://create-react-app.dev/docs/getting-started/

Published by ktke109

I love open souce database management systems.

23 replies on “Self order system(1) intro. to React”

  13. Профессиональный сервисный центр по ремонту сотовых телефонов, смартфонов и мобильных устройств.
    Мы предлагаем: ремонт телефонов
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  14. Профессиональный сервисный центр по ремонту сотовых телефонов, смартфонов и мобильных устройств.
    Мы предлагаем: срочный ремонт телефонов рядом
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  15. Профессиональный сервисный центр по ремонту ноутбуков, макбуков и другой компьютерной техники.
    Мы предлагаем:срочный ремонт макбук
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  16. Профессиональный сервисный центр по ремонту квадрокоптеров и радиоуправляемых дронов.
    Мы предлагаем:профессиональный ремонт квадрокоптеров
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

Comments are closed.