koustubh's Blog

React Essentials: Key Terms Every New Developer Should Learn

koustubh's photo
koustubh
·

3 min read

Table of contents

  • Here are some basic React terms and their definitions:

    1. React

    • A JavaScript library for building user interfaces. It allows developers to create reusable UI components.

2. JSX (JavaScript XML)

  • A syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript. JSX makes it easier to create React components.

Example:

    CopyjsxCopy codeconst element = <h1>Hello, World!</h1>;

3. Component

  • A building block of a React application. Components are reusable pieces of UI logic.

  • Types of Components:

    • Functional Component: A JavaScript function that returns JSX.

        CopyjsxCopy codefunction Greeting() {
    return <h1>Hello, World!</h1>;
  }

    • Class Component: A JavaScript class that extends React.Component.

        CopyjsxCopy codeclass Greeting extends React.Component {
    render() {
      return <h1>Hello, World!</h1>;
    }
  }

4. Props (Properties)

  • A way to pass data from a parent component to a child component. Props are read-only. Example:
    CopyjsxCopy codefunction Welcome(props) {
      return <h1>Hello, {props.name}!</h1>;
    }

    <Welcome name="Koustubh" />;

5. State

  • A way to manage data within a component. State is mutable and can change over time. Example:
    CopyjsxCopy codeimport React, { useState } from 'react';

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

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

6. Virtual DOM

  • A lightweight representation of the actual DOM. React uses the Virtual DOM to efficiently update and render components.

7. Hooks

  • Functions that allow you to use state and other React features in functional components.

  • Common Hooks:

    • useState: Manages state.

    • useEffect: Handles side effects like data fetching or DOM manipulation.

8. Lifecycle Methods

  • Methods in class components that are triggered at specific points in a component's life (e.g., mounting, updating, unmounting).

  • Common methods:

    • componentDidMount

    • componentDidUpdate

    • componentWillUnmount

9. Event Handling

  • React handles events like onClick, onChange, and onSubmit similarly to HTML, but with camelCase syntax. Example:
    CopyjsxCopy codefunction Button() {
      const handleClick = () => alert('Button clicked!');
      return <button onClick={handleClick}>Click Me</button>;
    }

10. React Router

  • A library for handling navigation in React applications. It allows creating single-page applications with multiple views.

11. Redux

  • A state management library often used with React for managing complex application state.

12. Context API

  • A built-in feature of React for sharing state across components without using props.

13. Key

  • A unique identifier used in lists to help React identify which items have changed, are added, or removed. Example:
    CopyjsxCopy codeconst items = ['Apple', 'Banana', 'Cherry'];
    const listItems = items.map((item, index) => <li key={index}>{item}</li>);

14. Fragment

  • A way to group multiple elements without adding an extra node to the DOM. Example:
    CopyjsxCopy codefunction FragmentExample() {
      return (
        <>
          <h1>Title</h1>
          <p>Description</p>
        </>
      );
    }

15. React DOM

  • The package that provides DOM-specific methods for rendering components.