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 ...