Microservices with Docker, Flask, and React

  • To connect the client to the server, add a method to the class: – – We’ll use Axios to manage the AJAX call: – – You should now have: – – To connect this to Flask, open a new terminal window, navigate to the flask-microservices-users, activate the virtual environment, and…
  • Kill the Create React App server, and then run: – – We still need to call the method, which we can do in the : – – Run the server – via – and then within Chrome DevTools, open the JavaScript Console.
  • What would happen if the AJAX request took longer than expected and the component was mounted before it was complete?
  • Finally, update the method to display the data returned from the AJAX call to the end user: – – Let’s create a new component for the users list.
  • Add a new file to that folder called UsersList.jsx: – – Why did we use a functional component here rather than a class-based component?

If you’re new to React, review the Quick Start and the excellent Why did we build React? blog post. You may also want to step through the Intro to React tutorial to learn more about Babel and Webpack.

Let’s turn our attention to the client-side and add React…

React is a declarative, component-based, JavaScript library for building user interfaces.

If you’re new to React, review the Quick Start and the excellent Why did we build React? blog post. You may also want to step through the Intro to React tutorial to learn more about Babel and Webpack.

Make sure you have Node and NPM installed before continuing:

We’ll be using the excellent Create React App tool to generate a boilerplate that’s all set up and ready to go.

Start by installing Create React App globally:

Navigate to the flask-microservices-client directory and create the boilerplate:

This will also install all dependencies. Once done, start the server:

Now we’re ready build our first component!

First, to simplify the structure, remove the App.css, App.js, App.test.js, and index.css from the “src” folder, and then update index.js:

import React from ‘react’ ; import ReactDOM from ‘react-dom’ ; const App = () => { return ( < div className = "container" > < div className = "row" > < div className = "col-md-4" > < br /> < h1 > All Users < /h1> < hr />< br /> < /div> < /div> < /div> ) } ReactDOM . render ( < App /> , document . getElementById ( ‘root’ ) );

What’s happening?

Update index.js:

import…

Microservices with Docker, Flask, and React