• install yarn for runing yarn dev
    • yarn is a pakage manager
    • same as npm but faster
    • yarn dev -> run React client app and server both 
        //management/package.json
  "scripts": {
  "client": "cd client && yarn start",
  "server": "nodemon server.js",
  "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  }
    • improving build speed and development environment

  • REST API
    • Build REST API using Node.Js/Express.JS
    • Majority of web server frameworks provide REST API
    • Server and Client send data effectively with each other based on web protocol
  1. create Customers API that calls entire customer data on server.js 
     //localhost:5000/api/customers
 app.get('/api/customers', (req, res) => {
     res.send([
         {
             'id': 1,
             'image': 'https://placeimg.com/64/64/1',
             'name': 'James Brouwn',
             'birthday': '991023',
             'sex': 'Male',
             'job': 'Student'
         },
         {
             'id': 2,
             'image': 'https://placeimg.com/64/64/2',
             'name': 'Michelle Obama',
             'birthday': '771103',
             'sex': 'Female',
             'job': 'Formal first lady'
         },
         {
             'id': 3,
             'image': 'https://placeimg.com/64/64/3',
             'name': 'Ariana Grande',
             'birthday': '891023',
             'sex': 'Female',
             'job': 'Singer'
         }
     ]);
 });


  2. Client accesses to get customers data from Customers API
    • validate JSON
    • add proxy 
       //management/client/package.json
 "proxy": "http://localhost:5000/"
    • React uses async communication to access server to get data 
        class App extends Component {
  state = {
      customers: ""
  }

  componentDidMount(){
      this.callApi()
      .then(res => this.setState({customers: res}))
      .catch(err => console.log(err));
  }

  callApi = async () => {
      const response = await fetch('/api/customers');
      const body = await response.json();
      return body;
  }

  render() {
      const { classes } = this.props;
      return (
      <Paper className={classes.root}>
          <Table className={classes.table}>
          <TableHead>
              <TableRow>
              <TableCell>ID</TableCell>
              <TableCell>Image</TableCell>
              <TableCell>Name</TableCell>
              <TableCell>Birthday</TableCell>
              <TableCell>Sex</TableCell>
              <TableCell>Job</TableCell>
              </TableRow>
          </TableHead>
          <TableBody>
          { this.state.customers ? this.state.customers.map(c => { return( <Customer key={c.id} id={c.id} image={c.image} 
              name={c.name} birthday={c.birthday} sex={c.sex} job={c.job}/> )}) : ""}
          </TableBody>
          </Table>
      </Paper>
      );
  }
  }