React Basics

Key Terms

• Components: Building blocks of every React app (e.g. buttons, inputs, pages).
  • Every React component is a JavaScript function that returns JSX (JavaScript in Disguise).
  • JSX is preferred over createElement for creating user interfaces.
  • Attributes in JSX must be in camelCase (e.g. class becomes className).
  • Use curly braces {} to insert dynamic values (e.g. strings, numbers) within JSX.

Component Structure

• Only one parent element can be returned from a component.
  • Use React Fragment to avoid adding unnecessary elements.

Props

• Props: Short for properties; used to pass data between components.
  • Create a prop by adding a name to the component and assigning it a value.
  • Access props in components like normal JavaScript properties.
  • Children Prop: Used to pass other components as children, allowing for composition.

Keys

• Key Prop: Used to uniquely identify components in a list (important for lists using map).
  • A key can be a unique string or number.
  • Use current index from the map function if no unique value exists.

Rendering Process

• Rendering: The process of displaying a React app in the browser.
  • React uses the Virtual DOM (VDOM) to update changes more efficiently.
  • Diffing: Comparing the current VDOM with the previous version to identify changes.
  • Reconciliation: Updating the real DOM with the changes found in the VDOM.

Event Handling

• React has built-in events (e.g. onClick, onChange, onSubmit).
  • Use event handler functions to manage actions (e.g. alerting on button click).

State Management

• State: Represents a snapshot of the app at a given time.
  • Use useState and useReducer for state management.
  • useState: Takes an initial value and returns an array with the current state and a function to update it.
  • Controlled components use state to manage input values and behaviors.

React Hooks

• Hooks: Special functions that allow you to use React features (e.g. state, effects).
  • Commonly used hooks:
    • useState
    • useEffect
    • useRef

Purity in Components

• Pure Components: Return the same output for the same input without modifying external variables.
  • Strict Mode: Helps identify potential issues during development.

Effects and Ref

• Effects: Code that interacts with external systems (e.g. API calls, DOM manipulation).
  • Use the useEffect hook for managing side effects.
• Refs: Allow direct referencing of DOM elements for certain tasks (e.g. focusing an input).

Context API

• Context: Allows passing prop data through the component tree without prop drilling.
  • Create a context in a parent component, wrap it with a context provider, and access it with useContext.

Portals

• Portals: Allow rendering components outside their parent hierarchy for better styling.
  • Useful for modals, dropdowns, and tooltips.

Suspense and Error Boundaries

• Suspense: Handles loading states for components that fetch data.
  • Provides a fallback UI while waiting for data.
• Error Boundaries: Catch rendering errors and display a fallback UI to prevent app crashes.

Conclusion

• Encouragement to explore a React boot camp for a deeper understanding of the concepts covered.