JSX Syntax

Using HTML-like syntax within JavaScript to define component structure:

function Application() {
  return (
    <div className="Application">
      Application Content
    </div>
  )
}

export default Application

List Rendering

Mapping arrays to render dynamic lists with unique keys:

const technologies = [
  { identifier: 1, technology: 'Vue' },
  { identifier: 2, technology: 'React' },
  { identifier: 3, technology: 'Uni-app' }
]

function TechnologyList() {
  return (
    <div className="TechnologyList">
      <ul>
        {technologies.map(item => (
          <li key={item.identifier}>{item.technology}</li>
        ))}
      </ul>
    </div>
  )
}

Conditional Rendering

Using boolean logic to conditionally render elements:

const isVisible = true
const isLoading = false

function ConditionalComponent() {
  return (
    <div className="ConditionalComponent">
      {isVisible && <span>Content Visible</span>}
      {isLoading ? <span>Loading...</span> : <span>Content Ready</span>}
    </div>
  )
}

Complex Condisional Rendering

Using functions to handle complex rendering logic:

const statusCode = 1

function renderContentBasedOnStatus() {
  if(statusCode === 0) {
    return <div>Status Zero</div>
  } else if (statusCode === 1) {
    return <div>Status One</div>
  } else {
    return <div>Status Two</div>
  }
}

function StatusComponent() {
  return (
    <div className="StatusComponent">
      {renderContentBasedOnStatus()}
    </div>
  )
}

Event Handling

Binding event handlers to DOM elements:

function InteractiveComponent() {
  const handleInteraction = () => {
    console.log('Element interacted')
  }
  
  return (
    <button onClick={handleInteraction}>
      Interact
    </button>
  )
}

Component Basics

Creating and using functional components with PascalCase naming:

const ActionButton = () => {
  return <button>Perform Action</button>
}

function MainComponent() {
  return (
    <div className="MainComponent">
      <ActionButton />
    </div>
  ) 
}

Styling Control

Dynamic class management using template literals and classnames library:

.header-row {
	background: #f0f0f0;
}
.active-state {
  color: #007acc;
}

import './styles.css'
import classNames from 'classnames'

function StyledComponent() {
  const isActive = true
  
  return (
    <div className="StyledComponent">
      <div className={`header-row ${isActive && 'active-state'}`}>
        Styled Content
      </div>
      
      <div className={classNames('header-row', { 'active-state': isActive })}>
        Library Styled Content
      </div>
    </div>
  ) 
}

React Hooks

useState Hook

Managing component state with primitive and object values:

import { useState } from 'react'

function StatefulComponent() {
  const [heading, setHeading] = useState('Initial Heading')
  const [userData, setUserData] = useState({ username: 'developer' })
  
  const updateHeading = () => {
    setHeading('Updated Heading')
  }
  
  const updateUserData = () => {
    setUserData({
      ...userData,
      username: 'updatedDeveloper'
    })  
  }
  
  return (
    <div onClick={updateHeading}>
      {heading}
    </div>
  )
}

useEffect Hook

Handling side effects and cleanup operations:

import { useEffect } from 'react'

function EffectComponent() {
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('Interval executing')
    }, 1000)

    return () => {
      clearInterval(intervalId)
    }
  }, [])
  
  return <div>Effect Component</div>
}

useMemo Hook

Memoizing expensive calculations to optimize performance:

import { useState, useMemo } from 'react'

function calculateFibonacci(n) {
  console.log('Fibonacci calculation executed')
  if(n < 3) return 1
  return calculateFibonacci(n-2) + calculateFibonacci(n-1)
}

function MemoizedComponent() {
  const [fibIndex, setFibIndex] = useState(0)
  const [counter, setCounter] = useState(0)
  
  const fibonacciResult = useMemo(() => {
    return calculateFibonacci(fibIndex)
  }, [fibIndex])
  
  return (
    <div className="MemoizedComponent">
      <button onClick={() => setFibIndex(fibIndex + 1)}>
        Calculate Fibonacci: {fibIndex}
      </button>
      <button onClick={() => setCounter(counter + 1)}>
        Increment Counter: {counter}
      </button>
    </div>
  )
}

useRef Hook

Accessing DOM elements directly:

import { useRef } from 'react'

function RefComponent() {
  const inputElement = useRef(null)
  
  const focusInput = () => {
    console.dir(inputElement.current)
    inputElement.current?.focus()
  }
  
  return (
    <div className="RefComponent">
      <input
        type="text"
        ref={inputElement}
      />
      <button onClick={focusInput}>
        Focus Input
      </button>
    </div>
  )
}

useNavigate Hook

Programmatic navigation with React Router:

import { useNavigate } from 'react-router-dom'
  
function NavigationComponent() {
  const navigate = useNavigate()
  
  const navigateToDetails = (itemId) => {
    navigate(`/details?id=${itemId}`)
  }
  
  return (
    <button onClick={() => navigateToDetails('123')}>
      View Details
    </button>
  )
}

Controlled Forms

Managing form state through React component state:

import { useState } from 'react'

function ControlledForm() {
  const [inputValue, setInputValue] = useState('')
  
  const handleInputChange = (event) => {
    setInputValue(event.target.value)
  }
  
  return (
    <div className="ControlledForm">
      <input 
        value={inputValue}
        onChange={handleInputChange}
        placeholder="Enter text"
      />
    </div>
  )
}

Component Communication

Parent to Child Props

Passing data and functions from parent to child components:

function ChildComponent(props) {
  return (
    <div>
      Child Content: {props.title}, 
      Additional: {props.additionalContent}
    </div>
  )
}

function ParentComponent() {
  const parentTitle = "Parent Data"
  
  return (
    <div>
      <ChildComponent
        title={parentTitle}
        age={25}
        isValid={true}
        items={['Item1', 'Item2']}
        dataObject={{value: 'test'}}
        callback={() => console.log('Callback executed')}
        additionalContent={<span>Extra content</span>}
      />
    </div>
  ) 
}

Children Prop

Using the children prop for content composition:

function ContainerComponent(props) {
  return (
    <div>
      Container Content: {props.children}
    </div>
  )
}

function ParentContainer() {
  return(
    <ContainerComponent>
      <span>Nested content inside container</span>
    </ContainerComponent>
  )
}

Child to Parent Communication

Passing data from child to parent through callback functions:

function ChildComponent({onDataSend}) {
  const childData = 'Data from child component'
  
  return (
    <div>
      Child Component
      <button onClick={() => onDataSend(childData)}>
        Send Data to Parent
      </button>
    </div>
  )
}

function ParentComponent() {
  const receiveData = (data) => {
    console.log('Received from child:', data)
  }
  
  return (
    <div>
      Parent Component
      <ChildComponent onDataSend={receiveData}/>
    </div>
  )
}

Sibling Communication

Sharing data between sibling components through a common parent:

import { useState } from 'react'

function SiblingA({onDataTransfer}) {
  const siblingData = 'Data from Sibling A'
  
  return (
    <div>
      Sibling A Component
      <button onClick={() => onDataTransfer(siblingData)}>
        Transfer Data
      </button>
    </div>
  )
}

function SiblingB({receivedData}) {
  return(
    <div>
      Sibling B Component
      Received: {receivedData}
    </div>
  )
}

function ParentMediator() {
  const [sharedData, setSharedData] = useState('')
  
  const handleDataTransfer = (data) => {
    setSharedData(data)
  }
  
  return (
    <div>
      Parent Mediator
      <SiblingA onDataTransfer={handleDataTransfer} />
      <SiblingB receivedData={sharedData} />
    </div>
  )
}