ReactとTypeScriptを使用して顧客リスト管理アプリを構築する方法

npm install -g typescript

tsc -v

OutputVersion 3.4.5

npx create-react-app typescript-react-app --typescript

cd typescript-react-app
yarn add react-router-dom

yarn add @types/react-router-dom

yarn add axios

yarn start

yarn global add json-server

mkdir server
cd server

nano db.json

{
    "customers": [
        {
            "id": 1,
            "first_name": "Customer_1",
            "last_name": "Customer_11",
            "email": "[email protected]",
            "phone": "00000000000",
            "address": "Customer_1 Address",
            "description": "Customer_1 description"
        },
        {
            "id": 2,
            "first_name": "Customer_2",
            "last_name": "Customer_2",
            "email": "[email protected]",
            "phone": "00000000000",
            "address": "Customer_2 Adress",
            "description": "Customer_2 Description"
        }
    ]
}

cd ~/typescript-react-app

nano json-server.json

{
    "port": 5000
}

json-server --watch server/db.json

{
...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server --watch server/db.json"
  },
...
}

cd ./src/

mkdir components
cd components

mkdir customer
cd customer

touch Create.tsx Edit.tsx

import * as React from 'react';
import axios from 'axios';
import { RouteComponentProps, withRouter } from 'react-router-dom';

export interface IValues {
    first_name: string,
    last_name: string,
    email: string,
    phone: string,
    address: string,
    description: string,
}
export interface IFormState {
    [key: string]: any;
    values: IValues[];
    submitSuccess: boolean;
    loading: boolean;
}

...
class Create extends React.Component {
    constructor(props: RouteComponentProps) {
        super(props);
        this.state = {
            first_name: '',
            last_name: '',
            email: '',
            phone: '',
            address: '',
            description: '',
            values: [],
            loading: false,
            submitSuccess: false,
        }
    }
}
export default withRouter(Create)

...
          values: [],
          loading: false,
          submitSuccess: false,
      }
  }

  private processFormSubmission = (e: React.FormEvent): void => {
          e.preventDefault();
          this.setState({ loading: true });
          const formData = {
              first_name: this.state.first_name,
              last_name: this.state.last_name,
              email: this.state.email,
              phone: this.state.phone,
              address: this.state.address,
              description: this.state.description,
          }
          this.setState({ submitSuccess: true, values: [...this.state.values, formData], loading: false });
          axios.post(`http://localhost:5000/customers`, formData).then(data => [
              setTimeout(() => {
                  this.props.history.push('/');
              }, 1500)
          ]);
      }

      private handleInputChanges = (e: React.FormEvent) => {
          e.preventDefault();
          this.setState({
              [e.currentTarget.name]: e.currentTarget.value,
      })
  }

...
export default withRouter(Create)
...

...
  public render() {
      const { submitSuccess, loading } = this.state;
      return (
          

              

                  
 Create Post 
                  {!submitSuccess && (
                      

                          Fill the form below to create a new post
                  
                  )}
                  {submitSuccess && (
                      

                          The form was successfully submitted!
                          
                  )}
                  

                      

                           First Name 
                           this.handleInputChanges(e)} name="first_name" className="form-control" placeholder="Enter customer's first name" />
                      
                      

                           Last Name 
                           this.handleInputChanges(e)} name="last_name" className="form-control" placeholder="Enter customer's last name" />
                      
                      

                           Email 
                           this.handleInputChanges(e)} name="email" className="form-control" placeholder="Enter customer's email address" />
                      
                      

                           Phone 
                           this.handleInputChanges(e)} name="phone" className="form-control" placeholder="Enter customer's phone number" />
                      
                      

                           Address 
                           this.handleInputChanges(e)} name="address" className="form-control" placeholder="Enter customer's address" />
                      
                      

                           Description 
                           this.handleInputChanges(e)} name="description" className="form-control" placeholder="Enter Description" />
                      
                      

                          
                              Create Customer
                          
                          {loading &&
                              
                          }
                      
                  
              
          
      )
  }
...

import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import axios from 'axios';

export interface IValues {
    [key: string]: any;
}
export interface IFormState {
    id: number,
    customer: any;
    values: IValues[];
    submitSuccess: boolean;
    loading: boolean;
}

...
class EditCustomer extends React.Component, IFormState> {
    constructor(props: RouteComponentProps) {
        super(props);
        this.state = {
            id: this.props.match.params.id,
            customer: {},
            values: [],
            loading: false,
            submitSuccess: false,
        }
    }
}
export default withRouter(EditCustomer)

...
    public componentDidMount(): void {
        axios.get(`http://localhost:5000/customers/${this.state.id}`).then(data => {
            this.setState({ customer: data.data });
        })
    }

    private processFormSubmission = async (e: React.FormEvent): Promise => {
        e.preventDefault();
        this.setState({ loading: true });
        axios.patch(`http://localhost:5000/customers/${this.state.id}`, this.state.values).then(data => {
            this.setState({ submitSuccess: true, loading: false })
            setTimeout(() => {
                this.props.history.push('/');
            }, 1500)
        })
    }

    private setValues = (values: IValues) => {
        this.setState({ values: { ...this.state.values, ...values } });
    }
    private handleInputChanges = (e: React.FormEvent) => {
        e.preventDefault();
        this.setValues({ [e.currentTarget.id]: e.currentTarget.value })
    }
...
}

export default withRouter(EditCustomer)

...
    public render() {
        const { submitSuccess, loading } = this.state;
        return (
            

                {this.state.customer &&
                    

                        < h1 > Customer List Management App
                        
 Built with React.js and TypeScript 

                        

                            

                                
 Edit Customer 
                                {submitSuccess && (
                                    

                                        Customer's details has been edited successfully 
                                )}
                                

                                    

                                         First Name 
                                         this.handleInputChanges(e)} name="first_name" className="form-control" placeholder="Enter customer's first name" />
                                    
                                    

                                         Last Name 
                                         this.handleInputChanges(e)} name="last_name" className="form-control" placeholder="Enter customer's last name" />
                                    
                                    

                                         Email 
                                         this.handleInputChanges(e)} name="email" className="form-control" placeholder="Enter customer's email address" />
                                    
                                    

                                         Phone 
                                         this.handleInputChanges(e)} name="phone" className="form-control" placeholder="Enter customer's phone number" />
                                    
                                    

                                         Address 
                                         this.handleInputChanges(e)} name="address" className="form-control" placeholder="Enter customer's address" />
                                    
                                    

                                         Description 
                                         this.handleInputChanges(e)} name="description" className="form-control" placeholder="Enter Description" />
                                    
                                    

                                        
                                            Edit Customer 
                                        {loading &&
                                            
                                        }
                                    
                                
                            
                        
                    
                }
            
        )
    }
...

cd ./src/components
nano Home.tsx

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import axios from 'axios';

interface IState {
    customers: any[];
}

export default class Home extends React.Component {
    constructor(props: RouteComponentProps) {
        super(props);
        this.state = { customers: [] }
    }
    public componentDidMount(): void {
        axios.get(`http://localhost:5000/customers`).then(data => {
            this.setState({ customers: data.data })
        })
    }
    public deleteCustomer(id: number) {
        axios.delete(`http://localhost:5000/customers/${id}`).then(data => {
            const index = this.state.customers.findIndex(customer => customer.id === id);
            this.state.customers.splice(index, 1);
            this.props.history.push('/');
        })
    }
}

...
public render() {
        const customers = this.state.customers;
        return (
            

                {customers.length === 0 && (
                    

                        
No customer found at the moment
                    
                )}
                

                    

                        
                                {customers && customers.map(customer =>
                                    
                                )}
                            

                            

                                

                                    
Firstname
                                    
Lastname
                                    
Email
                                    
Phone
                                    
Address
                                    
Description
                                    
Actions
                                
                            
                            

                                        
{customer.first_name}
                                        
{customer.last_name}
                                        
{customer.email}
                                        
{customer.phone}
                                        
{customer.address}
                                        
{customer.description}
                                        

                                            

                                                

                                                    Edit Customer 
                                                     this.deleteCustomer(customer.id)}>Delete Customer
                                                
                                            
                                        
                                    
                        
                    
                
            
        )
    }
...

nano App.tsx

import * as React from 'react';
import './App.css';
import { Switch, Route, withRouter, RouteComponentProps, Link } from 'react-router-dom';
import Home from './components/Home';
import Create from './components/customer/Create';
import EditCustomer from './components/customer/Edit';

class App extends React.Component> {
  public render() {
    return (
      

        
        
          
          
          
        
      
    );
  }
}
export default withRouter(App);

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
    
        
    
    , document.getElementById('root')
);
serviceWorker.unregister();

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

.form-wrapper {
  width: 500px;
  margin: 0 auto;
}
.App {
  text-align: center;
  margin-top: 30px;
}
nav {
  width: 300px;
  margin: 0 auto;
  background: #282c34;
  height: 70px;
  line-height: 70px;
}
nav ul li {
  display: inline;
  list-style-type: none;
  text-align: center;
  padding: 30px;
}
nav ul li a {
  margin: 50px 0;
  font-weight: bold;
  color: white;
  text-decoration: none;
}
nav ul li a:hover {
  color: white;
  text-decoration: none;
}
table {
  margin-top: 50px;
}
.App-link {
  color: #61dafb;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

cd ~/typescript-react-app

yarn start