Here’s how that page would render:
Coming from your Python, Flask, HTML, and CSS background, this should look somewhat familiar to you! You pass the variable usernames_list
from Python to the view so that it can be rendered in HTML.
Python – well, it’s Python (there’s a reason we call it "Pythonic"). In React, however, you notice a syntax similar to HTML because React gives you the ability to construct your DOM in JavaScript and have the changes reflected as they occur.
Build in React instead of Flask
Flask is an awesome framework – all you really need to do is understand Python to get your first project up and running. Most of the time, you use templates to render HTML files.
If you’re new to web development, I recommend you to draw a mockup of the web application you want to build – using boxes – so that you can see everything that you'll soon code. For example, your mockup should have a lot of boxes – one for each potential component and prop you want to have.
Keep in mind that props - which stands for properties - are similar to variables because they are used to pass data into a component. It might be best to think of props like function arguments in JavaScript and attributes in HTML.
To help you create a mockup and think of the components to write, you can think of every single thing on your web application as a function or object. React wants to simplify everything for you and allow you to reuse components. It's worth keeping in mind that if a component becomes too complicated, then you should break it down into smaller subcomponents.
Start a React app
In React, there are a few different ways to start a React application. For the sake of simplicity, we'll use a shortcut command to build out the project structure that you can build on.
On your command line, run npx create-react-app my-first-react-app
and change into the my-first-react-app directory.
Notice that there are already some folders and files created in the directory created for your convenience. Open the src folder and navigate to App.js where you will see some boilerplate code for the React webpage.
We’re going to hardcode the list of entries for the time being. Replace the contents of the file with the following code: