Using the Python Transcrypt Transpiler for Front-end Coding/

...

/

Styled Components

Styled Components

Learn how to style components rather than each tag individually.

We'll cover the following...

Consistent CSS

If we want the style for a particular element to be consistent everywhere we use it, another option is to create a styled component. This is where we create a new reusable React component for the sole purpose of giving it a fixed style. We would use our custom-styled element that has the style we want already applied to it. In lines 34-40, we do that for our Edit and Delete buttons by creating a styled component called Button (with a capital “B”).

# 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
useEffect = React.useEffect


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


def setTitle(title):
    document.title = title
Default styling for a element

Explanation

Here, we created a new React functional component called Button that takes props as a parameter and is based on the ...