HomeCoursesUsing the Python Transcrypt Transpiler for Front-end Coding

Beginner

11h

Using the Python Transcrypt Transpiler for Front-end Coding

Delve into using Transcrypt to seamlessly translate Python code to JavaScript for coherent web projects, unifying Python's back-end strengths with JavaScript's front-end flexibility.

Join 2.7 million developers at

Overview

Content

Reviews

Python is already used in the back-end of most web-based applications. However, it does not work with the front-end of web browsers in those applications. This is where Transcrypt comes in. Transcrypt can help create more coherent web-based projects where Python is used to write the back-end and front-end. This course is primarily about using a transpiler called Transcrypt. It translates our Python code to JavaScript and then executes that JavaScript, letting us enjoy the neatness of Python with the front-end flexibility of JavaScript.

Python is already used in the back-end of most web-based applications. However, it does not work with the front-end of web brows...Show More

WHAT YOU'LL LEARN

Learn how to use the basics of Transcrypt.

Learn the basics of React.

Learn how to use React in Python with Transcrypt.

Learn to develop a front-end in Python and React.

Learn how to use the basics of Transcrypt.

Content

124 Lessons24 Quizzes

Introduction

2 Lessons

Discover how to use Transcrypt to translate Python code into responsive front-end applications.

Course Overview

Who Is This Course For?

The Setup

6 Lessons

Get started with integrating Python in front-end development using Transcrypt and React.

Quiz on the Transcrypt Setup

Summary

Write a “Hello, World” Application

5 Lessons

Go hands-on with setting up Transcrypt, creating a "Hello, World!" app, and coding challenges.

A Few Things to Note

Hello, World!

Coding Challenge

Quiz on Our “Hello, World” Application

Summary

JavaScript Functions

4 Lessons

Grasp the fundamentals of integrating Python and JavaScript functions using Transcrypt.

Random Numbers

Coding Challenge

Quiz on JavaScript Functions

Summary

Sourcemaps

3 Lessons

Trace Python code errors in the browser for efficient debugging with Transcrypt sourcemaps.

Debugging Console

Quiz on Transcrypt’s Sourcemaps

Summary

External JavaScript Libraries

4 Lessons

See how it works to integrate external JavaScript libraries and handle input with Transcrypt.

Working with jQuery

Coding Challenge

Quiz on External JavaScript Libraries

Summary

Intro to React

5 Lessons

Approach foundational React concepts, React state management, and hands-on coding challenges.

React Basics

React State

Coding Challenge

Quiz on the Basics of React

Summary

React Concepts

6 Lessons

Sharpen your skills in React's DOM manipulation, component structures, and unidirectional data flow.

Document Object Model

React's Building Blocks

More React Concepts

Coding Challenge

Quiz on React Concepts

Summary

Cleaner Code

4 Lessons

Grasp the fundamentals of enhancing Python for React, improving code organization, and handling events.

10.

Managing JavaScript Packages

4 Lessons

Master the steps to manage JavaScript packages and integrate local libraries in Python.

NPM

Using Local JavaScript Libraries

Quiz on Managing JavaScript Packages

Summary

11.

Package Bundler

5 Lessons

Grasp the fundamentals of using Parcel for streamlined Python web application development.

Parcel

Simplified JavaScript Imports

Build Scripts

Quiz on Package Bundler

Summary

12.

Text Input

5 Lessons

Take a closer look at managing state and handling user inputs in React with Transcrypt.

13.

Lists

5 Lessons

Tackle dynamic list management, React component structuring, and list comprehensions in Python Transcrypt.

14.

Forms

3 Lessons

Form transitions improve data handling and structure in your React application.

Form Action

Quiz on Forms

Summary

15.

React Components

7 Lessons

Learn how to use Python in React to create and manage front-end components effectively.

Introduction

Adding Functionality

Adding More Functionality

Decomposition

Coding Challenge

Quiz on React Components

Summary

16.

JavaScript Examples

9 Lessons

Unpack the core of converting JavaScript React components to Python using Transcrypt.

To-do List

Class Components to Functions

Functions

Ternary Statements & Dictionaries

Spread Operator & JSX

JavaScript Imports

Putting It Together

Quiz on JavaScript Examples

Summary

17.

CSS

7 Lessons

Work your way through integrating CSS in React using stylesheets, inline styles, and frameworks.

18.

Material-UI

6 Lessons

Break down complex ideas with Material-UI's theming, styling, and practical coding challenges.

Introducing Material-UI

Optimized Imports & Theming

Styled Components Revisited

Coding Challenge

Quiz on Material-UI

Summary

19.

Parcel Web Proxy

5 Lessons

Integrate Flask and Parcel with a proxy server to streamline front-end and back-end communication.

Flask Web Server

Proxy Service

Coding Challenge

Quiz on Parcel Web Proxy

Summary

20.

Asynchronous Requests

5 Lessons

Simplify complex topics of asynchronous operations in Python and JavaScript for seamless UI updates.

Synchronicity

Async/Await

Coding Challenge

Quiz on Asynchronous Requests

Summary

21.

React Context Hook

5 Lessons

Piece together the parts of managing React state, props, and contexts in nested components.

Nested Components

Context Variables

Coding Challenge

Quiz on React Context Hook

Summary

22.

Transcrypt Miscellany

5 Lessons

Learn how to use Transcrypt for Python-to-JavaScript web development with built-in functions, immutability, and type handling.

Standard Library & Built-in Functions

Keyword Args & Immutability

Truthiness & Types

Quiz on Transcrypt Miscellany

Summary

23.

Application Versioning

4 Lessons

Discover the logic behind efficient application versioning with npm and Git integration.

The npm Version

Application Version

Quiz on Application Versioning

Summary

24.

Google Analytics

4 Lessons

Master the steps to integrate Google Analytics with ReactGA for performance monitoring.

ReactGA

Request Timing

Quiz on Google Analytics

Summary

25.

Developer Tools

4 Lessons

Apply your skills to enhance efficiency with essential Python React development tools.

Bundle Visualizer

Chrome Extensions

Quiz on Developer Tools

Summary

26.

Appendix

2 Lessons

Map out the steps for setting up and executing Python environments using Transcrypt.

Appendix

Notes for Windows Users

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

John Sheehan

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath