React

React is a JavaScript library for building user interfaces, developed and maintained by Meta (formerly Facebook). It focuses on creating reusable UI components and efficiently updating the DOM.

Key Concepts

Components Reusable, self-contained pieces of UI.

JSX Syntax extension allowing HTML-like code in JavaScript.

Virtual DOM Efficient rendering through a virtual representation of the UI.

Hooks Functions that let you use state and lifecycle features in functional components.

Example Component

jsx
import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  )
}

Common Hooks

javascript
// State management
const [state, setState] = useState(initialValue)

// Side effects
useEffect(() => {
  // Effect code
  return () => {
    // Cleanup
  }
}, [dependencies])

// Context
const value = useContext(MyContext)

// Ref
const ref = useRef(initialValue)

// Memoization
const memoized = useMemo(() => computation, [deps])
const callback = useCallback(() => fn, [deps])

Benefits

  • Component-based architecture
  • Large ecosystem and community
  • Excellent developer tools
  • Strong industry adoption
  • React Native for mobile apps

Learn More