Your_AMQP_URL

Go to the CloudAMQP website, create an account, create a free RabbitMQ instance with Little Lemur, and you will be assigned an AMQP URL. Input your assigned AMQP URL here.

For a complete step by step guide on how to do this, see the lesson: Introduction to RabbitMQ.

Gain insights into building robust microservices web apps using RabbitMQ, React TypeScript, Django, Flask, and MySQL. Learn about architectures, databases, migrations, and front-end development for seamless integration.

Build Microservices Web Apps with RabbitMQ, React-TSX and Django.jpg

gldttest.tar.gz

Backendservice1 - Django

Backendservice2 - Flask

Backendservice1 - Django-Startapp

Backendservice1 - Django-Startapp-migration

Backendservice2 - Flask-appboierplate

Frontend - React-TypeScript

Backendservice1 - Django-MV

Backendservice2 - Flask-appboierplate-MV

Optimize Frontend 

In this course, you will learn how to build robust microservices web applications with RabbitMQ, React TypeScript, Python Django, Python Flask, and MySQL that can be event-driven and can also support RESTful APIs.

You will learn about the monolith and service-oriented architectures and microservices. Next, you will cover how to create apps in Django, connect the Django app to a MySQL database using Docker, create models, serializers, and URL paths, and perform migrations in Django. You will also learn how to create a Flask app, connect the Flask app to a MySQL database using Docker, create models, request routes and URL paths, and perform migrations in Flask. Finally, you will finish with the creation of the front-end application with React TypeScript, HTML, CSS, and Bootstrap.

By the end of this course, you will be fully armed with the knowledge and tools required to develop, containerize, monitor, and manage microservices web applications using Django, Flask, React TypeScript, MySQL, RabbitMQ, and Docker.

Build Microservices Web Apps with RabbitMQ, React TSX, and Django

```
export default <InterfaceName> {}
```

```
<InterfaceName> export default {}
```

```
const <InterfaceName> = (export default) =>{}
```

```
export interface <InterfaceName> {}
```

What is the correct method to create and export an interface in React TypeScript?

What is the correct method to create and export an interface in React TypeScript?

```
class ExampleComponent inherits React.Component{
    render() {}
}
```

```
class ExampleComponent extends React.Component{
    render() {}
}
```

```
ExampleComponent extends class React.Component{
    render() {}
}
```

```
ExampleComponent inherits class React.Component{
    render() {}
}
```

What is the appropriate method for creating a class component that inherits properties of the React component?

What is the appropriate method for creating a class component that inherits properties of the React component?

What command is used to pass data to components from the outside? 

What command is used to pass data to components from the outside?

Which method can be used to avert default behavior and actions in react?

Which method can be used to avert default behavior and actions in react?

What is the smallest building block of a React TypeScript app?

What is the smallest building block of a React TypeScript app?


Which function is used to change the state of a React component?

Which function is used to change the state of a React component?

```
const myComponent = () => {
 return <h1>Hello World!</h1>
};
```

```
class MyComponent extends React.Component {
 render() {
 return <h1>Hello World!</h1>
 } 
};
```

 Which component is a valid React component?

Which component is a valid React component?

**(True or False)** React TypeScript merges the object you provide into the current state using `setState()`.

(True or False) React TypeScript merges the object you provide into the current state using <code>setState()</code>.

The class prop is not a valid prop for the `` element.

The class prop should be the `className` in React TSX.

The class prop should be the `style` in React TSX.

What is wrong with the following TSX code?
```
const element = This text should be red.
```

What is wrong with the following TSX code?
<pre><code>const element = &lt;p class=&quot;red-text&quot;&gt;This text should be red.&lt;/p&gt;
</code></pre>

The `src` prop is not enclosed in curly brackets.

What is wrong with the following React TSX code?
```
const element = <img src="image.png" />
```

What is wrong with the following React TSX code?
<pre><code>const element = &lt;img src=&quot;image.png&quot; /&gt;
</code></pre>

```
import NamedExport from './Module';
```

```
import { NamedExport } from './Module';
```

```
import * as NamedExport from './Module';
```

```
import { name as NamedExport } from './Module';
```

How do we import a named export from a module in React TSX?

How do we import a named export from a module in React TSX?

Which React Hook can be used to subscribe to events?

Which React Hook can be used to subscribe to events?

To perform side effects after rendering a component

What is the purpose of the `useEffect` Hook in React?

What is the purpose of the <code>useEffect</code> Hook in React?

By using the `Route` component with the `redirect` attribute

By using the `Switch` component with the `redirect` attribute

How do we redirect to a new route in React Router?

How do we redirect to a new route in React Router?

Which router is *not* a type of router provided by React Router?

Which router is not a type of router provided by React Router?

The `exact` prop checks for an exact match of the URL path, while the `strict` prop checks for a trailing slash.

The `strict` prop checks for an exact match of the URL path, while the `exact` prop checks for a trailing slash.

The `exact` and `strict` props are the same.

What is the difference between the `exact` and `strict` props in a `Route` component in React Router?

What is the difference between the <code>exact</code> and <code>strict</code> props in a <code>Route</code> component in React Router?

Which React method is used to handle events in React components?

Which React method is used to handle events in React components?

When handling events, which React method is used to prevent default behavior in an event handler?

When handling events, which React method is used to prevent default behavior in an event handler?

To render a component based on the current route

To handle user authentication in React Router

What is the purpose of the `Link` component in the React Router?

What is the purpose of the <code>Link</code> component in the React Router?

React TypeScript

React TypeScript

Test your understanding of building front-end apps with React TypeScript.

Introduction

Introducing Our Project

Backend Service: The Config App

Backend Service: The Houses App

Backend Service: The Core App

Message Queuing Service: Introducing RabbitMQ

Frontend Service: The Front-End App

Wrap Up

Appendix

Event-Driven Microservices Web Apps Assessment

Build a Task Manager Microservice Web App with Flask and SQLite

Quiz: The Front-end App