Forem: Stephen Carter

Uploading Images in React

Stephen Carter — Sat, 30 Sep 2023 14:43:11 +0000

One of the requirements for my final project at Flatiron School was to incorporate something that had not previously been taught in the coursework. Due to my love for beautiful design, I chose image uploading to complete this requirement. Thinking through the request-response cycle, I needed to learn how to select an image through the file browser, how to upload the image through a POST or PATCH request, how to store the image in the database, and how to return the image with a GET request.

Setup

Before we go any further, my app is built with:

React v18.2.0
Ruby v2.7.4
Rails v7.0.5

File Selection

While I actually started with the backend in my own learning process, I thought it made sense to present this tutorial in the order of the request-response cycle.

In addition to being able to access the file browser to select an image to upload, I also wanted to be able to drag'n'drop that image as well. While researching a few options, I came across react-dropzone, a "Simple React hook to create a HTML5-compliant drag'n'drop zone for files." Installation was easy, and the docs were well-written with many examples of different applications.

Initially, I had hoped react-dropzone was an uploader as well, but upon further reading of the docs, I discovered it was not. The docs do recommend other uploaders, but as I learned soon after, uploading in React is super easy.

I created a DropZone component to be used in various forms throughout my application. This component receives a setState prop used in the useCallback hook. While the DropZone can handle files of any type, I customized mine to accept images only.

import { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

function DropZone({ setState }) {
  const onDrop = useCallback(acceptedFiles => {
    setState(acceptedFiles[0])
  }, []);

  const {getRootProps, getInputProps, isDragActive} = useDropzone({
    onDrop, 
    accept: {'image/*': []}
  });

  return (
    <div {...getRootProps()} className={isDragActive ? 'active' : ""}>
      <input {...getInputProps()} />
      {
        isDragActive
          ? <p>Drop the file here ...</p> 
          : <p>Drag 'n' drop an image here—or click to select file</p>
      }
    </div>
  );
}

export default DropZone;

This is a simple use of react-dropzone. It has many more options including the ability to preview the image after it's been loaded in state.

With the image file selected and successfully in state, the next objective was to upload it to the server.

Attach & Fetch

This step took a bit of research. With a normal POST or PATCH request, I would use JSON.stringify() in the body of the request. However, when it came to attaching the file, that solution was unsuccessful.

Instead, I used the FormData constructor and its append() method to attach the image file.

function handleImgSubmit(e, setErrors, form, img, setUser) {
    e.preventDefault();
    setErrors();

    const profile = new FormData();
    profile.append('first_name', form.firstName); 
    profile.append('last_name', form.lastName);
    profile.append('phone', form.phone); 
    profile.append('city', form.city);
    profile.append('state', form.state);
    profile.append('bio', form.bio);
    profile.append('venue_id', form.venueId);
    profile.append('video_url', form.videoUrl);

    if(img) {
        profile.append('avatar', img);
    }

// Important! Do not add headers to fetch requests when using FormData()
    fetch("/profiles", {
        method: "POST",
        body: profile
    })
    .then(r => {
        if(r.ok) {
            r.json().then((data) => { setUser(data) });
        } else {
            r.json().then((err) => setErrors(err.errors));
        }
    });
}

This method works flawlessly when sending files to the backend. Notice the fetch request does not include headers, or JSON.stringify(). The FormData constructor takes care of both of these concerns and submitting the fetch request with headers will result in a server error. FormData can be used with any request whether a file is attached or not. It saves a bit of coding when refactored like this example.

const data = new FormData();
Object.keys(form).map(key => data.append(key, form[key]));

With the frontend complete, the next step is to create a place for the file to land.

Managing the Database

There are many different ways to manage file storage on the backend. Since my backend is a Rails API, I thought it made sense to use Active Storage. As stated in the docs, image processing transformation requires third-party software and an image_processing gem. Active storage allows easy configuration for online storage services offered through Amazon, Google, or Microsoft Azure.

In order to associate an image with a record, use the has_one_attached macro.

class Profile < ApplicationRecord
  belongs_to :user
  belongs_to :venue
  has_one_attached :avatar
end

Rails 6.0+ also allows for a migration to include attachment as the attribute type. rails generate model Profile avatar:attachment

In the controller, call avatar.attach to attach the image file to the profile.

class ProfilesController < ApplicationController
  def create
    profile = @current_user.build_profile(profile_params) if @current_user.profile.nil?
    profile.avatar.attach(profile_params[:avatar]) unless profile_params[:avatar].nil?
    venue = Venue.find(profile_params[:venue_id])
    venue.profiles << profile
    profile.save!
    render json: @current_user, status: :created
  end

  private
  def profile_params
    params.permit(:avatar, :first_name, :last_name, :bio, :phone, :city, :state, :venue_id, :video_url)
  end
end

Now, the image file is attached and associated with the proper record. How do we send it back to the frontend?

The Response

Once the file has been uploaded to the server, it’s time to send it back to the frontend. What actually gets sent to the front end is not the file, but rather, a link to the file’s location on the server. Working with the link on the front end is just like working with a link to any other URL.

Rails includes a helper to access the URL for the attached image file. First include the helper in the class. Then create a private method using the url_for helper to access the image file's URL.

class ProfileSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers

  attributes :id, :avatar, :first_name, :last_name, :phone, :city, :state, :bio, :video_url
  has_one :user
  has_one :venue

  private
  def avatar
    url_for(object.avatar) if object.avatar.attached?
  end
end

Now the URL for the image file will be serialized when the controller renders a JSON.

Conclusion

So that's it! From front to back and back to front, working with image files is relatively straightforward. Utilizing React hooks like react-dropzone makes it very simple to put together a slick file selector. The FormData constructor handles the frontend attaching, and Active Storage manages the server-side associations and access. Returning the image is now simply returning the URL for the image. Hope this blog helps. Happy coding!

Credit

Photo by Rirri on Unsplash

Routing in Rails

Stephen Carter — Mon, 10 Jul 2023 21:36:43 +0000

Introduction

Routing is the means of navigating one or more networks. In full-stack Rails applications one routing system handles the full request/response cycle. In Rails API applications, separate routing systems handle the client and server. Routing is simplified when using RESTful conventions, and Rails provides a resources macro to further streamline the process. Custom routes fill the gaps conventions leave.

Rails Route Components

A Rails route has four components: verb, path, controller, and action. The syntax is as follows and written in the config/routes.rb file of a Rails application.

# app/config/routes.rb
Rails.application.routes.draw do

  verb '/path' to: 'controller#action'

end

Verb

The first component of a route is an HTTP verb: GET, POST, PUT, PATCH, DELETE. Verbs communicate the type of request a client is sending to the server.

Path

The second route component is the path. A path communicates the resource endpoint the client request is accessing. In RESTful routes the path always include a plural endpoint: /users, /students, /goals. RESTful endpoints can also be followed with an id: /users/:id.

Controller

The third component is the controller. It follows the to: key and directs the request to the appropriate controller. In RESTful routes the endpoint and the controller are typically the same: '/students' to: 'students#action'. Just as RESTful endpoints are plural, controller names are plural as well.

Action

The fourth and final route component is the action. Actions are basically methods for controllers. This final element of the route sends the request to the appropriate action within the controller. In RESTful routes the action is associated with the HTTP verb.

# app/controllers/model_controller.rb
class ModelController < ApplicationController

  def action
    # response logic
  end 

end

RESTful Routes

REST is short for REpresational State Transfer. Developed by Roy Fielding in 2000, REST is the standard for API communication. Using RESTful conventions simplifies the routing process and reduces the number of decisions that need to be made. It also makes the API accessible to any other developers.

CRUD

CRUD stands for Create, Read, Update, Delete. These are the four ways data is manipulated on the web. Each of these actions has an HTTP verb associated with it: GET, POST, PUT, PATCH, DELETE. Rails also has corresponding RESTful actions: index, create, show, update and destroy.

CRUD         HTTP           RAILS
-----------------------------------------
Create       POST           #create 
Read         GET            #index, #show
Update       PUT, PATCH     #update
Delete       DELETE         #destroy

Index

The index action is associated with the GET verb and used to return all instances of a class.

# app/config/routes.rb
Rails.application.routes.draw do

  get '/books' to: 'books#index'

end

# app/controllers/books_controller.rb
class BooksController < ApplicationController

  def index
    books = Book.all
    render json: books
  end

end

Create

The create action is associated with the POST verb and used to create a new instance of a class.

# app/config/routes.rb
Rails.application.routes.draw do

  post '/books' to: 'books#create'

end

# app/controllers/books_controller.rb
class BooksController < ApplicationController

  def create
    book = Book.create(params)
    render json: book, status: :created
  end

end

Show

The show action is associated with the GET verb and used to return a specific instance of a class. The route must include an :id after the endpoint.

# app/config/routes.rb
Rails.application.routes.draw do

  get '/books/:id' to: 'books#show'

end

# app/controllers/books_controller.rb
class BooksController < ApplicationController

  def show
    book = Book.find(params[:id])
    render json: book
  end

end

Update

The update action is associated with PATCH and PUT verbs and used to update a specific instance of a class. The route must include an :id after the endpoint.

# app/config/routes.rb
Rails.application.routes.draw do

  patch '/books/:id' to: 'books#update'
  put '/books/:id' to: 'books#update'

end

# app/controllers/books_controller.rb
class BooksController < ApplicationController

  def update
    book = Book.find(params[:id])
    book.update(params)
    render json: book, status: :accepted
  end

end

Destroy

The destroy action is associated with the DELETE verb and used to destroy a specific instance of a class. The route must include an :id after the endpoint.

# app/config/routes.rb
Rails.application.routes.draw do

  delete '/books/:id' to: 'books#destroy'

end

# app/controllers/books_controller.rb
class BooksController < ApplicationController

  def destroy
    book = Book.find(params[:id])
    book.destroy
    render :no_content
  end

end

Resources

Let's combine all the previous examples to see the routes and controller files when all RESTful routes are in use.

# app/config/routes.rb
Rails.application.routes.draw do

  get '/books' to: 'books#index'
  post '/books' to: 'books#create'
  get '/books/:id' to: 'books#show'
  patch '/books/:id' to: 'books#update'
  put '/books/:id' to: 'books#update'
  delete '/books/:id' to: 'books#destroy'

end

# app/controllers/books_controller.rb
class BooksController < ApplicationController
  def index
    books = Book.all
    render json: books
  end

  def create
    book = Book.create(params)
    render json: book, status: :created
  end

  def show
    book = Book.find(params[:id])
    render json: book
  end

  def update
    book = Book.find(params[:id])
    book.update(params)
    render json: book, status: :accepted
  end

  def destroy
    book = Book.find(params[:id])
    book.destroy
    render :no_content
  end
end

That routes file is starting to look pretty lengthy and it only has routes for one resource. Imagine managing an app with 7 or 8 resources. Rails to the rescue! Rails has a resources macro which creates RESTful routes for all CRUD actions.

# app/config/routes.rb
Rails.application.routes.draw do

  resources :books

end

So much better. Using resources not only cleans up and simplifies the code, it also prevents typos and syntax errors.

By default, resources creates seven routes for each resource. What happens when the controller only has one or two actions? The routes for the other actions have been created but will lead to routing error messages. To keep those routes from being created use the only: key.

resources :books, only: [:index, :show]

Nested Routes

The resources macro can be used in nested routes as well. Nested routes reflect the relationships between models. If an Author model has_many :books, routes to the books through the authors can be established as such:

resources :authors do
  resources :books, only: [:index, :show]
end

This declaration creates these nested routes:

get '/authors/:author_id/books' to: 'books#index'
get '/authors/:author_id/books/:id' to: 'books#show'

Nested routes should only be one level deep.

Custom Routes

Custom routes follow the same format as RESTful routes. The only difference is there are no limitations of RESTful conventions. A good use-case for a custom route would be /login and /logout. These paths communicate useful information but they are not a resource in and of themselves. Since a sessions controller typically handles login and logout functionality, the routes could be setup as:

resources :sessions, only: [:create, :destroy]

or as custom routes:

post '/login' to: 'sessions#create'
delete '/logout' to: 'sessions#destroy'

Both routes work the same. The difference is on the client side. Fetching /login or /logout is really clear. While fetching /sessions is less clear.

Conclusion

Routing in Rails is pretty straightforward whether RESTful, nested or custom. All routes have four components: verb, path, controller, and action. For a deeper dive check out the docs.

Credit

Photo by Daniele Levis Pelusi on Unsplash

Object-Oriented Ruby Basics

Stephen Carter — Mon, 08 May 2023 17:35:42 +0000

It's no surprise that Object-Oriented Programming (OOP) is the most popular programming paradigm. OOP is actually very similar to the way that we think. Our world is so incomprehensibly complex that our perception of reality is reduced to a simpler interface—much like a computer program. We don't see every single unique tree we drive past. We see objects that resemble a broad category of tree. Having low-resolution models of a variety of objects allows us to interface with the world without becoming overwhelmed. We constantly update our models of the world based on our experiences. Occasionally, we have to debug—or completely rewrite—our models due to tragedy, loss or incorrect assumptions.

However, we don't only see the world in low-resolution. We also have complex high-resolution perceptions as well. Recalling my grandparents' walnut tree with the tire swing or my parents' pear tree in the backyard returns a trove of specific memories and sensory information. I can "feel" the texture of the bark, "see" the color of the leaves, and "taste" the sweetness of the fruit. I know these two trees very well.

Classes and Instances

In OOP, we write low-resolution models called classes that generate high-resolution objects called instances. Extending the analogy above, Tree is the class and my grandparents' walnut tree is the instance. My parents' pear tree is another instance of the Tree class.

Class

class Tree
end

This example in ruby is the beginning of a model class: Tree. Class names are always capitalized and singular in ruby. (Why Ruby? While many languages can be used for OOP, Ruby was specifically created with OOP in mind.)

OOP object models contain both data (attributes) and code (methods). This Tree class is currently lacking in both categories. Attributes are stored in variables. Instance variables begin with @ while class variables begin with @@. Attributes are read, written or modified through methods. Instance methods start with def method_name. Class methods start with def self.method_name.

class Tree

  def name= name
    @name = name
  end

  def name
    @name
  end

end

While it's still not much, here is a Tree class that can create and retrieve tree names. The first method .name= writes the instance variable: @name. This is called a setter method. The second method .name reads the instance variable: @name. This is called a getter method.

Instance

grandpas_tree = Tree.new 
#=> #<Tree:0x00007f87799b9af8>
grandpas_tree.name = 'Grandpa\'s Tree'
#=> "Grandpa's Tree"
grandpas_tree.name 
#=> "Grandpa's Tree"
grandpas_tree
#=> #<Tree:0x00007f87799b9af8 @name="Grandpa's Tree">

So here is the first instance of Tree. Renaming the tree is just as easy as calling the setter method again. Verify with the getter method.

grandpas_tree.name = 'Tire Swing Tree'
#=> "Tire Swing Tree"
grandpas_tree.name 
#=> "Tire Swing Tree"

Macros

Getter and setter methods are useful and all, but there is an easier way. Macros are code that write code. Three macros that are particularly helpful are attr_reader (attribute getter), attr_writer (attribute setter) and attr_accessor (attribute getter & setter).

class Tree
  attr_reader :name
  attr_writer :name
end

Refactoring the Tree class this way still provides the same functionality as before. Macros use symbols to represent the variables they access.

class Tree
  attr_accessor :name
end

This is the simplest way to refactor the Tree class. Now many attributes can be added efficiently.

class Tree
  attr_accessor :name, :type, :age, :height
end

Self

Since a class will have many instances, the word self is a designated keyword used to access a given instance within a method. Self is also used at the beginning of class methods to differentiate them from instance methods.

class Tree
  # macros
  attr_accessor :name, :type

  # class variable
  @@all = []

  # special instance method called when a new instance is created: Tree.new('Grandpa\'s Tree', 'walnut')
  def initialize(name, type) 
    @name = name
    @type = type
    # the instance is shoveled into the @@all array upon initialization
    @@all << self
  end

  # class method
  def self.all
    @@all
  end
end

This updated Tree class creates tree instances with name and type attributes. Calling Tree.all returns an array of all the tree instances that have been created. With method chaining, Tree.all.count will return the number of Tree instances created. (The .count method is built-in to ruby.)

Tree.new('Mom\'s', 'pear')
#=> #<Tree:0x00007f877f837710 @name="Mom's", @type="pear"> 
Tree.new('Grandpa\'s', 'walnut')
#=> #<Tree:0x00007f87799b9af8 @name="Grandpa's", @type="walnut"> 
Tree.new('Christmas', 'white pine')
#=> #<Tree:0x00007f877f82d170 @name="Christmas", @type="white pine"> 
Tree.all
#=> [#<Tree:0x00007f877f837710 @name="Mom's", @type="pear">, #<Tree:0x00007f87799b9af8 @name="Grandpa's", @type="walnut">, #<Tree:0x00007f877f82d170 @name="Christmas", @type="white pine">]
Tree.all.count
#=> 2

Inheritance

Inheritance creates a hierarchy of classes by which a child or subclass can access all of the attributes and methods of the parent or superclass. To write an inheritance the subclass is "less-than" the superclass: class Tree < Forest.

class Forest 
  attr_accessor :location, :area, :protected_status

  def protected
    @protected_status = true
  end
end

# The Tree class inherits attributes and methods from the Forest class.
class Tree < Forest
  attr_accessor :name, :type

  @@all = []

  def initialize(name, type) 
    @name = name
    @type = type
    @@all << self
  end

  def self.all
    @@all
  end
end

While this example may be contrived, inheritance is particularly helpful when using libraries such as ActiveRecord or Sinatra. Libraries such as these have a host of methods that keep code DRY and allow the programmer to focus on writing unique methods specific for the individual app rather than writing methods that are the same in every app.

As a general rule in Ruby, methods cap out at 5 lines and classes cap out at 100 lines of code. This keeps classes and methods from becoming overly complicated and unmanageable. Complying with this standard encourages the simplest, cleanest code.

Conclusion

Classes, instances, attributes, methods, macros, self and inheritance are some of the basics in OOP. These tools allow programmers to write code that models the world around them. It's just a hunch, but I'm guessing you'll notice a lot more trees today.

Credit

Photo by Johann Siemens on Unsplash

A Musician's Guide to React

Stephen Carter — Wed, 08 Mar 2023 14:50:02 +0000

Intro

As the title suggests, this post aims to provide an overview of React to musicians learning code. Perhaps you too are a musician making the career switch to development. I have heard that I am far from alone in this respect. If so, allow me to analogize React with familiar music and tech terms. Now before we get into Verse 1, let's start with a question:

What is React?

Built by FaceBook engineers, React is technically a JS library but often called a framework. It's like arguing over enharmonic tones. Is that really an Ab or a G#? Of course, there is a correct answer, but no matter what you call it, both tones sound the same. So library or framework, React organizes and simplifies JS by using a declarative approach to coding.

Declarative programs write the desired outcome and leave the specifics of how to the computer. It's the difference between a bare-bones chord chart and a highly orchestrated symphony. The chord chart is declarative, it doesn't specify how to voice the C chord, just that the end result is in fact a C chord.

Verse 1: Components

Components are where the magic of React begins. Components are reusable bits of code. It's like a chord progression that gets used in every verse. The lyrical content changes, but the musical structure stays the same.

Think of any web-app you use (Instagram, FaceBook, Planning Center). The data that's displayed is specific to you, but the way the data is displayed is consistent with every user.

Components use the single responsibility principle. They can be as simple as a button or as large as a container that organizes the other components. Think of it as an electric guitar setup. Each pedal on the board modifies the sound of the guitar in one specific way. Each pedal is a component. The board is also a component. It doesn't modify the sound at all, but it holds each of the other components in place allowing them to be organized and connected.

Speaking of connecting components, with sound equipment, you connect the inputs and outputs with cables. In React components, we use imports and exports.

// src/components/Button.js
// To use React in a component file, import it.
import React from 'react';

// Component functions begin with a capital letter. 
// The capital letter distinguishes a React component from a vanilla JS function.
function Button() {
   return (
      <button>Click Me!</button>
   );
}

// To use this component elsewhere, export it.
export default Button;

Once we have a component with an export, we can import it for use in any other component.

// src/components/App.js
import React from 'react';
// import the Button component to use in the App component.
import Button from './Button';

// Components can only return one element.
// Since we want three buttons, we wrap them in a div.
function App() {
   return (
      <div>
         <Button />
         <Button />
         <Button />
      </div>
   );
}

export default App;

So this App component will display three button components when rendered. Now you may be wondering, "What is HTML doing inside JS?" 🤔

JSX

React introduces a JS eXtension syntax called JSX. JSX is a hybrid of HTML and JS. Since React is declarative, the code declares the desired outcome. In the example above, a <button> is declared. The HTML-style tags make the code visually appealing, but since this is JSX, we can use JS easily inside the tags with curly braces {}.

const text = "Click Me!"

function Button() {
   return (
      <button>{text}</button>
   );
}

While this button component renders the same as the prior one, the text of the button has been abstracted and can be changed through the text variable.

function Button() {
   return (
      <button>{signIn ? "Sign Out" : "Sign In"}</button>
   );
}

Here, a ternary expression uses a signIn variable to determine the text of the button. If signIn is true, the button displays "Sign Out" as the text. Otherwise, the button displays "Sign In" as the text. The same button is used for signing in and out simplifying the code.

Now, what if we want to use the Button component for more than two different options? Since the whole idea of components is to be reusable, there must be a way to abstract the button text even further. And if you think the answer is yes, props to you. 👏😉 Let's go to Verse 2!

Verse 2: Props

Props (short for properties) are the way we send information down from parent components to child components. In our pedal board example, the board is the parent component and the pedals are the children components. The analogy falls short in this case because the pedal board does not send any information to the pedals. But we can think of it like signal flow. The guitar produces a signal that is sent down to the pedals and then on to the sound system.

In the example below the App component is the parent of the Button components. The Button components are children of App and siblings to each other.

In order to display different messages in each button, we pass along a prop called buttonText with differing values for each Button.

function App() {
   return (
      <div>
         <Button buttonText="Click Me!" />
         <Button buttonText="👍" />
         <Button buttonText="👎" />
      </div>
   );
}

Props are given to the component as an argument in curly braces.

function Button({ buttonText }) {
   return (
      <button>{buttonText}</button>
   );
}

This feature provides the ability to have highly abstracted, customizable components.

Inverse Flow

Since props only flow from parent to child, you can imagine there are problems when one child has data that another child needs. Maybe a Form component collects data to be displayed later in a Dashboard component. In such cases, we can pass a function down as a prop and call that function within the child component along with arguments that then inverse the flow of data within the app.

Chorus: State

State is the ability to store dynamic data in React apps. Updating State with new data will cause the component to re-render. This allows us to display updated information without having to refresh the page. It also speeds up the user experience since we don't have to keep going back to the server for information. We keep all of that information client-side with State.

Hook: React Hook

What is a chorus without a good hook? To use State we first import a React Hook called useState. The useState hook allows us to "hook" into React's internal state. (Many other React Hooks exist besides useState including the option of writing custom hooks.)

// useState is an internal variable in React.
// Variables are imported with curly braces.
import React, { useState } from 'react';

We tell React to create State for a component through an array of two variables. The naming convention for these variables is state and setState.

import React, { useState } from 'react';

const studentRoster = [
   { name: "Tom", lesson: "Piano" },
   { name: "Leslie", lesson: "Voice" },
   { name: "Harry", lesson: "Cello" },
];

function App() {
   const [students, setStudents] = useState(studentRoster);

// ...
}

Once State is set, we can write any number of functions to manipulate the data. In the above example, we can write functions to display each student and lesson type on a card. Then, we could write a sort feature to display the student cards alphabetically. Or we could write a filter feature that only displays students with a certain type of lesson. The power of this feature is immense.

Now in order to update the value of State, we need to talk about Events.

Bridge: Events

Similar to the addEventListener() method in JS, Events provide functionality within React. Events use props beginning with on: onClick, onHover, onSubmit, etc. In the example below, onClick is passed with a value of handleClick which is a function defined within the component.

function Button() {
   function handleClick() {
      console.log('That was easy!');
   }

   return (
      <button onClick={handleClick}>Easy</button>
   );
}

Events are useful for updating State.

import React, { useState } from 'react';

function PlayButton() {
   const [play, setPlay] = useState(false)

   function handleClick() {
      setClicked(!play);
   }

   return (
      <button onClick={handleClick}>
         {play ? 'Play' : 'Pause'}
      </button>
   );
}

In the example above, the component PlayButton uses State to determine the button's text. It uses a prop onClick to update the state which causes the component to re-render with a new message based on the change in state.

Since our handleClick function is so short, we can refactor the button with an anonymous arrow function.

import React, { useState } from 'react';

function PlayButton() {
   const [play, setPlay] = useState(false)

   return (
      <button onClick={() => setClicked(!play)}>
         {play ? 'Play' : 'Pause'}
      </button>
   );
}

Now we have a PlayButton toggle component that can be used for a music app.

Ending

Components, props, state and events, these are four of the big ideas in React. Now that you have a basic overview from a musician's perspective, take a deep dive in the official React Docs.

Credit

Photo by Anton Shuvalov on Unsplash

JavaScript's Unsung Hero: How to .addEventListener()

Stephen Carter — Sun, 15 Jan 2023 01:26:06 +0000

If you're anything like me, you like to see the big picture. Understanding how things fit together makes them easier to learn. When I first started learning JavaScript, I wanted to know how vague concepts translated into usable code. One of the biggest connections I made early on was understanding the relationships between HTML, CSS and JS.

When it comes to websites, HTML provides content, CSS provides styling, and JS provides functionality. These three elements work together to create powerful webpages and applications. Of all the methods that are available in the JS engine, .addEventListener() is the unsung hero.

The Unsung Hero

JavaScript's .addEventListener() method is the unsung hero because this simple, easy-to-use method connects the power of the JS engine to the DOM. An event listener attaches to any HTML or DOM element—even the window—and enables JS to respond to the associated events that it "hears." In other words, the ability for JS to "hear" when an HTML <button> is 'clicked' comes from the event listener.

While an event listener can only listen for one event, multiple listeners can be added to a single element. For instance, a mouse hover and click can be added to the same button with different functions dependent on the action.

What is the .addEventListener() method?

The .addEventListener() method has two required parameters and one optional parameter. Parameter one is the event. Parameter two is a function. Parameter three is an optional boolean with a default set to false. This determines whether the event listener will use event bubbling(true) or event capturing(false). So the basic syntax would be:

element.addEventListener('event', function);

element.addEventListener('event', function, true);

Parameter 1: 'event'

The first parameter is an event. You can find an entire list of HTML DOM events here. The three events I'll cover in this post are 'click', 'submit' and 'DOMContentLoaded'.

'click'

The mouse 'click' is the primary event that most websites use. Let's attach the 'click' event listener to the buttons in this HTML example:

<div>
    <button id="like">👍</button>
    <button id="dislike">👎</button>
</div>

document.querySelector('#like').addEventListener('click', likeHandler);
document.querySelector('#dislike').addEventListener('click', likeHandler);

As an aside, if you have a situation like this where the same handler function is being called on more than one button, use querySelectorAll and iterate over both buttons like this:

document.querySelectorAll('button').forEach((button) => button.addEventListener('click', likeHandler));

'submit'

The submit event listener attaches directly to a form not the specific:
<input type="submit" value="Submit">.
Even though the type="submit" looks like a button and is clicked like a button, the event that JS listens for is 'submit'.

document.querySelector('form').addEventListener('submit', formHandler);

'DOMContentLoaded'

Another powerful way to use the .addEventListener() method is with the DOMContentLoaded event. When the browser reads the HTML document, it loads the JS file on the line where it is written. If the JS file is scripted in the <head> of the page, none of the other content will be loaded before the script is run. This becomes a problem when the script tries to access elements from the DOM that have not been created yet.

One solution to this problem is achieved by placing the script after the element that it modifies. However, using DOMContentLoaded, is an elegant solution that does not compromise the organizational layout of the HTML document.

document.addEventListener('DOMContentLoaded', init);

function init() {
    // Code block to initialize website.;
}

The event listener is added to the entire document. Once the document has fully loaded, the event listener triggers the init() function.

Parameter 2: function

The second parameter is a function. Typically when a function is called, it is also invoked. However, as a parameter in this method, we don't want the function invoked when we call it. Rather we want to invoke the function after the event has occurred.

function myFunction() {
    console.log('This is a delayed response!');
}

button.addEventListener('click', myFunction);

Notice the missing () when the function is called. The event listener only invokes the function once the button is clicked.

function myFunction() {
    console.log('This is NOT a delayed response!');
}

button.addEventListener('click', myFunction());

Since the function is invoked when it is called, myFunction will run immediately instead of waiting for the 'click' event.

Passing parameters

So how can parameters be passed to functions that have no parentheses? In this case, create a trojan horse and place the function with parameters inside of an anonymous function.

function addSumNums(num1, num2){
    return num1 + num2;
}

button.addEventListener('click', function(){
    addSumNums(num1, num2);
}

Parameter 3: boolean

The boolean value of parameter 3 is set to a default of false. That is why it is an optional parameter. What does this parameter address? It addresses the order in which events are handled with nested tags.

<div>
  <p>Some text that is both meaningful and important.</p>
</div>

With the default setting, the outer-most event will be handled first. This is called event capturing.

div.addEventListener('click', myFunction) // This one's first!
p.addEventListener('click', myFunction)

With a boolean of true, the inner-most event will be handled first. This is called event bubbling.

div.addEventListener('click', myFunction, true)
p.addEventListener('click', myFunction, true) // This one's first!

Conclusion

So that's it! The .addEventListener() method is the unsung hero of JavaScript because it connects any and every function to any and every element in the DOM. It is easy to use and only requires two parameters.

Credit

Photo by Ben White on Unsplash