How to Pick Up React from a Python, Flask, and HTML Background

How to Pick Up React from a Python, Flask, and HTML Background

In this article, I'll learn how to use your background in Python, Flask, and HTML to start your first React JavaScript project so you can scale it.

There comes a time in every developer's life when they have to figure out – do I need to learn a new language for this? Should I stop using Python and try out a JavaScript project? How do I know if React is the right tool for me to use over Vue? There's just so much out there – and you're not alone in having these thoughts.

Although learning Python can help you pick up other languages, it can be a challenge to figure out which technologies make the most sense for you and your project. In this post, I’ll show you React, a JavaScript library that has plenty of support online from professionals within the industry as well as independent developers.

In this article we’ll build a simple Flask app and change it so that it can be scaled up further using React. This will help you see the differences in syntax and give you an idea of which microframework is better for your case so let's try it out! 

React - what's so great about that?

React is an open source JavaScript UI library built to help developers like you focus on the code to build user interfaces with minimal stress. In the React philosophy, your project’s UI is organized in a tree that React maintains – each object you write is a node on the tree.

In the standard Model-View-Controller (MVC) framework, React can be used to build out the _View _component.

In order to better understand React we'll be taking a simple Flask app and rewriting the code in React instead. Go ahead and install Node.js and npm on your local machine. If you are using a Mac and have Homebrew installed on your machine, then you can use brew install node.

At the time that this article was written node is on version 15.6.0. You can run node --version on your command line to check and make sure the version is up to date. 

Translate a Flask web application to React

Let's create a simple React application that shows a sample UI, just as you would when you make a Flask application. For our example, we’ll create a webpage to show a fixed list of usernames that entered a giveaway.

code python flask, html background

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

top 30 Python Tips and Tricks for Beginners

In this post, we'll learn top 30 Python Tips and Tricks for Beginners

Lambda, Map, Filter functions in python

You can learn how to use Lambda,Map,Filter function in python with Advance code examples. Please read this article

50+ Basic Python Code Examples

In this tutorial, we'll learn 50+ Basic Python Code Examples.List, strings, score calculation and more..

Running your python code in unity

Running your python code in unity. Python offers the least code among others and is in fact 1/5 the number compared to other OOP languages. No wonder it is one of the most…

Creating REST API with Python and Flask: Web development with Python and flask part 6

In this tutorial, we'll learn Creating REST API with Python and Flask: Web development with Python and flask part 6. Let's explore it with us now.