Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • icon picker
        React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
React-ready JS

Arrow Functions & Function Expressions

Arrow functions are a shorter way to write functions in JavaScript. They're often used in React components, especially in event handlers and callbacks. They also behave differently with this, which is important to understand when dealing with context.

Template Literals

Template literals let you embed variables and expressions inside strings using backticks. You'll use these all over the place in JSX for dynamic text.

The Ternary Operator

This is a shorthand for if/else and is commonly used in JSX for conditional rendering.

Desctructuring Obejects & Arrays

Destructuring allows you to unpack values from arrays or properties from objects into variables. You'll see this a lot in React when working with props, state, and hooks.

Spread & Rest Operators

The spread operator ... lets you copy or merge arrays and objects. The rest operator gathers multiple values into one. Both are extremely useful when updating state in React.

Array Methods

Methods like .map(), .filter(), and .reduce() are essential in React for rendering lists, transforming data, and managing state.

Optional Chaining & Nullish Coalescing

These are used to safely access nested values and provide fallback defaults. Super helpful in JSX when working with potentially undefined data.

Immutability

Immutability means not changing data directly, but instead creating a new copy of the data with the updates you want.
In JavaScript, certain data types like objects and arrays are reference types, which means if you change them directly, you're actually modifying the original data. In React, this can lead to bugs, unexpected behavior, and issues with rendering.
React relies on immutability to detect when something has changed so it knows when to re-render components.

Promises & Async/Await

React apps often fetch data from APIs. Knowing how to work with Promises and async/await is critical for writing clean, readable async code.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.