DEV Community: Ondiek Elijah

What exactly is Web 3.0?

Ondiek Elijah — Wed, 05 Jan 2022 07:10:47 +0000

Before we get into web 3.0, let's understand what helped give birth to web 3.0, we'll have to go back to web 1.0, when the internet was purely static and read-only, which was between 1994 and the early 2000s , during this period, internet users were primarily information consumers.

As the internet evolved, centralized companies such as Google, Amazon, Facebook, and others could now get information from you, which is why we have so many ads everywhere and also a lack of privacy.

This is why the content on your feed on social media is customized to you, so obviously these companies have a lot of power because they hold a lot of data, which can influence a lot of things.

Then there's web 3.0, the next evolution of the internet that uses blockchain technologies. Web 3.0 has already begun and 2022 will be an extremely significant year for its actualization to the masses, remember, in web 2.0, huge companies hold your data.

Well, in web 3.0, you will be the owner of your data...a good example is Odysee, a blockchain alternative to Youtube where you can upload the video and creators earn tokens and the video cannot be taken down because it is not only on the company's server like it would be on Youtube, but the video is on thousands of blockchain networks and cannot be attacked because the platform is decentralized.

As you can see from the preceding example of a company that is widely utilizing web 3.0 blockchain technology there is complete freedom, but it also comes with its own set of challenges, such as people doing whatever they want. How can illegal activities be controlled?

Once web 3.0 is fully decentralized, every company on the internet will be governed by a group of people known as the DAO, which stands for Decentralized Autonomous Organization.

DAOs essentially mean that there is no one single person with utmost power in an organization, such as today's internet, and that those with the most tokens will get to vote on what data needs to be regulated or taken off a network, which is very good because it means it won't be limited to a company like Google or Facebook, or even a government.

Also important to note is that in web 3.0, your real-life identity will not be linked to your digital identity thanks to the blockchain layer network that powerfully supports complete anonymity.

Meaning , you can use a wallet that only you have full control over and that no one else but you stores the password and navigate the internet without your identity being revealed or tracked like nowadays by using blockchain Polkadot, blockchain test chain, and so on you will be able to navigate the internet without your identity being revealed or tracked.

As you can see, web 3.0 is an evolution supported by a plethora of powerful technologies such as blockchain, VAR, and others geared toward the next stage of the internet. Hopefully, you now have a better understanding of what web 3.0 is and why the internet is rapidly evolving into it.

Are you excited to get started with Web 3.0? The video below provides an overview of how to create a Web 3.0 app. There is no prerequisite knowledge required. The tutorial is suitable for complete beginners.

Web 3.0 Beginner's tutorial.

Thank you for your time. Do you have any thoughts on the article? Did you enjoy it? Let's connect, follow me on Twitter @dev elie, and we'll talk about it.

Intro to Data Analysis - Data Reading

Ondiek Elijah — Thu, 14 Oct 2021 12:12:23 +0000

With today's technology advances, data is without a doubt the most important component for institutions, organizations, and all other entities. As a result, there is an urgent need to leverage the available data to make a difference.

Data analytics focuses on processing and performing statistical analysis on existing datasets, with a focus on developing techniques to capture and organize data to uncover actionable insights for ongoing problems, as well as determining the best manner to communicate this data.

Data analysis is a type of data analytics that is used in businesses to examine data and draw conclusions. Data gathering, data cleaning, data analysis, and data intercept are the steps taken in data analysis to ensure that you comprehend what your data is trying to communicate.

Source — Stack Overflow

As an introduction to data analysis, this post will teach you how to read data that is offered in various formats such as csv, json, or even as a database file.

Data from a CSV file
Data in SQL flavour
JSON files

Reading data from a CSV file

To read data from a comma-separated values (csv) file into DataFrame we use the pandas.read_csv function.

The read_csv function accepts numerous parameters, the type of which depends on the nature of your dataset or your aim.
Among the most frequently used parameters, excluding the mandatory filepath_or_buffer include sep,delimiter,header, index_col e.t.c

Read comma separated file

The sep parameter, which is short for separator, essentially tells the interpreter how to separate the data items in our CSV file.The interpreter assumes that the delimiter used is a comma by default if the sep parameter is not given.

from pyforest import *
df = pd.read_csv("cereal.csv")
df.head()

Read tab separated file

from pyforest import *
df = pd.read_csv("cereal_tab.csv",sep='\t')
df.head()

Read semicolon separated file

from pyforest import *
df = pd.read_csv("cereal_semicolon.csv",sep=';')
df.head()

Reading Data in SQL flavour

This section involves reading data from various SQL relational databases using pandas.

MySQL database

from pyforest import *
from sqlalchemy import create_engine

# provide a connection string/URL
db_connection_str = "mysql+mysqlconnector://mysql_username:mysql_user_password@localhost/mysql_db_name"
# produce an Engine object based on a URL
db_connection = create_engine(db_connection_str)
# read SQL query or database table into a DataFrame.
df = pd.read_sql('SELECT * FROM table_name', con=db_connection)
# return the first 5 rows of the dataframe
df.head()

Source — Stack Overflow

PostgreSQL

from pyforest import *
from sqlalchemy import create_engine
# produce an Engine object based on a postgresql database URL
engine = create_engine("postgresql:///psql_dbname")
# read SQL query or database table into a DataFrame.
df = pd.read_sql('select * from "user"',con=engine)
# return the first 5 rows of the dataframe
df.head()

SQlite database

from pyforest import *
from sqlalchemy import create_engine

# connect to a database
engine = create_engine("sqlite:///database.db")
# read database data into a pandas DataFrame
df = pd.read_sql('select * from user', engine)
# return the first 5 rows of the dataframe
df.head()

Reading data from JSON files.

Reading data from a JSON file is as simple as reading data from a CSV file. The pandas.read_json function transforms a JSON string to a pandas object with ease. The first parameter it accepts is path_or_bufa, which must be a valid JSON str, path object, or file-like object. This function also has a number of other parameters that it takes.

from pyforest import *
df = pd.read_json('cereal_default.json')
df.head()

If you enjoyed this article, please leave a comment, like it, share it, and follow me on Twitter @dev_elie.

Reference(s)

Scraping the Web with Ease: Building a Python Web Scraper with Flask

Ondiek Elijah — Tue, 07 Sep 2021 15:27:21 +0000

Websites currently contain a wealth of valuable information, which is consumed daily by users all around the world. These statistics are a useful asset for any subject of study or special interest. When gathering this information, you will almost definitely find yourself manually copying and pasting.

That, of course, does not sit well with you.You need a simple and more automated method for this, which is where web scraping comes in.

So, what exactly is web scraping? As the name implies, it is simply the automated extraction of a web page's unstructured HTML information in a specified format, structuring it, and storing it in a database or saving it as a CSV file for future consumption.

Python libraries are at the top of the list of web scraping technologies accessible today. Beautiful Soup is the most popular Python web scraping library.

In this tutorial, we'll look at web scraping using Beautiful Soup and Requests. We'll build a web scrapper app with Flask, Python's most lightweight web framework.

How it works

Load the application
Provide a target URL and a tag to be fetched example img,p, title
Receive a response - the requested element(s) content.
For images, there will be a download functionality that will save the images to your downloads directory

NB Live preview available here

1. Project setup.

For this project, I'll concentrate on backend functionality, as well as jinja templating and looping. I won't go into detail about CSS or the rest of the HTML code.Find the full project codes here.

To get this project running on your local machine follow the steps here.

Don't worry if you don't understand what's going on behind the scenes now that your project is up and running. Fill your coffee mug, because things are about to get interesting.

2. Project details.

Our primary discussion files will be as follows:

app.py
templates/index.html

app.py

As stated in the introduction, we will utilize Flask, Beautiful Soup, and request libraries. First and foremost, we'll import some functionality from Flask and Beautiful Soup into the app.py file.

We need to validate and parse the URLs we get, so we import the URL handling module for Python- urllib, as well as some other built-in libraries.

from flask import (
    Flask,
    render_template,
    request,
    redirect,
    flash,
    url_for,
    current_app
)
import urllib.request 
from urllib.parse import urlparse,urljoin
from bs4 import BeautifulSoup
import requests,validators,json ,uuid,pathlib,os

A flask instance must be created as shown below.

app = Flask(__name__)

Next, for our first route, we'll construct a function that returns an HTML template, as seen below.

@app.route("/",methods=("GET", "POST"), strict_slashes=False)
def index():
    # Actual parsing codes goes here
    return render_template("index.html")

To begin our scrap, we must ensure that the user has sent a Post request.

if request.method == "POST":

Inside our function we handle the actual parsing using Beautiful Soup

try:
    global requested_url,specific_element,tag

    requested_url = request.form.get('urltext')
    tag = request.form.get('specificElement')

    source = requests.get(requested_url).text
    soup = BeautifulSoup(source, "html.parser")
    specific_element = soup.find_all(tag)

    counter = len(specific_element)

    image_paths = image_handler(
        tag,
        specific_element,
        requested_url
        )

    return render_template("index.html",
        url = requested_url,
        counter=counter,
        image_paths=image_paths,
        results = specific_element
        )

except Exception as e:
    flash(e, "danger")

To explain the following scripts, since we'll be writing a function to accept image paths and generate a complete URL from them, the form field inputs must be available globally, so we define them as global variables.

global requested_url,specific_element,tag

The next step is to set values to the two global variables from our form field, as seen below.

 requested_url = request.form.get('urltext')
 tag = request.form.get('specificElement')

The following lines of code; the first line sends an HTTP request to the user-specified URL - requested_url. The server answers the request by delivering the raw HTML content of the webpage, which we then transform to text- .text() and assign to the variable source.

source = requests.get(requested_url).text

We need to parse the page after we've extracted the HTML content in text format, and we'll utilize html.parser as our parsing library. We're merely generating a nested/tree structure of the HTML data by doing this.

soup = BeautifulSoup(source, "html.parser")

Because we don't need the entire document, we navigate through the tree to discover the element we require. The tag that the user will enter in the form field.

specific_element = soup.find_all(tag)

We also require a count of the results discovered. As a result, we create a variable -counter to record the count, as demonstrated.

counter = len(specific_element)

As we can see, the variable image_paths is linked to a function called -image_handler(), which accepts the user-supplied URL, tag, and the specific element we extracted from the parsed page. We'll skip this function and come back to it later to see what it does.

image_paths = image_handler(
    tag,
    specific_element,
    requested_url
    )

We pass the results of our parsing along with the return statement to make them available on the HTML template.

return render_template("index.html",
    url = requested_url,
    counter=counter,
    image_paths=image_paths,
    results = specific_element
    )

When referencing images on websites, developers frequently use either absolute URLs or relative URLs. Absolute URLs are simple to handle, but relative routes require some processing.

Paths such as /uploads/image.png, for example, will be difficult to determine where they originate. So we'll create a function similar to the one we called earlier to validate our image paths.

def image_handler(tag,specific_element,requested_url):
    image_paths = []
    if tag == 'img':
        images = [img['src'] for img in specific_element]
        for i in specific_element:
            image_path = i.attrs['src']
            valid_imgpath = validators.url(image_path)
            if valid_imgpath == True:
                full_path = image_path
            else:
                full_path = urljoin(requested_url, image_path)
                image_paths.append(full_path)

    return image_paths

The function checks if the provided tag is an image tag, then extracts the images' src attribute value and verifies it to see if it's an absolute path. If this is not the case, it joins the relative path to the target's base URL.

https://example.com + /uploads/image.png

These picture paths are then saved in a list and returned when the function is revoked.

templates/index.html

What comes next? We must provide the scrap results to the user. We'll use jinja templating and looping in this case.

<div class="col-md-8">
    <p><span class="badge bg-success">{{ counter }}</span> Scrap Results for <a
            href="{{ url }}"> {{ url }}</a> </p>
    <div class="bg-white shadow p-4 rounded results">
        {% if results %}
        {% for result in results %}
        <p> {{ result | join(' ') }} </p>
        {% endfor %}
        {% endif %}
        {% for path in image_paths %}
        <a href=" {{  path }} "> <img src=" {{ path }} " class="img"> </a>
        {% endfor %}
    </div>
    {% if image_paths %}
    <a href="{{url_for('downloader')}}" class="btn btn-primary m-2" id="download">Download
        Images<i class="bi bi-cloud-arrow-down-fill m-2"></i></a>
    {% endif %}
</div>

In the above html code fragment, we print the number of results found as well as the URL that was scraped. Take a look at the sample below.

Results count and the URL

We first verify if the results list is available below the count and the URL, and if it is, we iterate printing each. This is for the texts that were retrieved.

However, when you print the output, you will see | join(' ') It operates similarly to |striptags in that it removes all HTML tags from the variable result.

Consequently, instead of

We'll have;

We use anchor tags to enclose the pictures and pass the paths as values to the href and src properties.

{% for path in image_paths %}
<a href=" {{  path }} ">
<img src=" {{ path }} " class="img">
</a>
{% endfor %}

In addition, we'd like to display the download option only if images are retrieved. So we use jinja if statements to accomplish this. See the code below.

{% if image_paths %}
<a href="{{url_for('downloader')}}" class="btn btn-primary m-2" id="download">
Download Images
<i class="bi bi-cloud-arrow-down-fill m-2"></i>
</a>
{% endif %}

Last but not least,we need to download images too.

@app.route("/download",methods=("GET", "POST"), strict_slashes=False)
def downloader():
    try:
        for img in image_handler(tag,specific_element,requested_url):
            image_url = img

            filename = str(uuid.uuid4())
            file_ext = pathlib.Path(image_url).suffix

            picture_filename = filename + file_ext

            downloads_path = str(pathlib.Path.home() / "Downloads")

            picture_path  = os.path.join(downloads_path, picture_filename
            )


        flash("Images saved in your Downloads directory", "success")

    except Exception as e:
        flash(e, "danger")

    return redirect(url_for('index'))

The uuid library is used by the download function above to produce unique names for the downloaded files.

filename = str(uuid.uuid4())

then pathlib.Path() to strip the image extension from the image path.

file_ext = pathlib.Path(image_url).suffix

The two are combined to generate an image name that includes an extension. The image is then embedded with the downloads directory path. This will allow us to designate where we want the images saved.

picture_path  = os.path.join(downloads_path, picture_filename)

The line of code following handles the actual image download.

urllib.request.urlretrieve(image_url, picture_path)

As parameters, urllib.request.urlretrieve() accepts the image(s) to be downloaded and the directory where it should be saved with its new name. As a result, the photos are saved in the downloads directory within the static directory.

Finally we instruct flask to run the application as a module.

    if __name__ == "__main__":
        app.run(debug=True)

Thank you for taking the time to read this, and please leave some feedback if you found it useful.

Like, share, and leave a comment in the section below. Follow me on Twitter for further updates and tips on Flask and React development.

How to Send Data From React to Flask

Ondiek Elijah — Sat, 04 Sep 2021 19:48:27 +0000

In our previous article on connecting a React frontend to a Flask backend, we saw how to fetch data from Flask API and then displaying it on the browser, in this continuation article we'll explore how to send data to a Flask backend from React, then update the UI with the new data.

Check my GitHub for the complete codes used in this guide.

Part 1

Configuring the Flask backend.

1. routes.py

Before we continue. Let's alter our Flask routes.py to accept input from the React frontend, then commit the database. We'll add the following lines of code to our routes.py file.



@app.route("/add", methods=["POST"], strict_slashes=False)
def add_articles():
    title = request.json['title']
    body = request.json['body']

    article = Articles(
        title=title,
        body=body
        )

    db.session.add(article)
    db.session.commit()

    return article_schema.jsonify(article)

The function above basically gets an article title and description in json format, adds the record to the database, and then commits, i.e. saves.

Part 2

Configuring the React frontend.

In contrast to the last tutorial, we will make some changes to our project by introducing a Components directory. Then we'll add some new files, one to manage our API services and another to display a form to the UI, as well as to handle our interaction with the APIService, which provides our data to Flask.

2. Components/APIService.js



export default class APIService{
    // Insert an article
    static InsertArticle(body){
        return fetch(`http://localhost:5000/add`,{
            'method':'POST',
             headers : {
            'Content-Type':'application/json'
      },
      body:JSON.stringify(body)
    })
    .then(response => response.json())
    .catch(error => console.log(error))
    }

}

To better organize our files and increase efficiency, we conduct all of the Flask API services in a single file and then call the methods as needed.

The code above requests our Flask routes, which handle data insertion, and then posts our JSON-stringified article title and description. Flask takes care of the rest under the hood.

3. Components/Form.js



import { useState } from 'react';
import APIService from '../Components/APIService'

Because we'll require the React useState hook and the APIService component, we make them available as seen above.



const Form = (props) => {
    const [title, setTitle] = useState('')
    const [body, setBody] = useState('')

    const insertArticle = () =>{
      APIService.InsertArticle({title,body})
      .then((response) => props.insertedArticle(response))
      .catch(error => console.log('error',error))
    }

    const handleSubmit=(event)=>{ 
      event.preventDefault()
      insertArticle()
      setTitle('')
      setBody('')
    }

  return (
       <div>
       // Form
       </div>
  )}

export default Form;

In the above functional component we just created, we do define two sets of variables, the title and the article body, both are subjected to the useState hook that returns the current states(title and body) and a function that updates them (setTitle and setBody).

We then invoke the APIService.InsertArticle() method.This call takes our article object - from the form submitted by the user, as an argument. The response is then sent as a parameter to a function insertedArticle that we are yet to create in the later steps inside App.js.

A Parameter is variable in the declaration of function while an argument is the actual value of this variable that gets passed to function.- Stackoverflow

In the handleSubmit function, we call insertArticle and then clear the form fields after submission.

The return statement of the Form component delivers our actual HTML form, as illustrated below.



        <form onSubmit = {handleSubmit} >

          <label htmlFor="title" className="form-label">Title</label>
          <input 
          type="text"
          className="form-control" 
          placeholder ="Enter title"
          value={title}
          onChange={(e)=>setTitle(e.target.value)}
          required
          />

          <label htmlFor="body" className="form-label">Body</label>
          <textarea 
          className="form-control" 
          placeholder ="Enter body" 
          rows='6'
          value={body}
          onChange={(e)=>setBody(e.target.value)}
          required
          >
          </textarea>

          <button 
          className="btn btn-primary mt-2"
          >
          Publish article</button>

        </form>

3. App.js

As we near completion, we need to show the Form component on the UI. We'll import it then display it on the UI as shown in the steps below.



// import the component
import Form from './Components/Form'

Previously, we passed the response from our APIService. InsertArticle() as a parameter, it's then received on this end. Using the spread operator we will combine the newly created article with the available articles. The update is initiated using the setArticles method and the result is a list of updated articles.



  // update the existing article list
  const insertedArticle = (article) =>{
    const new_articles = [...articles,article]
    setArticles(new_articles)
  }

We now have our form ready to display on the UI. We can make it visible by calling the Form Component while passing to it the the data as props like this.



      <Form insertedArticle={insertedArticle} />

Also, keeping the form visible all the time isn't ideal, so we made it a toggle button.



  // define variables for the present state of the form and another to change its state
  const [showForm, setShowForm] = useState(false);
  ...
 // toggle between the two states,visible and hidden
  const toggleShowForm = () => {
    setShowForm(!showForm);
  }
  ...
// Trigger the hide/show method
  <button 
  onClick={toggleShowForm}
  className="btn btn-primary"
  >
  Write an article
  <i className="bi bi-pencil-square m-2"></i>
  </button>
  ...
 // display the form conditionally
  {showForm && (
  <Form 
  insertedArticle={insertedArticle}
  />
  )}

Project preview

Thank you for reading. Please like, share, and leave a comment below.

Also do follow my blog to get notified when the next article on editing and deleting the articles we just published is posted.

Inspired by Parwiz Forogh

Follow me on Twitter

How to Connect a React Frontend to a Flask Backend

Ondiek Elijah — Tue, 31 Aug 2021 15:49:12 +0000

React with Flask? That's a fantastic combination.

You've most likely used Flask without a frontend framework in your projects. It is not always user friendly, regardless of how it works. For example, unless you've written some advanced JQuery form submission techniques, submitting a form will result in a page reload.

However, with React on the frontend, there is no need for a page reload upon form submission, and you may revel in the delights of automatic UI updates.

In this tutorial, I will show you how to connect to a Flask backend, collect data from it, and then display the information on the browser using React.

Also, I'll assume you're familiar with Flask and React.

Application structure

react_flask_app
├── backend
│   ├── app.py
│   ├── database.db
│   ├── manage.py
│   ├── migrations
│   │   ├── alembic.ini
│   │   ├── env.py
│   │   ├── README
│   │   ├── script.py.mako
│   │   └── versions
│   ├── models.py
│   ├── requirements.txt
│   ├── routes.py
│   └── run
├── frontend
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   │   └── index.html
│   ├── README.md
│   └── src
│   ├── App.css
│   ├── App.js
│   ├── Components
│   │   └── ArticleList.js
│   └── index.js
└── README.md

For this tutorial, setup instructions and scripts can be found on my GitHub.

Part 1.

Setting up Flask backend

1. app.py



# Import the required packages
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_marshmallow import Marshmallow
from flask_cors import CORS

We import different dependencies in the preceding lines of code to make them available for use within our file.



...
db = SQLAlchemy()
migrate = Migrate()
ma = Marshmallow()
cors = CORS()
...

The code snippet above creates several application instances. Because order matters, SQLAlchemy must be initialized before Marshmallow.



...
def create_app():
    """Application-factory pattern"""
    app = Flask(__name__)
    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db"
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

    # Initialize extensions
    # To use the application instances above, instantiate with an application:
    db.init_app(app)
    migrate.init_app(app, db)
    ma.init_app(app)
    cors.init_app(app)

    return app

The application factory pattern is described above. It is better to design your extensions and app factories so that the extension object is not initially connected to the application.

Any configuration, registration, or other setup required by the program will take place within the function, after which the application will be returned.

2. manage.py



...
def deploy():
    """Run deployment tasks."""
    from app import create_app,db
    from flask_migrate import upgrade,migrate,init,stamp
    from models import Articles

    app = create_app()
    app.app_context().push()

    # create database and tables
    db.create_all()

    # migrate database to latest revision
    stamp()
    migrate()
    upgrade()

deploy()

The manage.py file allows us to conduct deployment tasks, initialize the database, check for schema changes, and then migrate it to the most recent version.

models.py



...
class Articles(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100),nullable=False)
    body = db.Column(db.Text, nullable=False)
    date = db.Column(db.DateTime(), default=datetime.utcnow)

    def __repr__(self):
        return "<Articles %r>" % self.title

# Generate marshmallow Schemas from your models
class ArticlesShema(ma.Schema):
    class Meta:
        # Fields to expose
        fields = ("id","title", "body", "date")


article_schema = ArticlesShema()
articles_schema = ArticlesShema(many=True)

For serialization, the objects article_schema and articles_schema are utilized. The first serializes a single article, while the second serializes a queryset.

routes.py



...
# Create an application instance
app = create_app()

# Define a route to fetch the available articles

@app.route("/articles", methods=["GET"], strict_slashes=False)
def articles():

    articles = Articles.query.all()
    results = articles_schema.dump(articles)

    return jsonify(results)


if __name__ == "__main__":
    app.run(debug=True)

In the above snippet, we design a route that will collect the data, then serialize objects by giving them to the schema's dump method, which will provide the structured result. jsonify() produces a Response object with the mimetype application/json set.

Part 2.

Setting up React frontend

Fetching data from Flask

App.js
Connecting to a Flask backend may appear complicated, however this is not always the case. The only need is that the path to the flask api be provided. This can be accomplished by following the instructions below.



...
  const [articles, setArticles] = useState([]);
...
  useEffect(()=>{
    fetch('http://localhost:5000/articles',{
      'methods':'GET',
      headers : {
        'Content-Type':'application/json'
      }
    })
    .then(response => response.json())
    .then(response => setArticles(response))
    .catch(error => console.log(error))

  },[])

React hooks enable you to use state and other React features without having to construct a class.

A call to the useEffect hook allows us to do a DOM update after the render. In this case, we're instructing React to update the DOM with a json response from our flask api after the render.

This method is executed on every update, ensuring that the UI is always in the most recent state.

The useState hook, which is now set to an empty list, will be updated with fresh data from our backend; it returns a pair of values: the current state and a function that updates it.

Components/ArticleList.js
We now have data from our backend; the next step is to iterate through the queryset, displaying each article's title, description, and date of publication.

We'll make an ArticleList component out of a list of articles.This component receives props that we will pass in the next phase.



const ArticleList = (props) => {

    return (
        <div className="mt-2">
        {/* Display the article details if article is not None */} 
        {props.articles && props.articles.map(article =>{
            return (

              <div key= {article.id}>
                <h2 className="text-primary"> { article.title} </h2>
                <p> { article.body } </p>
                <p> { article.date } </p>
                <hr/>
              </div>
            )

            })}
        </div>
        )
}

export default ArticleList;

We also need to export the component we just constructed so that it may be imported into other components.

Returning to our App.js, we import the component we constructed and exported as seen below.



import ArticleList from './Components/ArticleList'

We pass the ArticleList component to the DOM after making it available, as well as the articles - the current state effect from the useState, which is then consumed as props.



  return (
    <div className="App container m-4">
    <div className="row">
      <div className="text-center">
      <h1>Connecting a React Frontend to a Flask Backend.</h1>
      </div>
    </div>

      <ArticleList 
      articles={articles} 
      />

    </div>
  );

We now have a complete Flask + React app that uses Flask to collect data from a SQlite database and React to render output on the browser. If you followed along as you did, you should have output similar to the one below on the browser.

In the introductory section of this tutorial, I've included a link to the GitHub repository.