Back to Basics
Essential JavaScript Fundamentals for Modern Framework Development
Hi~I’m Nerando
I work in the front end space as a junior frontend developer at Hygiena. We work in the food safety tech space. I also boot camp baby and the current freeCodeCamp Atlanta MeetUp Organizer since 2018 — building a welcoming community for learners and coders of all levels. Outside of coding, I love cooking up new recipes and unwinding with some classic Pokémon or Halo sessions (gaming is my go-to stress relief!). I’ve also made the positive~ish choice to give up drinking, focusing instead on healthier habits (Boo this man). Programming, to me, is the art/ science of turning ideas into reality—telling computers what to do through creativity, swearing and logic. Seriously still reading huh, cool … You can make quick and delicious ice cream in a blender using just a few ingredients. Start with 2 cups of frozen fruit such as bananas, strawberries, mangoes, or berries. Add 1 cup of heavy cream, full-fat coconut milk, or Greek yogurt for a healthier option. Sweeten to taste with 2 to 4 tablespoons of sugar, honey, maple syrup, or agave, and optionally include a teaspoon of vanilla extract and a pinch of salt to enhance flavor. See this => https://chatgpt.com/share/682ceeec-b9f0-8013-aea2-4ffea3605efa
@Nerajno
Disclaimer
@Nerajno
Code of Conduct
@Nerajno
https://www.techlahoma.org/code-of-conduct/
Sponsors || Networking
@Nerajno
“Links run di world”
Note to Self
@Nerajno
Shepard’s Prayer ~ May 5, 1961
State of Js ~ 2024
Problem Statement
Problem Statement
Problem ~ !JavaScript
Agenda
* Examples
* Lots of Examples
Love Letter to React
Vue for React Developers - Alex Riviere
Javascript Fundamentals
Javascript Fundamentals You Should Know
No, Not A Framework 1st
Learning Happen Bottom Up
Concept: Variables and Data Types
Foundational Concept:
Understanding let, const, and var for variable declaration, and primitive types (string, number, boolean, null, undefined, symbol, bigint) as well as objects and arrays.
Concept Application: Variables and Data Types
Vue3: Uses ref() and reactive() to create reactive state, which relies on proper variable declarations and understanding of data types.
React: Uses useState() to manage state, requiring knowledge of how to initialize and update variables of different types.
Concept: Template Literals
Foundational Concept:
Using backticks (`\) to interpolate variables and expressions inside strings:`Hello, ${name}!`
Concept Application: Template Literals
Vue3: Used in computed properties and template expressions for dynamic strings (e.g., `Welcome, ${user.name}!` in templates).
React: Used in JSX for dynamic content and class names (e.g., `button ${isActive ? 'active' : 'inactive'}`).
Concept: Arrow Functions
Foundational Concept:
Critical for both Vue 3's Composition API and React functional components. Essential for maintaining correct scope and this binding in methods and event handlers. Concise function syntax: `() => { ... }`. Arrow functions also lexically bind this.
Concept Application: Arrow Functions
Vue3: Frequently used in the Composition API for computed properties, watchers, and event handlers.
React: Essential for defining functional components, event handlers, and concise logic in hooks.
Concept: Objects and Object Destructuring
Foundational Concept: Objects store keyed collections. Destructuring allows extracting properties: `const { a, b } = obj;`
Concept Application:Objects and Object Destructuring
Clap Break : 1
@Nerajno
Concept: Arrays and Array Methods
Foundational Concept: Arrays store ordered collections. Methods like .map(), .filter(), .reduce() are used for data transformation.
Concept Application:Arrays and Array Methods
Vue3: v-for directive relies on array iteration; computed properties often use array methods for filtering/mapping lists.
Concept Application:Arrays and Array Methods
React: .map() is used in JSX to render lists; array methods are used to update and filter state arrays.
Concept: Promises and Async/Await
Foundational Concept: Promises represent asynchronous operations. async/await provides a cleaner syntax for handling them.
Concept Application:Promises and Async/Await
Vue3: Used with lifecycle hooks (onMounted) and methods for data fetching and side effects.
React: used with useEffect() and event handlers for fetching data and handling asynchronous logic.
Concept Application:Promises and Async/Await
Concept: Modules and Exports
Foundational Concept: ES Modules allow splitting code into reusable files using import and export.
Concept Application:Modules and Exports
Vue3: Composables and utility functions are organized in modules and imported into components.
Concept Application:Modules and Exports
Vue3: Composables and utility functions are organized in modules and imported into components.
React: Custom hooks and utility functions are organized as modules and imported into components.
Concept Application:Modules and Exports
Concept: Classes and Object-Oriented Concepts
Foundational Concept: Classes are blueprints for creating objects with shared methods and properties.
Concept Application: Classes and Object-Oriented Concepts
Both: Helpful for understanding component inheritance in both frameworks. Used in custom directive implementations (Vue) and error boundaries (React).
Concept Application: Classes and Object-Oriented Concepts
Both: Helpful for understanding component inheritance in both frameworks. Used in custom directive implementations (Vue) and error boundaries (React).
Almost There
@Nerajno
Concept: Optional Chaining
Foundational Concept: Safely access nested object properties: `user?.profile?.name`
Concept Application: Optional Chaining
Vue3: Used in templates and computed properties to avoid runtime errors when accessing deeply nested data.
Concept Application:Optional Chaining
React: Used in JSX and logic to safely access properties that may be undefined.
Concept: Event Handling
Foundational Concept: Attaching and responding to user events (click, input, etc.) and understanding event objects.
Concept Application: Event Handling
Vue3: Uses directives like @click and @input to bind methods to events.
Concept Application: Event Handling
React: Uses props like onClick and onChange to handle events, passing event objects to handlers.
Concept: Error Handling
Foundational Concept: Using try/catch blocks to handle exceptions and errors in synchronous and asynchronous code.
Concept Application: Error Handling
Vue3: Error handling in async functions and via lifecycle hooks like onErrorCaptured.
Concept Application: Error Handling
React: Error handling in async functions and with Error Boundaries (class components) for catching rendering errors.
Examples: Maybe~ish
Clap Break : 2/2
@Nerajno
Summary:
Summary
Mastering foundational JavaScript concepts such as variables, template literals, arrow functions, destructuring, array methods, promises, modules, classes, optional chaining, event handling, and error handling is essential for effective development in both Vue 3 and React. These core principles underpin each framework’s approach to state management, rendering, reactivity, and component interaction
Questions/Fin
Nerando Johnson
@Nerajno