Skip to content

Instantly share code, notes, and snippets.

Understanding useEffect Execution

useEffect is used to perform side effects in functional components. These are operations that can interact with the outside world, such as API requests, timers, DOM manipulations, or subscriptions.

What is a Side Effect?

A side effect in programming occurs when a function or expression modifies some state outside its local environment, or has an observable interaction with the outside world besides returning a value. This could involve:

  • Modifying any external variable or object property.

BEM Naming Convention

BEM stands for Block, Element, Modifier and is a methodology used to create reusable components in CSS by clearly defining and separating the roles of different class names.

Overview of BEM Components
  • Block: The outermost parent component that acts as a standalone entity. For example, .button.
  • Element: A part of the block that has no standalone meaning and is semantically tied to its block. For example, .button__text.
  • Modifier: A flag on a block or element that changes its appearance or behavior. For example, .button--large.

React Component Naming Conventions

Effective naming of components is important for the readability and maintainability of your code. Below are best practices for naming React components, with a focus on hierarchical relationships (parent and child components).

Best Practices

  1. Use PascalCase: All component names should be in PascalCase. For example, UserProfile.

  2. Descriptive Names: Names should clearly indicate the component's purpose without needing to look into its implementation.

Student Dashboard Review

🛠 Setup, Architecture, and Organization (1 day)

Setup

We want a base to work from, what I would call our blank canvas:

1. Create a Repository on GitHub : Initialize a new repository to manage your project's version control.

Election Candidates React Assessment Rubric

Group X - Essentials Completed

  • Data is properly displayed: Candidate data is correctly rendered on the screen.
  • Cards auto populate on page: Candidate cards are visible upon page load.
    • Proper use of map: The map function is used effectively to iterate over candidate data.
    • Use of props: Data is passed to components using props.
  • Clean JSX: JSX code is well-formatted and easy to read.

Group Y - Basic Functionality

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/8695b27503.js"

Mod 2 Frontend Development Syllabus

🚀 Week 1: Introduction and Basics (Feb 26 - Mar 1)
  • 🎉 Module Kick-off
  • 🗺 Deploy to GitHub
  • 🗣 Introduction to HTML

Intro To HTML Day 1

🎯 Objectives

By the end of this session, participants will be able to:

  • 🔄 Understand the Basics of HTML: Learn foundational HTML structure (e.g., <!DOCTYPE html>, <html>, <head>, <body>) and create a basic HTML document from scratch.
  • 📚 Apply HTML Tags to Structure Content: Use tags like <h1>, <p>, <strong>, <em>, and <img> to format text and embed images, converting plain text into a structured, well-formatted HTML document.
  • 🔗 Embed Multimedia Elements into Web Pages: Incorporate elements such as , , and `` with proper attributes to enhance web pages with multimedia content for engagement and accessibility.

Peer Mock Interview

Keep In Mind
  • Allocate 25 minutes for each interview and 5 minutes to fill out the Peer Mock Interview Form after the 25 mins for the coding part. (30 mins total)
  • You can switch roles too but you can also only be an interviewer or interviewee.
  • Never give the solution but you can give helpful guidance if the candidate is veering away or has improper syntax.
  • If you don't submit a google form, the interviewee will not get credited for the interview. Submit it as soon as you close the interview.

Review Notes For facts.js

Solving the getLongestDinosaur Function

Step 1: Set Up the Problem

  • Understand the data structure: an array of objects, each representing a dinosaur with various properties.
  • Identify the goal: Find the dinosaur with the longest length and convert that length from meters to feet.