After that, its fairly straightforward to get your project moving forward. You can follow this simple example here<\/a>.<\/p>\n\n\n\n I\u2019ve also been using VSCode <\/a>which has a pretty slick integration with the ubuntu running in your virtual machine.<\/p>\n\n\n\n Create a new repository called Make sure that you have node and npm available on your commandline<\/p>\n\n\n\n I\u2019m going to be roughly the tutorial here<\/a>. Create an initial project layout with npm<\/p>\n\n\n\n First make the \u201cDTO\u201d structure that will hold our customer object<\/p>\n\n\n\n in change This is our call to our service endpoint. We\u2019re using an environment variable for the host, so that we can change it out. I think<\/em> that this only works at build time though, so its not ideal and is only for short term integration. In this logic we\u2019re grabbing the JSON from our list all customers endpoint and putting it in our state holder. Next we\u2019re calling into our Customers page passing in this data, so lets look at that.<\/p><\/blockquote>\n\n\n\n Create Its a simple table, but the important part is that we\u2019re referring to this section as Next we need to review Here we\u2019re telling react to replace the root div element in index.html with the html rendered by App (which is generated by our App.js).<\/p><\/blockquote>\n\n\n\n Now let\u2019s take a look at Nothing crazy here\u2026 react is going to use index.js by default and follow our chain of logic down to the table render and replace the root div. I am <\/em>using bootstrap here, just because I heard about it and thought it might be easier to write a multi-platform app with it.<\/p><\/blockquote>\n\n\n\n I did remove a bunch of cruft that is automatically generated by create-react-app. I would probably use parcel in the future instead, but this is what got me going and I needed a quick win with the UI in order to build my confidence.<\/p>\n\n\n\n Create an environment variable to point to our customer-manager instance (running in the IDE)<\/p>\n\n\n\n now npm install to make sure that we have all of our dependencies<\/p>\n\n\n\n and start the app within the built in server<\/p>\n\n\n\n this should startup a browser window and you should see the customer list populated from any data that you may have previously saved.<\/p>\n\n\n\nBuilding the Service<\/h3>\n\n\n\n
medium-customer-manager<\/code>. Clone it locally and start a new branch first-service<\/code>.<\/p>\n\n\n\nbrian@Redoubt:~\/workspace\/medium-customer-manager$ node --version\nv13.12.0\nbrian@Redoubt:~\/workspace\/medium-customer-manager$ npm --version\n6.14.4<\/code><\/pre>\n\n\n\nnpm i create-react-app\nnpx create-react-app medium-customer-manager<\/code><\/pre>\n\n\n\nsrc\/App.js<\/code> to look like this:<\/p>\n\n\n\nimport React, { Component } from 'react';\nimport Customers from '.\/components\/customers';\n\n class App extends Component {\n state = {\n customers: []\n }\n\n componentDidMount() {\n fetch(process.env.REACT_APP_CUSTOMER_HOST+'\/customer\/all', {\n method: 'get',\n headers: new Headers({\n 'Content-Type': 'application\/json'\n })\n })\n .then(res => res.json())\n .then((data) => {\n this.setState({ customers: data })\n })\n .catch(console.log)\n }\n\n render() {\n return (\n <Customers customers={this.state.customers} \/>\n )\n }\n }\n\n export default App;<\/code><\/pre>\n\n\n\nsrc\/components\/customers.js<\/code> and add this data:<\/p>\n\n\n\nimport React from 'react'\n\nconst Customers = ({ customers }) => {\n return (\n <div>\n <center><h1>Customer List<\/h1><\/center>\n <table id=\"dtBasicExample\" className=\"table table-striped table-bordered table-sm\" cellSpacing=\"0\" width=\"100%\">\n <thead>\n <tr>\n <th className=\"th-sm\">CustomerId\n\n <\/th>\n <th className=\"th-sm\">Customer Name\n\n <\/th>\n <th className=\"th-sm\">Customer Email\n\n <\/th>\n <th className=\"th-sm\">Customer Phone\n\n <\/th>\n <\/tr>\n <\/thead>\n <tbody>\n {customers.map((customer) => (\n <tr key={customer.customerId}>\n <td>{customer.customerId}<\/td>\n <td>{customer.firstName} {customer.lastName}<\/td>\n <td>{customer.email}<\/td>\n <td>{customer.phoneNumber}<\/td>\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n <\/div>\n )\n};\n\nexport default Customers<\/code><\/pre>\n\n\n\nCustomers<\/code> which i believe helps react understand that its going to replace the Customers <\/code>in the App.js<\/code> with this html.<\/p><\/blockquote>\n\n\n\nsrc\/index.js<\/code>, which is the \u2018master\u2019 component. it should look like this:<\/p>\n\n\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\nimport * as serviceWorker from '.\/serviceWorker';\n\nReactDOM.render(\n <React.StrictMode>\n <App \/>\n <\/React.StrictMode>,\n document.getElementById('root')\n);\n\n\/\/ If you want your app to work offline and load faster, you can change\n\/\/ unregister() to register() below. Note this comes with some pitfalls.\n\/\/ Learn more about service workers: https:\/\/bit.ly\/CRA-PWA\nserviceWorker.unregister();<\/code><\/pre>\n\n\n\npublic\/index.html<\/code><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n <meta\/>\n <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\" integrity=\"sha384-MCw98\/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO\" crossorigin=\"anonymous\">\n <!--\n manifest.json provides metadata used when your web app is installed on a\n user's mobile device or desktop. See https:\/\/developers.google.com\/web\/fundamentals\/web-app-manifest\/\n -->\n <link rel=\"manifest\" href=\"%PUBLIC_URL%\/manifest.json\" \/>\n <title>Customer Management<\/title>\n <\/head>\n <body>\n <noscript>You need to enable JavaScript to run this app.<\/noscript>\n <div id=\"root\"><\/div>\n\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nexport REACT_APP_CUSTOMER_HOST=\"http:\/\/localhost:10000<\/a>\"<\/code><\/pre>\n\n\n\nnpm install<\/code><\/pre>\n\n\n\nnpm start<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/bullyrooks.com\/wp-content\/uploads\/2021\/02\/1LrzwbhqqgYmXiPkFY-_BeA.png?w=960\")
<\/figure>\n\n\n\nBuild and Commit<\/h3>\n\n\n\n
git checkout first-service\ngit add .\ngit commit -m \"customer list page\"\ngit push\ngit checkout master\ngit merge first-service\ngit push<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"