DEV Community: Keith Capers

Using Recoil Basics

Keith Capers — Wed, 29 Jan 2025 05:59:52 +0000

State management is 1 of the most important parts of using React and being a frontend developer. In React, global state refers to data that can be accessed and modified by any component in your application, regardless of their position in the component hierarchy. If you have been developing for a little while then you know just how great this functionality is in comparison to passing down props. It's so great React has its own state management tool built in, called Context-API. But like with everything else that's great people try to improve upon it. And more and more versions of the thing get created. This brings us to the global state management library I used recently called Recoil.

Recoil is a state management library for React applications. It was developed by Facebook and provides a simple and efficient way to manage global state in your React apps. Recoil runs on Atoms, an atom holds a piece of data and can be subscribed to by components. When working with atoms it's best to create an atoms component where you can hold them all, and they can be imported by every component. An atom is a variable that is made up of 2 parts a key and a default value. To demonstrate we will make an atom that holds a list of names.

import { atom, selector } from 'recoil'


export const nameState = atom({
    key: 'nameState',
    default: [],
})

Above is a basic recoil atom. Notice at the top of the component you see we import atom from recoil. After that, we declare a variable equal to atom. From there we make our object with a unique key(The easiest thing is to make it the state name) and a default value, and just like that we have a recoil atom being exported that can be imported in other components.

Now that the atom is made there are a few more steps to have the ability to use nameState in another component, and the first is to wrap your main component like App in RecoilRoot.

import { RecoilRoot } from 'recoil';
import React from 'react';


function App () {

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

export default App

This is step 2 of getting our atom up and working. In your parent component, you want to import RecoilRoot from recoil and wrap the div of your app component in RecoilRoot. If you are doing a bigger project you will want to wrap your router provider in RecoilRoot which maybe in your index.js file.

At this point you are pretty much all set up to use the atom but there is 1 more part that needs to be done in order for you to be able to use it and that's to create a function to hold and set state in the component you would like to use it.

import { atom, useRecoilState } from 'recoil';
import { nameState } from './Atom'


function NameList() {
  const [names, setNames] = useRecoilState(nameState);


}

export default NameList;

This is the last piece of the puzzle, in the component notice we now import useRecoilState and in parenthesis we have its default set to the atom we created before. From there we create a setter which you see as setNames and names that will hold the list of names. After this last part is set up you can use names to represent the list of names all throughout your code by using another hook called useRecoilValue, which can be done like this.

import { atom, useRecoilValue } from 'recoil';
import { nameState } from './Atom'


function DifferentComponent() {
  const names = useRecoilValue(nameState);


}

export default DifferentComponent;

After all of these pieces are done we can now get this list of names through global state. At this point, I'm sure you see how powerful this state management tool can be. The ability to be able to access data from anywhere in your code is invaluable and although there are a couple of other state management tools recoil maybe the 1 for you. Once you have got the basics down you can dive into a lot of other parts of recoil. For example if you noticed in our atom you see I left in importing a selector, which is derived state in Recoil. Selectors allow you to compute values based on one or more atoms. Once you really dive in you will see a lot more things that may make recoil the global state management library for you.

RESTful GET and POST Requests: A Beginners Guide

Keith Capers — Tue, 07 Jan 2025 21:12:55 +0000

If you are building a web app chances are you will need to work with API's at some point. API's (Application Programming Interfaces) allow different systems to communicate with each other, and REST(Representational State Transfer) is one of the most popular design patterns.

Two of the most commonly used HTTP methods in an API are a GET and POST. In this guide, I will be breaking down to you how to use both of them in your Flask app.

What is a GET Request?

A GET request is the most common HTTP request method. It signifies that the client is attempting to view the located resource. For example when you open a website or search for something on Google or your favorite website your browser sends a GET request to the server for the info it needs to be displayed to the page. In your Flask app you will use a GET request to get the data from the database you create.

What is a POST Request?

A POST request is the second most common HTTP request method. It signifies that the client is attempting to submit a form to create a new resource. So that means when you click "Submit" on a contact form or add a comment on twitter, your browser is sending a POST request with the data you input into the server.

Now that we know all of that information we will take it slow and create a simple Book Library app.

Book Library

In the Book Library app we will be,

Retrieving a list of books which will be the GET request.
Adding a new book to the list of books which is our POST request.

After these steps the user of our app will be able to see a nice long list of books, like The Great Gatsby, Of Mice and Men and Lord of The Flies. And if they wanted to add another book like The Scarlet Letter the server adds the book to the database, and the user will see the newly added book in the list of books the next time they make a GET request.

Step 1 Creating the GET endpoint

To be able to fetch the list of books we will create a route that handles
GET requests.

class Books(Resource):

    def get(self):

        response_dict_list = [n.to_dict() for n in Book.query.all()]

        response = make_response(
            response_dict_list,
            200,
        )

        return response

api.add_resource(Books, '/books')

Some key points to look at here are:
1) The method is specified at the top with def get.
2) response_dict_list is a variable that is querying the database to get all of the books from Book, in a list comprehension.
3) The use of to_dict() which helps turn each book object into dictionary format.
4) And lastly the route for our browser which is '/books'.

Step 2 Creating the POST request

To be able to allow users to add a new book to the list, we will create our POST request which we will keep at the same endpoint.

def post(self):
    new_book = Book(
        title=request.form['title'],
    )

    db.session.add(new_book)
    db.session.commit()

    response_dict = new_book.to_dict()

    response = make_response(
        response_dict,
        201,
    )

    return response

As you can see again we define the method at the top. But what is different here is that we create a new_book variable that allows us to add a new title. After that we add the new_book and complete the transaction with the db.session.commit(). Again we want our data to be in dictionary format so we call .to_dict() on that new book before returning it for a response.

After those 2 steps are done all that's left would be to test the endpoints in your browser! Once you do that you will see that GET is the perfect way to retrieve data from a server and POST is the perfect way to create new data and send it to the server.

Conclusion

All in all together these two methods form the basis of a lot of your favorite apps since most use RESTful API's, they allow users to easily interact with there app. GET and POST requests may seem difficult to learn but once you break them down they really are not difficult to understand. Here I showed how to do 2 different HTTP request methods and while there are a few more like a PATCH request which is an HTTP request method that signifies that the client is attempting to update a resource with new information. And DELETE request an HTTP request method that signifies that the client is attempting to delete a resource. With just these 2 you are on your way to making some nice flask apps with a lot of the modern day functionality that you need.
_

Beginners Guide for Classes

Keith Capers — Wed, 20 Nov 2024 18:37:07 +0000

Classes are essential. They are the blueprint for creating objects, which is the core element of OOP(Object Oriented Python). Classes help keep your code organized and are defined as a bundle of data and functionality, which can be copied and modified to accomplish a wide variety of programming tasks. Due to just how important classes are we will be looking at how to create them and a couple of pieces that help make them up.

How To create a class

Creating a class is pretty easy to do, all you will do is define it with the keyword "class" and then the name you would like to give said class followed by a colon.

class Fruit:

Class names always start with a capital letter and if it is more than 1 word we will use UpperCamalCase. Congrats! With that you have successfully created a class.

Init and Self

The next thing your class will need is to use the init method. The init method is invoked when a class is initialized and every class has one, it comes after the "def" keyword and the word init has 2 underscores on each side, and ends with a colon.

class Fruit:

     def __init__(self):

Init takes in arguments that are used as attributes of the class which help us customize our instances to how we want them, and this is where self comes into play. Self is a keyword that refers to the instance of a class, in the case of our Fruit class example it would be say an apple if we were creating one in python. Self also allows you to access the attributes and methods of the class.

Attributes and methods

Attributes are variables that belong to an object. For example, in our fruit class, all fruit have a name and a color so these 2 can be our attributes. When adding attributes you put them next to self as parameters and when paired with self we make it so that each new fruit we add in gets created with the name and color we assigned.

class Fruit:

     def __init__(self, name, color, brand):
         self.name = name
         self.color = color
         self.brand = brand

But now that we have the attributes we may want the instance or fruit to do something and that's where methods come in. Methods are functions designed within a class and can be used to define the behavior of an object. Methods can access and manipulate the data attributes (variables) of the object they belong to using the self parameter. To make a method you would start it off with the def keyword and then the method name followed by a colon.

def method_name(self):

Now that we know how to create a class and some basic parts of creating 1 let us make an instance called "favorite fruit" that will initialize with some attributes and a method to display it to everyone. When we create the instance we are going to set it up like a variable, it will be favorite_fruit = Fruit("Apple", "Red", "Granny Smith"). As you can see when we create the instance we use "Fruit" which is the name of the class, followed by () which have 3 arguments matching the attributes we set in init to initialize with. This will give the instance all of the info we set it to. After that we will print favorite_fruit.display_fruit(), If you are asking why that's a good question. After we have created the instance it is now the an instance of Fruit and because it is an instance of fruit we can call an instance method on it which in this case will be display_fruit and to invoke the method we use (). So now that we know that lets put it all together and see the finished product.

class Fruit:

    def __init__(self, name, color, brand):
        self.name = name
        self.color = color
        self.brand = brand

    def display_fruit(self):
        return f"Keith's fav fruit is: {self.name}, {self.color}, {self.brand}"



favorite_fruit = Fruit("Apple", "Red", "Granny Smith")
print(favorite_fruit.display_fruit())

Once you run that in your terminal you will see:

Keith's fav fruit is: Apple, Red, Granny Smith

And with that, you know some of the basic parts of a class and can do some on your own. Classes can get a lot more complicated and do a lot more than we just did here but the purpose remains the same. I am sure you can see that it does not matter how many people or how many fruit you have, once the class is created and set up the way you want it you can print as many instances of the Fruit class as you would like and can display the favorite fruits of everyone without needing to repeat a bunch of code. I hope you found this helpful thanks for reading.

React State

Keith Capers — Sat, 07 Sep 2024 02:09:15 +0000

An Intro to React State

Hey new developers today I wanted to talk about a core functionality and one that is vital to react and that is state. This is one of the first things you will encounter when learning react and is essential when it comes to building more dynamic projects. Knowing how to use it properly is important and so today in this blog post we will explore the basics of what state is so we can use it effectively.

What is State?

State is a dynamic way to store information within a component that can change over time. Not to be confused with props, which is data passed down from a parent to a child, and will not change during the component's life. State allows a component to maintain and update data and when the state changes it triggers react to re-render, to reflect the new information and then that new info is stored in the place of the old data. State to me is like the "memory" of a component and can store multiple types of data such as strings, numbers, arrays, objects etc and because it can do all of this I'm sure you can see why it's useful.

Setting Up State

Now that we know what state is let me tell you how to set it up. All of the state for your application is held in React's internal code. Whenever you have a component that needs to work with state, you must first tell React to create some state for the component. For that you’ll use the useState hook, which is a function that allows you to hook into reacts internal state so we can add it. Here's a simple example:

import React, { useState } from 'react';

function Counter() {

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

  return (
    <div>
      //some code
    </div>
  );
}

export default Counter

In this example, first we import the useState hook from React(make sure to put the curly braces around useState). After that you create a variable inside brackets[] and make the contents = to useState with parenthesis after it so you can set the initial state. Next, you see a state variable called "count" and a function called setCount which is used to do exactly what it says, and that's set/update count(or whatever you would name it). We also initialized count to 0 by passing 0 as an argument to useState(0).

Why Use State and Managing complex state?

State is vital in React because it allows your application to be dynamic. Without state, your components and projects would not have all the modern functionality of applications today. The more advanced your apps and projects, you might find that you need to manage more complex state involving multiple variables. In these cases, you can use multiple useState calls.

Here’s an example of using multiple useState hooks:

import React, { useState } from 'react';

function UserProfile() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [email, setEmail] = useState('');

  return (
    <div>
      <input 
        type="text" 
        placeholder="Name" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
      <input 
        type="number" 
        placeholder="Age" 
        value={age} 
        onChange={(e) => setAge(Number(e.target.value))} 
      />
      <input 
        type="email" 
        placeholder="Email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <p>{`Name: ${name}, Age: ${age}, Email: ${email}`}</p>
    </div>
  );
}

export default UserProfile;

In this UserProfile component, we’re managing three pieces of state: name, age, and email. Each input field updates its corresponding state variable, and the component re-renders to show the updated user profile information.

Conclusion

I'm sure after this introduction to state you can see that state is a fundamental concept in React that you’ll use frequently as you build complex applications. By understanding how to use and manage state effectively, you’ll be well on your way to creating dynamic projects. So I recommend you get started asap working on it so that you will be an expert in no time!

Attention to Detail

Keith Capers — Mon, 22 Apr 2024 13:08:59 +0000

I have finally finished Phase 1 of Flatiron School, and after being on this Phase for way longer than the recommended time, I can say it was well worth it, and I feel a bit of triumph! Flatiron Schools Software Development Flex Coarse Phase 1 is all about being proficient in JavaScript and learning how to think like and become a great developer. This course teaches you a lot and if you are new to coding like me it can be overwhelming luckily there are instructors to help out and the tests are good practice to help you get the hang of things. Now, all of this leads up to the Phase 1 project, which, I'm not going to lie, is tough if you don't pay attention to detail. To make sure you know what to pay attention to, I will highlight some parts of the curriculum that will help you get through the project a little faster than I did.

Now, I turned this 5k into a 10k by not completely grasping a few concepts right away, and the first 1 is CallBacks.

Now, I'm sure you can see the definition above of what a callback is; this is something you need to pay extra attention to; when you get to this section, take notes and lean on a technical coach if you do not understand what is going on. Throughout this Phase, you will be using callbacks quite literally almost every step of the way, and if you are like me and some other students I've spoken to, you will need to use 1 in your project. This concept is crucial in JavaScript for handling asynchronous operations, such as fetching data from an API or using a JSON file.

I can't tell you exactly how you will use callbacks in your project code because I don't know the direction you will take. Also, it may be cheating, and because this is the first blog I'm doing, I kind of want it to pass. That being said, I can tell you what else I think is important to pay attention to, and that is array iterator methods.

The array iterator methods are essential and will be used a lot from the moment they are introduced until the end of the Phase. All of them are great and make life so much easier. In your Phase 1 project, you will be asked to use one of the iterator methods, so this is something you should pay extra attention to. Using 1 will be required, so knowing exactly how and when to use 1 will be key.

Array iterator methods in JavaScript are used to iterate over the elements of an array, and in your project, you may need them to find or filter through an object to get a specific person or thing. Because I had to use the filter method myself, I'm going to put that here just because it may be very useful.

Everything I have mentioned is important, but I'm not done just like you won't be if you don't take this course seriously. The next thing I think you should pay extra attention to is DOM Manipulation.

I'm pretty sure you looked at this image and started shaking in your boots. I know this because once I got to this point, I was sure this was what I had seen years ago as an error message, but no, this is what is called the DOM. When DOM manipulation comes up, you want to know it inside and out because it's the foundation of every website, and you are asked to create 1. What I found difficult at first in this section was how everything fit together; you see a bunch of elements, but which element should be used and when was challenging to me at first. I found myself not getting how to make things show up on the DOM, and you will see soon enough that everything that is on the DOM is what shows up on the page; so, no matter how solid I thought my JavaScript was, I couldn't move on if I couldn't see it. But then I went back and looked at the Phase, and it hurt me (because I should have paid attention to the details before). It made me happy that it was all in the curriculum. So, I will leave these two images with you. The first is to make the DOM look a little less intimidating by explaining how the DOM is like a tree, and the next is the start of a section that I had to read again, and because I read a second, third, and fourth time, was able to complete the project.

You would think that would be everything you need to know regarding the project, but no. The last very important thing is knowing how to use fetch. Fetch will be used to get the data from an API or a JSON file, which is where the info for your project will come from. In FlatIron School's flex program, there are resources, and in the resources section, you will see a video that will help you set up your project. One of the instructors makes the video, and he will say that setting up the fetch is 1 of the first things you should do, and I agree entirely. Having all the info you want showing up in the console for me was huge, it let me know that a large portion of the battle is done. My project was done on NBA players, and once I could get that info back from the fetch, it was just getting that to the DOM, and 1 of the biggest hurdles were cleared.

These are some of the most important pieces in the Phase, and learning and comprehending each of these concepts will make the project a breeze for you. Although these are the most important things, I feel it would be wrong to not bring up a couple of things that will really help you along the way. The first thing I feel should be brought up is something that was told to me toward the end of the course and I have been putting it to good use and that is the Feynman technique. One of the instructors, Mr. Ryan Perish, told me about this technique, which is a study method developed by Richard Feynman, aimed at learning through the act of teaching. The last thing that I'm sure you will need, and therefore, it deserves to be an honorable mention, is simply asking for help from instructors and your classmates. This can help you get a different perspective and get the answer you are looking for.

That is it! Not too bad, right? These are all the things I think you should pay attention to. Whether you are reading this at the beginning of your FlatIron journey or at the end of the course, you know exactly where to pay attention to detail!