Using the Python Transcrypt Transpiler for Front-end Coding/

...

/

List Component

List Component

Replace the generic function with a React Component.

We'll cover the following...

React design patterns

Before moving on to the next topic, we’ll make our code a little more React-like. The way we implemented the generation of our list elements before works, but it is not a best-practice React design pattern. Since we are already returning a list of React elements anyway, let’s change our generic function to be an actual React component instead.

# Load React and ReactDOM JavaScript libraries into local namespace
React = require('react')
ReactDOM = require('react-dom')

# Map React javaScript objects to Python identifiers
createElement = React.createElement
useState = React.useState


def render(root_component, props, container):
    def main():
        ReactDOM.render(
            React.createElement(root_component, props),
            document.getElementById(container)
        )

    document.addEventListener('DOMContentLoaded', main)


# JavaScript function mappings
alert = window.alert
Adding React based components in our application

Significance of the PascalCase

Because the existing function already returns a list of ...