Components in React

megcartr — Sat, 07 Oct 2023 17:37:09 +0000

React is a popular framework used to build web applications. It is a JavaScript library developed by Facebook and has been used to create many applications such as Instagram, Netflix, Airbnb, and many more!

One of the biggest advantages to using React is the ability to create components. Components are blocks of code in which can be separated and reused. Having separate blocks of code allows us to easily determine and fix bugs in our code. There are two types of components: Class and Functional.

A Class component requires "extends React.Component" and "render" in order for the component to return HTML, thus making it more complex than functional components. Also known as the stateful component because they can hold or manage a local state.

class Header extends React.Component {
 render() {
  return <h1>Header</h1>;
}

Component name should always begin with an uppercase letter

A Functional component is the preferred method as the code is cleaner. They are also known as the stateless component since they do not have their own state. Functional components are JavaScript functions that can receive data as parameters. For example:

Function Header() {
    return <h1>Title</h1>
}

Components are an essential part of building a React application. They are separate pieces of code which are brought together under a parent component to create your masterpiece!

Learning JavaScript: "addEventListener"

megcartr — Sat, 22 Jul 2023 13:02:28 +0000

My name is Meghan and I have been working for Amazon for 2 years now. This job has been a positive experience as I have been able to pursue my education at no cost. I was first introduced to Software Engineering when I saw a post at work for a program that would train you to become a Software Engineer called ATA.

I began doing research in SE and other careers in Tech and became fascinated with the field. I believe a career in Tech would be a perfect fit for me! Unfortunately, I was not able to pass the exam in order to be accepted into the program. Still determined, I looked into certifications through the Amazon Career Choice Program. I came across Flatiron School and decided to apply!

I have enjoyed my experience learning how to code thus far. It has been challenging at times but when the solution finally comes through to me, it is such a rewarding feeling.

The most interesting thing that I have learned so far is addEventListener. This method allows for an event to happen that is called in a function. Events are actions made by the user or browser such as pressing play on a video or clicking a link which directs you to another page. There are so may events to choose from to make your browser interactive and entertaining! Below are just a few examples:

click
blur
mouseover
keyup
keydown
cut
copy
paste

addEventListener consists of 2 parameters: the event (defines the event name) and the function(responds to the event). Lets take a look at an example:

document.addEventListener("click", sayHello);

function sayHello() {
    alert ("Hello!")
}

In this example, the event is "click" and the function is sayHello. When the function is called through the event, the results would be "Hello". Also, document is a target parameter in which the event listener will be executed. These are typically HTML elements but can apply to any DOM object. This is just a simple explanation of how addEventListener works.

Resources:
https://developer.mozilla.org
https://www.w3schools.com

DEV Community: megcartr

Components in React

Learning JavaScript: "addEventListener"