React in 2 mints

REACT in 2min

React Basics

React is a JavaScript library for building user interfaces
Developed and maintained by Meta (Facebook)
Uses component-based architecture
JSX is used to write HTML-like code in JavaScript
Components can be class-based or function-based

JSX (JavaScript XML)

Syntax extension for writing UI in React
Looks like HTML but is converted to JavaScript
Must return a single parent element
Use {} for embedding JavaScript expressions
Use className instead of class for CSS

Components

Components are reusable UI elements
Two types: Functional and Class components
Functional components are more common and support Hooks
Props are used to pass data to components
Props are read-only

Props

Short for "properties"
Passed as attributes to components
Accessed via props object
Useful for customizing component content
Props cannot be modified inside the child component

useState Hook

useState() is used to declare state in functional components
Returns an array: [state, setState]
Re-render occurs when setState is called

useEffect Hook

useEffect() manages side effects (like API calls, timers)
Accepts a function and an optional dependency array
Runs after every render by default
To run once on mount, pass an empty dependency array

Conditional Rendering

Use ternary or logical && to render content conditionally
Example: {isLoggedIn ? : }
Prevent rendering with null or short-circuiting

Lists and Keys

Use map() to render lists of components
Each item must have a unique key prop
Keys help React identify which items changed

Forms in React

Controlled components bind form inputs to state
Use onChange handler to update state
Handle form submission with onSubmit event

Event Handling

Events are camelCase (e.g., onClick, onChange)
Use functions as event handlers
event.preventDefault() prevents default behavior

React Router

Used for client-side routing
Install via react-router-dom
Key components:

BrowserRouter, Routes, Route, Link, useNavigate
Enables single-page application navigation

useRef Hook

Provides a mutable ref that doesn’t cause re-renders
Use for DOM access or persisting values between renders

Context API

Used for global state management
Create context with createContext()
Provide context with Context.Provider
Access context with useContext()

useContext Hook

Consumes context values inside functional components
Avoids prop drilling
Good for theming, user auth, global data

useReducer Hook

Alternative to useState for complex state logic
Useful when managing multiple state variables or actions
Syntax similar to Redux

Custom Hooks

Functions that use React hooks inside
Reusable across multiple components
Must start with use prefix (e.g., useForm, useToggle)

React Performance Tips

Use React.memo() to avoid unnecessary re-renders
Use useCallback() to memoize functions
Use useMemo() to memoize expensive calculations