Forem: Jesse Ilc

Docker with Python for Dummies

Jesse Ilc — Sat, 14 Oct 2023 00:36:41 +0000

TLDR @ bottom

Overview

Docker is a powerful tool for creating, deploying, and managing applications in containers. It allows you to package your application and its dependencies into a single container, making it easy to run consistently across different environments. It basically functions like a VM (virtual machine) if you're familiar with that. However, there are differences which I won't get into but here's a great video that provides more information.

Docker
"Docker's container-based platform allows for highly portable workloads." - docs.docker.com

In this read, I hope to give you the basic knowledge to help set up Docker in your project. Without further ado let's get started.

Prerequisites

I assume that you already have Python installed but if not click here, you're going to need it. I also assume that you already have some basic knowledge of Python so this will not cover any Python fundamentals.

First we need to install Docker. We can visit the site here to install what we need. For Mac user's it's really easy; just click and install. However for Windows it's a bit more complicated because we need to use WSL. Here's a great video that gives an awesome tutorial on how to install Docker on WSL. The Docker site here also provides a tutorial as well. Feel free to use whichever one you like. Once you have Docker installed make sure you have it running before you type any docker commands otherwise they won't work.

Step 1: Python Project Structure

You can either create a new project or I'm assuming you're probably looking to add this to an existing project. Either way the process is the same. A very basic Python project might look something like this:

my_python_project/
    └── app.py

Very basic. Let's assume however you plan on adding dependencies to your project. You might have a Pipfile and Pipfile.lock, you also might also be using pipenv. To make our lives easier we're going to add a requirements.txt somewhere in our working directory. So our file structure will look like this now:

my_python_project/
    └── app.py
    └── requirements.txt

In our requirements.txt we're going to make a list of the dependencies which we need for our project. This will come in handy later. The requirements.txt will look something like this:

# /requirements.txt

Flask==2.1.0
SQLAlchemy==1.4.30
requests>=2.25.0
numpy~=1.21.2

Step 2: Dockerfile / .dockerignore

1. Dockerfile
In order to actually use Docker we need to include a Dockerfile in the root directory. To do this you simply create a new file and name it Dockerfile.

my_python_project/
    └── app.py
    └── requirements.txt
    └── Dockerfile

Let's talk about what goes into our Dockerfile.

FROM

FROM determines what application platform our parent image will use in docker. In this case we will use Python 3.8.

# /Dockerfile

FROM python:3.8

WORKDIR

WORKDIR determines what the working directory is in the parent image. In this case our working directory will be /app however for you it may be different.

# /Dockerfile

FROM python:3.8

WORKDIR /app

COPY

COPY will literally copy all of the contents in a
specified location. In our case we want to copy /app and requirements.txt.

# /Dockerfile

FROM python:3.8

WORKDIR /app

COPY requirements.txt .

COPY app .

RUN

RUN will run any commands you specify. This is where we want to include our dependencies and any other commands we want to run prior to running the application. Because we created a requirements.txt we don't need to pip install each of our dependencies, only the requirements.txt.

Note: It's important to install our dependencies first before we copy our app to speed up subsequent builds. For more information follow the link here.

# /Dockerfile

FROM python:3.8

WORKDIR /app

COPY requirements.txt .

RUN pip install -r requirements.txt

COPY app .

EXPOSE

EXPOSE will make any ports available that are needed for your project. This is helpful if you're using python for web development. In this case we will expose the port 5555.

# /Dockerfile

FROM python:3.8

WORKDIR /app

COPY requirements.txt .

RUN pip install -r requirements.txt

COPY app .

EXPOSE 5555

CMD

CMD will be the final command that Docker will run in order to start your application. This will be written as a list and not include spaces. For example the code to run our application would be python app.py. In the Dockerfile that would like this ["python", "app.py"].

# /Dockerfile

FROM python:3.8

WORKDIR /app

COPY requirements.txt .

RUN pip install -r requirements.txt

COPY app .

EXPOSE 5555

CMD ["python", "app.py"]

Here is the Docker documentation for more information on various other commands.

2. .dockerignore

.dockerignore will tell Docker what files to ignore when building an image. In our case we have nothing to ignore but in case you do here is a list of some items you can include (link to the repo):

# /.dockerignore

# Git
.git
.gitignore
.gitattributes


# CI
.codeclimate.yml
.travis.yml
.taskcluster.yml

# Docker
docker-compose.yml
Dockerfile
.docker
.dockerignore

# Byte-compiled / optimized / DLL files
**/__pycache__/
**/*.py[cod]

# C extensions
*.so

# Distribution / packaging
.Python
env/
build/
develop-eggs/
dist/
downloads/
eggs/
lib/
lib64/
parts/
sdist/
var/
*.egg-info/
.installed.cfg
*.egg

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.coverage
.cache
nosetests.xml
coverage.xml

# Translations
*.mo
*.pot

# Django stuff:
*.log

# Sphinx documentation
docs/_build/

# PyBuilder
target/

# Virtual environment
.env
.venv/
venv/

# PyCharm
.idea

# Python mode for VIM
.ropeproject
**/.ropeproject

# Vim swap files
**/*.swp

# VS Code
.vscode/

my_python_project/
    └── app.py
    └── requirements.txt
    └── Dockerfile
    └── .dockerignore

Step 3: Building The Docker Image

Once your Dockerfile is completed and you have Docker running in the background you can begin to build the image. To do so you want to open your terminal and navigate to your project directory where the Dockerfile is located. Now we want to run the following command:

docker build -t my-python-app .

The -t flag lets Docker know what we want to call the image. So whatever follows -t will be the image name. The . indicates the directory so don't forget it or the build won't run.

Once the build runs you should see the following in your terminal:

What's Next?
  View summary of image vulnerabilities and recommendations → docker scout quickview

Step 4: Run your Docker Container

Once you run your build you can start your container with the following command:

docker run -p 5555:5555 my-python-app

-p 5555:5555 maps port 5555 on your local machine to port 5555 in the Docker container. You can change these ports to whatever your needs are.

Conclusion

Docker is a powerful tool that you can use to your advantage. It simplifies the process of packaging and deploying your Python applications, making them more portable and consistent across different environments. You can further customize your Docker setup to suit the needs of your project and deploy it to various platforms. I hope that this guide was helpful to you and good luck to any projects you work on. Happy coding!

TLDR

File Stucture

my_python_project/
    └── app.py
    └── requirements.txt
    └── Dockerfile
    └── .dockerignore

Dockerfile

# /Dockerfile

# Use an official Python runtime as a parent image
FROM python:3.8



COPY app .

# Set the working directory in the container
WORKDIR /app

# copy the dependencies file to the working directory
COPY requirements.txt .

# Install any needed packages specified in requirements.txt or run any commands prior to starting your app
RUN pip install -r requirements.txt

# Copy the current directory contents into the container at /app
COPY app .

# Make port 5555 available to the world outside this container
EXPOSE 5555

# Define the command to run your application
CMD ["python", "app.py"]

.dockerignore

# /.dockerignore
# list of files/folder that can be ignored

# Git
.git
.gitignore
.gitattributes


# CI
.codeclimate.yml
.travis.yml
.taskcluster.yml

# Docker
docker-compose.yml
Dockerfile
.docker
.dockerignore

# Byte-compiled / optimized / DLL files
**/__pycache__/
**/*.py[cod]

# C extensions
*.so

# Distribution / packaging
.Python
env/
build/
develop-eggs/
dist/
downloads/
eggs/
lib/
lib64/
parts/
sdist/
var/
*.egg-info/
.installed.cfg
*.egg

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.coverage
.cache
nosetests.xml
coverage.xml

# Translations
*.mo
*.pot

# Django stuff:
*.log

# Sphinx documentation
docs/_build/

# PyBuilder
target/

# Virtual environment
.env
.venv/
venv/

# PyCharm
.idea

# Python mode for VIM
.ropeproject
**/.ropeproject

# Vim swap files
**/*.swp

# VS Code
.vscode/

Build Image Command:

docker build -t my-python-app .

note: -t my-python-app tags the image with the name "my-python-app".

Run Image Command:

docker run -p 5555:5555 my-python-app

note: -p 5555:5555 maps port 5555 on your local machine to port 5555 in the Docker container.

Sources

How to Use Formik and Yup in Your React Project

Jesse Ilc — Mon, 21 Aug 2023 22:15:37 +0000

For my TLDR people skip to the TLDR section.

Intro

Forms in React can be complex and tedious especially when working with controlled forms. Controlling state, adding validations, and handling submits can be a hassle when you have multiple form entries. Thankfully, libraries like Formik and Yup can help you add these features in a way that's simple and clean. So, let’s talk about how to use them.

Formik
“Formik is a popular open-source library for building and processing form data in React applications” – freecodecamp.org

Yup
“Yup is a schema builder for runtime value parsing and validation” – npmjs.com

Set up

1. Set up your React Project
I’m assuming most of you are already past this step but if not, you want to create your React project. You can follow along with the docs here, it’s fairly simple and straightforward.

2. Installing Formik and Yup
To install formik and yup, you just need to run the command in your terminal: npm install formik yup. Once those dependencies finish installing you’re pretty much ready to use them.

3. Create a form
Once again, I’m assuming most of you are already passed this step. But just in case, here is a link to a great tutorial on how to make React controlled forms.

Using Formik and Yup

1. Import Formik
At the top of the React component you want to use Formik in, you need to import it before you can use Formik.

import React from 'react';
import { useFormik } from 'formik';

const MyForm = () => {
// Your form logic will go here
};

export default MyForm;

2. Import Yup
For Yup we have 2 different options. Since Yup helps with data validation it creates a schema. We can write this schema in the same component or we can write it in another file and import it. Both have their pros and cons but in general if you have multiple schemas it’s probably in your best interest to create a separate file. To do this, you first want to create a new folder in your src folder called schemas. In your schemas folder you want to create a JSX file (most people would just call it index.jsx). In your index.jsx file, you want to import Yup just like this: import * as yup from 'yup'. We don’t have schemas yet but we’ll cover that later when it becomes applicable.

Application

1. Prefix
For demonstration, I’m going to make a simple sign up form which includes a username and password. In your project you can build upon these ideas no matter how many inputs your form has. Here is what my form would look like if I were to build it in React without formik or yup:

import React, { useState } from "react";

function SignupForm () {
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")

    function handleSubmit(e) {
        e.preventDefault();
        fetch(//your promise)
    }   

    return (
        <form autoComplete="off" onSubmit={handleSubmit}>
            <label>Username</label>
            <input 
                type="text"
                id="username"
                placeholder="Enter your username..."
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <label>Password</label>
            <input 
                type="password"
                id="password"
                placeholder="Enter your password..."
                value={password}
                onChange={(e) =>setPassword(e.target.value)}
            />
            <button type="submit">
                Signup
            </button>
        </form>
    )
};

export default LoginForm;

2. Creating a Schema
In our index.jsx file we created in the schema folder, let’s first create a schema or some validations we want to use in our form. Our file should look like this:

import * as yup from "yup"

To define our schema we want to type this:

export const schema = yup.object().shape({})

export will allow us to export this schema to any component it’s needed. Inside .shape({}) we are going to define our validations. Here is a simple validation schema:

export const schema = yup.object().shape({
    username: yup.string("Please enter a valid name").required("Required"),
    password: yup.string().min(5).required("Required"),
})

For username we are saying that it needs to be a string with .string() and it cannot be empty (or null) with .required(). Inside of those methods we type an error message as a string.
For password we are once again saying that it needs to be a string with .string and it cannot be empty (or null) with .required(). We also state that the password needs to be a minimum length of 5.

Our index.jsx will look something like this:

import * as yup from "yup"

export const basicSchema = yup.object().shape({
    username: yup.string("Please enter a valid name").required("Required"),
    password: yup.string().min(5).required("Required"),
})

3. Incorporating Formik
To use formik we declare it as so:

const formik = useFormik({})

We can destructure formik to access certain elements. First let’s focus on state management. Let’s destructure our formik variable:

const { values, handleChange, handleSubmit } = useFormik({})

There are more elements, but these are the basic ones we need. For state management, we no longer need useState. It’s now replaced by values and handleChange. Let's make our values:

const { values, handleChange, handleSubmit} = useFormik({
    initialValues: {
        username: "",
        password: "",
    },
})

Then change our form as so:

<label>Username</label>
<input 
    type="text"
    id="username"
    placeholder="Enter your username..."
    value={values.username}
    onChange={handleChange}
/>
<label>Password</label>
<input 
    type="password"
    id="password"
    placeholder="Enter your password..."
    value={values.password}
    onChange={handleChange}
/>

After we handle state management we need to add our schema here. Since we created a separate file, all we have to do is import and call it for the validationSchema:

import { basicSchema } from '../schemas'
// our component 
const { values, handleChange, handleSubmit} = useFormik({
    initialValues: {
        username: "",
        password: "",
    },
    validationSchema: basicSchema,  
})

Now let's add onSubmit function underneath validationSchema:

// our component 
const { values, handleChange, handleSubmit} = useFormik({
    initialValues: {
        username: "",
        password: "",
    },
    validationSchema: basicSchema, 
    onSubmit: (values) => {
    fetch(// your promise)
    },
})

You could also keep the onSubmit function separate like this:

const onSubmit = (values) => {
    fetch(// your promise)

const { values, handleChange, handleSubmit} = useFormik({
    initialValues: {
        username: "",
        password: "",
    },
    validationSchema: basicSchema, 
    onSubmit,
})

Conclusion

Formik and Yup are great tools to help make React forms more responsive and easier to manage. With state management, validations, and a cleaner syntax they can help enhance your project. For more information on Formik or Yup check out the documentation.

TDLR

//imports
import React from "react";
import { useFormik } from 'formik';
import { basicSchema } from '../schemas';

//form component
function SignupForm() {

//formik 
    // declare and destucture 
    const { values, handleChange, handleSubmit} = useFormik({
        // setup values
        initialValues: {
            username: "",
            password: "",
        },
        // setup schema/validation
        validationSchema: basicSchema, 
        // submit function
        onSubmit: (values) => {
            fetch(// your promise)
        },
    })
    //form
    return (
        <label>Username</label>
        <input 
            type="text"
            id="username"
            placeholder="Enter your username..."
            value={values.username}
            onChange={handleChange}
        />
        <label>Password</label>
        <input 
            type="password"
            id="password"
            placeholder="Enter your password..."
            value={values.password}
            onChange={handleChange}
        />
    )
}

//schemas folder => index.jsx 
import * as yup from "yup"

//schema for formik
export const basicSchema = yup.object().shape({
    // add validation for each value
    username: yup.string("Please enter a valid name").required("Required"),
    password: yup.string().min(5).required("Required"),
})

Sources

OOP Python for Dummies

Jesse Ilc — Tue, 27 Jun 2023 18:39:55 +0000

~For my TLDR people skip to TLDR (last section)~

Introduction

As beginner programmers, there's a substantial amount of information we need to learn and absorb. And I mean a SUBSTANTIAL amount. On top of the basic fundamentals etc., we also encounter different programming paradigms.

Programming Paradigms

"Programming paradigms are different ways or styles in which a given program or programming language can be organized."
-freecodecamp.org -- Germán Cocca

A popular paradigm, one that I'm sure many of you have heard before, is Object-Oriented Programming or OOP for short. If you've ever watched a Python youtube tutorial, you'll know exactly what I'm talking about. OOP has become quite popular due to its ability to organize code, enhance reusability, and improve maintainability.

Object-Oriented Programming

"In basic terms, OOP is a programming pattern that is built around objects or entities, so it's called object-oriented programming."
-freecodecamp.org -- Hillary Nyakundi

So, let's not waste your time and dive right in.

Defining a `class`

To start using OOP structure in Python we first need to define a class. To do this, first type class, followed by what we want to name our class, followed by colons. Here's what that looks like:

class ClassName:
    # Class attributes/constants  
    # Instance attributes
    # Constructor __init__
    # Instance and Class methods

Now that we know how to define a class let's talk about what goes into the class.

`init` Constructor

In order to properly instantiate(create) objects of our class (hence where OOP comes from), we're going to need to define a method called __init__. This method is known as a constructor and it allows us to initialize object attributes and perform any setup required for our class. Here's what that looks likes:

class VideoGame:
    # Class attributes/constants

    def __init__(self, game, system)
        # Instance attributes

    # Instance and Class methods

In the example above, I created a class called VideoGame which we're going to build upon.

self is referring to the instance of our class. Meaning it's referring to the instance object we're creating.

game and system are instance attributes. These are variables that are bound to the instance object itself. We'll dive deeper into this in the next section.

Instance Attributes

Now that we've defined our class and added our __init__ method, we can start adding some instance attributes. Here's what that looks like:

class VideoGame:
    # Class attributes/constants

    def __init__(self, game, system):
        self.game = game
        self.system = system 

    # Instance and Class methods

When we instantiate an object to our class, we're going to pass in parameters to match our instance attributes. So in this case, we would pass 2 parameters (game and system) which will be bound to that instance object. Instantiating an object looks something like this:

# instantiate 
game1 = VideoGame("TOTK", "Switch")

# view our game object
game1
# => <__main__.VideoGame object at 0x7f39496ae390>
game1.game
# => 'TOTK'
game1.system
# => 'Switch'

Here, we call VideoGame and pass in our 2 parameters which correlate to game and system. We assign this to a variable so we can access it's elements.

When we type game1, it returns the instance object. We can change this by using the function __repr__ to return something that human's can actually understand. I will cover this in the instance/class methods section.

When we type game1.game and game1.system, it returns our object's game and system that we instantiated respectively.

Class Attributes

Before we move on, let's talk about class attributes. These refer to variables that are shared between all instance object's of the class. This differs from instance attributes which are accessed only by the instance objects. Let's add a class variable to our class:

class VideoGame:
    games = []

    def __init__(self, game, system):
        self.game = game
        self.system = system 

    # Instance and Class methods

Here I made an empty list for the entire class. Let's add our instance objects to this list for future reference:

class VideoGame:
    games_list = []

    def __init__(self, game, system):
        self.game = game
        self.system = system 
        VideoGame.games_list.append(self)

    # Instance and Class methods

Now everytime we instantiate a new object, it'll be added to games_list. We can call games_list by typing VideoGame.games_list which will return a list of all instance objects in VideoGame. Right now it'll look something like this until we add the __repr__ function:

# instantiate object
game1 = VideoGame("TOTK", "Switch")

VideoGame.games_list
# => [<__main__.VideoGame object at 0x7f555c9467d0>]

Class Constants

Class constants are almost identical to class attributes. The key differences are that class constants are used to store data that doesn't change and the syntax used to define them requires all uppercase. Let's say for example our class only takes 3 options for systems; Xbox, Playstation, Switch. If the user tries to add a game from any other system it won't add it unless it's from our 3. Let's define a class constant with these systems and we'll write out our check_systems method later in class methods:

class VideoGame:
    # SYSTEMS_LIST = ["Xbox", "Playstation", "Switch"]
    games_list = []

    def __init__(self, game, system):
        # if self.check_system(system)
        self.game = game
        self.system = system 
        VideoGame.games_list.append(self)

    # Instance and Class methods

Let's move on to methods.

Instance methods

Instance methods are basically functions that you can call on any object within the class. Let's write 2 instance methods that will start our game and close our game:

class VideoGame:
    games_list = []

    def __init__(self, game, system):
        self.game = game
        self.system = system
        VideoGame.games_list.append(self)

    def open_game(self):
        return f"Booting {self.game} on the {self.system}"

    def close_game(self):
        return f"Closing {self.game} on the {self.system}"

Let's see what happens when we call these methods on a instance object:

# Instantiate object
game1 = VideoGame("TOTK", "Switch")

# Call our methods
game1.open_game()
# => 'Booting TOTK on the Switch'
game1.close_game()
# => 'Closing TOTK on the Switch'

After calling our instance methods(functions) they run on our instance objects. Our instance methods are very basic and just return an object's game and system however, these instance methods work like functions, which means they can be much more complex and take in additional parameters.

Class methods

Class methods are extremely similar to instance methods. The key differences are class methods refer to the class and not the instance object; also the syntax is different. If you recall our class constant from earlier SYSTEMS_LIST we can add a class method that checks if our object's system matches a system in our list. If it matches, we add the game to our list, otherwise we won't:

class VideoGame:
    SYSTEMS_LIST = ["Xbox", "Playstation", "Switch"]
    games_list = []

    def __init__(self, game, system):
        if self.check_system(system):
            self.game = game
            self.system = system
            VideoGame.games_list.append(self)

    # instance methods

    @classmethod
    def check_system(cls, system):
        return system in cls.SYSTEMS_LIST

To define a class method we first need to include @classmethod above our function. Instead of self (used for instance methods) we use cls (refers to the class) in our parameters. We also passed system from our instance object to see if it's in our list. If done correctly only objects with systems from our list will added:

# Instantiate objects
game1 = VideoGame("TOTK", "Switch")
game2 = VideoGame("MH World", "Playstation")
game3 = VideoGame("Metal Gear Rising", "PC")

VideoGame.games_list
# => [<__main__.VideoGame object at 0x7f8790df6e50>, <__main__.VideoGame object at 0x7f8790df6e90>]

`repr` Function

Okay, let's finally talk about __repr__. In the code above I have no idea what <__main__.VideoGame object at 0x7f8790df6e50> points too. If you do, that's great, but let's translate this into something regular humans can read. The syntax is very close to the __int__ method:

class VideoGame:
    # Class constants
    # Class variables
    def __init__(self, game, system):
        if self.check_system(system):
            self.game = game
            self.system = system
            VideoGame.games_list.append(self)

    def __repr__(self):
        # '+\' combines our lines together
        return f"Game(game={self.game}, " +\
            f"system={self.system})"

    # Instance methods
    # Class Methods

The parameter we pass is self and the function will return a string with our instance object's game and system. Now instead of returning the instance object itself we get something that's readable:

# Instantiate objects
game1 = VideoGame("TOTK", "Switch")
game2 = VideoGame("MHW", "Playstation")
game3 = VideoGame("Metal Gear Rising", "PC")

VideoGame.games_list
# => [Game(game=TOTK, system=Switch), Game(game=MHW, system=Playstation)]

Conclusion

OOP can be daunting at first, with all it's new vocabulary. In theory everything sounds so simple but in practice it's a whole nother story. I hope this read helped you out a little bit to better understand OOP in Python. If you want to see a short summary of everything you can read the TLDR section. Happy coding!

TLDR

~Key Vocab~

Python class:
a blueprint or template for creating objects (instances).
Instance Object:
a specific occurrence of a class.
Instantiate:
another word for create.
Class Attributes:
varibales bound to the class. Accessible to all instances.
Class Constants:
varibales bound to the class(data cannot be changed).
Constructor __init__:
used to initialize objects attributes and perform other set up.
Instance Attributes:
variables bound to the instance.
__repr__ Function:
a function that makes instance objects readable.
Instance Methods:
functions that are bond to the instance(takes self as argument).
Class methods:
functions that are bond to the class(takes cls as argument).

~Example~

# Python class
class VideoGame:
    # Class Constants
    SYSTEMS_LIST = ["Xbox", "Playstation", "Switch"]
    # Class Attributes (All instance objects in class can access)
    games_list = []

    # Constructor (initialize Object Attributes and other set up) 
    def __init__(self, game, system):
        # Refers to Class Method check_system
        if self.check_system(system):

            # Instance Attributes
            self.game = game
            self.system = system

            #adds to game_list Class Attribute
            VideoGame.games_list.append(self)

    # Makes Instance Object's readable
    def __repr__(self):
        return f"Game(game={self.game}, " +\
            f"system={self.system})"

    # Instance Methods
    def open_game(self):
        return f"Booting {self.game} on the {self.system}"

    def close_game(self):
        return f"Closing {self.game} on the {self.system}"

    # Class methods 
    @classmethod
    def check_system(cls, system):
        return system in cls.SYSTEMS_LIST

# Instantiate objects
game1 = VideoGame("TOTK", "Switch")
game2 = VideoGame("MHW", "Playstation")

# Omitted from game_list due to system (refer to check system)
game3 = VideoGame("Metal Gear Rising", "PC")

Sources

How to: React Hook useState

Jesse Ilc — Tue, 09 May 2023 20:22:47 +0000

What, When, Why?

As a web developer, many are familiar with the Javascript library known as React. You may have also heard of React Hooks. Since their introduction in React 16.8 (released Feb. 16, 2019), they've become an integral part of the React environment. These Hooks can be extremely useful and provide a lot of functionality. In this blog, I will cover the React Hook known as useState discussing how to set it up and how to use it.

React Hooks

“React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side-effects.” - freecodecamp.org

What is useState?

The React Hook useState allows us to add and access the state of functional components. So how does this help us? It allows our data to be dynamic. Which in return, grants us the ability to re-render and update our application based on events or something that the user has done. Let's take for example a counter app. If a user clicks on a button to increment the counter we want to update the counter dynamically. We can do this with useState. When it comes to the debate whether to use prop or state, you can ask yourself these 3 questions:

The Questions

Is it passed in from a parent via props?

Can you compute it based on any other state/props in your component?

Does it remain unchanged over time?

If you answer no to all of these questions, then you should probably use useState.

The How To

Let's talk about how to incorporate useState into your code. We'll use our counter component from earlier as an example. Here's what that component might look like without useState:

import React from 'react'

function Counter () {

   let count = 0;

   function handleClick () {
      count++; 
   }

   return (
      <div>
         <p>{count}</p>
         <button onClick={handleClick}>press to increase</button>
      </div>
   );
};

Although this is functional, our component is not actually re-rendering as we increment. Also, the count variable goes back to 0 as soon as we refresh the page. Let's add state to fix these issues.

Import it

First we need to import useState into our component. This is pretty straightforward; at the top of your code (or in whatever component you need it) you want to import it from React by using the destructing syntax (aka this one { } ). This is what that would look like:

import React, { useState } from 'react'

Declare it as a variable

Next we want to replace our count variable with our useState variable. To do this, we can call the useState hook by using the array destructuring syntax. This is what that would look like:

const [count, setCount] = useState(0);

The reason why we use brackets for useState is because it will always return an array with 2 variables:

a reference to the current value of that state in React's internals

a setter function so we can update that state

Technically, the name of the reference and setter function are arbitrary so feel free to call them whatever you like. As good practice you use the naming convention for the setter function as 'set' followed by the reference variable name. Another neat thing is that you can set the initial useState to various different data types; strings, objects, arrays, numbers, booleans, empty or not can all be set as the initial useState.

Setting the state

Now that we've called the useState hook into our component we need a way to update the state and re-render the page with the correct value. This is where our setter function comes in handy. All we need to do is pass our state and increment it by 1 inside our handleClick() function:

function handleClick() {
   setCount((count) => count + 1);
}

After incorporating all these steps, we should now have a working increment button that updates our count state dynamically as the user clicks the button. Even if the page is refreshed the count state will remain the same. Here is the code as a whole:

import React, { useState } from 'react'

function Counter () {

   const [count, setCount] = useState(0);

   function handleClick () {
      setCount((count) => count + 1); 
   }

   return (
      <div>
         <p>{count}</p>
         <button onClick={handleClick}>press to increase</button>
      </div>
   );
};

Mutating State!!

Let's talk about the setter function for one moment. From React's documentation, it's written:

"But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you need to create a new one (or make a copy of an existing one), and then set the state to use that copy." - React Docs: Updating Objects in State

In the example earlier, our setter function does the following:

Creates a copy of the state

Add's 1 to the copy

Set's the copy state as the state

This is important to keep in mind. If I tried to just update the state like this:

function handleClick () {
   count++
   setCount(count); 
}

the component doesn't actually re-render with a new value. The reason this happens is because we're not providing a new value to setCount when it's called. Even though we mutated the value, its value did not change in memory. Setting the state with the same value won't make React re-render our component.

Conclusion

So let's review.

1. When to useState

If you answer no to all of these:

Is it passed in from a parent via props?

Can you compute it based on any other state/props in your component?

Does it remain unchanged over time?

2. Import it

import React, { useState } from 'react'

3. Declare it

const [count, setCount] = useState(0);

4. Set it

setCount((count) => count + 1);

Hopefully this helps. Good luck on your coding journey!

References

Declaring variables in JavaScript (What happens when you don’t)

Jesse Ilc — Mon, 20 Mar 2023 16:37:01 +0000

TLDR people read the last sentence.

As you may know when coding in JavaScript, variables are used extremely often. For those who don’t know, a variable is basically a container used for storing data. When working with variables in JavaScript, they are typically declared using one of the following: const, let or var(usually typed in lowercase). const and let were recently introduced in 2015. Prior to this there was only one way to declare variables, which was var. In essence, const and let made it easier to catch certain errors that were caused by var.

Function Scope

"When a variable is declared inside a function, it is only accessible within that function and cannot be used outside that function"

Block Scope

"A variable when declared inside the if or switch conditions or inside for or while loops, are accessible within that particular condition or loop"

const declares variables and makes it so that it cannot be reassigned. let, on the other hand, declares variables that can be reassigned. var is similar to let where variables declared with it can be reassigned. There are more differences but these are just to name a few. Let’s see an example on how declaring variables work:

const number1 = 25
let number2 = 50
var number3 = 75

console.log(number1) 
// 25
console.log(number2) 
// 50
console.log(number3) 
// 75

Seems simple enough. So, what happens if you don’t declare a variable? What if you just assign the variable a value? Is it possible to reference these variables later? Well, let's try it:

number = 25

console.log(number)
// 25

It works just as if it had been declared by const, let or var. Why is this happening? Is declaring variables optional?

Even though technically you can assign variables without declaring them… ~PLEASE DON'T DO THIS~ You should always declare variables using const, let, or var. So what’s going on here? Why is this working? Basically, when you don’t declare the variable explicitly in JavaScript, it will declare it for you implicitly.

Explicit

"Stated clearly and in detail, leaving no room for confusion or doubt"

Implicit

"Implied though not plainly expressed"

Even though it’s best practice to declare your variables, let’s explore how the code will function if you don’t.

So how is JavaScript treating an undeclared variable? Is it treating it like const? Let’s test and see if you can reassign the variable to a new value if it’s not declared:

number = 25
console.log(number)
// 25
number = 50
console.log(number)
// 50

As seen above, if the variable is not declared it can be freely reassigned without throwing an error. So we know that this works similarly to let and var. Let’s take another step by testing its scope.

Scope

“a concept that refers to where values and functions can be accessed”

Let’s write ourselves a function to test some things:

let number = "global"

function test(){
    let number = "local"
    console.log(number)
}
test()
// local 
console.log(number)
// global

let number = "global"

function test(){
    var number = "local"
    console.log(number)
}
test()
// local 
console.log(number)
// global

let number = "global"

function test(){
    number = "local"
    console.log(number)
}
test()
// local 
console.log(number)
// local

Global Scope

"A variable declared outside a function, becomes GLOBAL"

Local Scope

"Variables declared within a JavaScript function, become LOCAL to the function"

In the cases above we set a global scoped variable equal to 10 and a function (local) scoped variable equal to 20. Scope in JavaScript works like a reverse waterfall. If a variable is declared globally everything down the scope chain has access to it. But it doesn’t work in reserve. So the globally scoped variable should not have access to the variable that is function(local) scoped. When let or var is used the global variable remains the same, but when it’s not declared the global variable is now changed. You can see how this can potentially be dangerous. Whenever you don’t declare a variable you run the risk of changing that variable’s value when it’s not intended.

Let’s revisit the topic of scoping and discuss how it works. Take a look at the diagram below:
A-1

These words may look intimidating but trust me, these definitions for the most part are easy to understand.

Lexical Scope

Lexical scope means that the variable is scoped in the place where the code was created. In diagram A-1 above, you can see that each of the variables is colored in a different shade of gray. This signifies that each variable is scoped in the block/function it was created.

Scope Chain

The next topic diagram A-1 is referring to is the scope chain. This comes back to the reverse waterfall I mentioned earlier. function g() has access to all the variables up the scope chain: function f() and global object var x=1. But the reverse isn’t true. The global object var x=1 cannot access function f() or function g().

The next topic diagram A-1 is referring to is variable lookup. It displays how the computer is working in reference to the scope chain. It will search for the declared variable (or object in this case) up the scope chain until it finds a match. Once a match is found the computer will get the value that was assigned to the variable in that particular scope.

Lexical Scope - reference

Scope Chain - reference

Varaible Lookup - reference

In conclusion, you should always declare your variables using const, let or var in JavaScript. Even though the language will implicitly declare them for you, this can lead to unpredictable behavior and create errors that are extremely difficult to detect. JavaScript will treat undeclared variables as global variables which can unintentionally be changed in the future. On topics discussing scoping, lexical scope refers to the place in which your variable/object was created. Additionally, lexical scope works in conjunction with the scope chain. We know that the scope chain is like a reverse waterfall, where the bottom of the chain has access to the entire scope chain but the top does not. We learned how the computer will search for the declared variable up the scope chain until a match is found through variable lookup.

For more information on variable declaration check out w3schools.

Oh and for my TLDR people:

Forem: Jesse Ilc

Docker with Python for Dummies

Overview

Prerequisites

Step 1: Python Project Structure

Step 2: Dockerfile / .dockerignore

Step 3: Building The Docker Image

Step 4: Run your Docker Container

Conclusion

TLDR

Sources

How to Use Formik and Yup in Your React Project

For my TLDR people skip to the TLDR section.

Intro

Set up

Using Formik and Yup

Application

Conclusion

TDLR

Sources

OOP Python for Dummies

Introduction

Defining a class

__init__ Constructor

Instance Attributes

Class Attributes

Class Constants

Instance methods

Class methods

__repr__ Function

Conclusion

TLDR

~Key Vocab~

~Example~

Sources

How to: React Hook useState

What, When, Why?

React Hooks

What is useState?

The Questions

The How To

Import it

Declare it as a variable

Setting the state

Mutating State!!

Conclusion

1. When to useState

2. Import it

3. Declare it

4. Set it

References

Declaring variables in JavaScript (What happens when you don’t)

TLDR people read the last sentence.

Function Scope

Block Scope

Explicit

Implicit

Scope

Global Scope

Local Scope

Lexical Scope

Scope Chain

ALWAYS DECLARE YOUR VARIABLES!

References:

Defining a `class`

`init` Constructor

`repr` Function