kingluddite

Useful Links

• Deploying Your Vite React Project to GitHub Pages for Free
• Function Reference vs Inline vs Expressions
• ES7 React/Redux/GraphQL/React-Native snippets for VSCode
• YouTube | Olli: Vite React App with EsLint & Prettier in VSCode (2023)
• Tricks for Jest Testing: Using only and skip
• Regular Expressions 101
• YouTube | Robert C. Martin ("Uncle Bob") (Talks about the book: Clean Code: A Handbook of Agile Software Craftsmanship)
• [Y

kingluddite

Course Schedule

Week 1

• Day 1 (24.10.2024)
  • Introduction to HTML
  • Slides
• Day 2 (25.10.2024)
  • Git’n Pro with HTML and CSS
  • Slides
• Day 3 (26.10.2024)

kingluddite

Practical use of Reacts props.children

In React, props.children is a special prop that allows you to pass components or elements as children to another component. This is particularly useful when you want to create flexible and reusable components that can contain arbitrary content.

Here's a simple example to illustrate its use and purpose:

// ParentComponent.js
import React from 'react';

const ParentComponent = (props) => {

kingluddite

What is transpiling?

Transpiling is a process in computer programming where the source code written in one programming language is converted into equivalent source code in another programming language. This transformation typically occurs before the code is executed or interpreted.

The term "transpiling" is a combination of "transforming" and "compiling." It differs from traditional compiling in that the source code is not translated into machine code directly executable by the computer's hardware, but rather into a higher-level language that can be further processed or interpreted by another tool.

One common use case for transpiling is in web development, where developers write code in modern languages such as TypeScript or newer versions of JavaScript (like ES6 or ES7), which may not be fully supported by all browsers. Transpilers like Babel are used to convert this code into older versions of JavaScript that are compatible with a wider range of browsers.

Transpiling can also be used for various other

kingluddite

BDD and TDD seem very similar - here is an example showcasing a significant difference

Let's consider a more complex example involving a user authentication feature in a web application.

TDD Approach:

In TDD, we focus on writing tests that describe the behavior of the system from a technical perspective, typically starting with low-level unit tests and gradually moving towards higher-level integration tests.

// authentication.test.js

kingluddite

Using prevStage argument in React

Is there a difference between

setDeveloperState(prevState => ({
  ...prevState,
  excitementLevel: newExcitementLevel,
  // You can update other properties here as well
}));

kingluddite

Problems with prop drilling in React

A simple example to illustrate why prop drilling can become tedious and cumbersome.

Imagine you have a React application with several nested components representing a user interface for a social media platform. Each component needs access to the user's information, such as username and profile picture, which is stored at the top-level component.

Here's how the component hierarchy might look:

<App>
  <Navbar>

kingluddite

Violation of React Hook Rule #2

Hooks should only be called from within components or custom hooks. They should never be called from regular Javascript functions.

Here's an example of a violation of the rule where a Hook is called from a regular JavaScript function instead of from within a component or a custom hook:

import React, { useState } from 'react';

// Regular JavaScript function outside of component

kingluddite

Violation of React Hook Rule #1

• Hooks should only be called from the top level of a component.
  • Never call Hooks from within loops, conditional or nested functions.

Here are some examples of violations of the rule where Hooks are called from within loops, conditional statements, or nested functions:

1. Calling a Hook inside a loop:

import React, { useState } from 'react';

kingluddite

What is a debouncer?

A debouncer in the context of a web app is a utility that helps manage and control the frequency of a particular event, typically user input events like key presses, mouse movements, or window resize events. Here are some common scenarios where you might need a debouncer in your web app:

1. User Input Handling:

   • Search Functionality: If you have a search bar and you want to trigger a search request as the user types, a debouncer can delay the search request until the user has stopped typing for a short period. This prevents a flood of unnecessary requests and reduces server load.
   • Autocomplete: Similar to search functionality, you might use a debouncer for autocomplete suggestions to avoid firing requests on every keystroke.

2. Performance Optimization:

• Window Resize Events: If your web app has responsive design elements that need to adjust to window size changes, a debouncer can be used to ensure that the resize event is not fired excessively, optimiz