React Basics with Examples:

Please note that this list assumes you’re using React version 17 or newer and have a basic understanding of JavaScript and React fundamentals.

  1. Importing React:
				
					import React from 'react';
import ReactDOM from 'react-dom';
  1. Functional Component:
				
					const MyComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};
  1. Class Component:
				
					class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
      </div>
    );
  }
}
  1. Rendering a Component:
				
					ReactDOM.render(<MyComponent />, document.getElementById('root'));
  1. Props:
				
					// Passing props
<MyComponent title="Hello, React!" />

// Accessing props in functional component
const MyComponent = (props) => {
  return <h1>{props.title}</h1>;
};

// Accessing props in class component
class MyComponent extends React.Component {
  render() {
    return <h1>{this.props.title}</h1>;
  }
}
  1. State:
				
					// In class component
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }

// In functional component (useState Hook)
import React, { useState } from 'react';

const MyComponent = () => {
  const [counter, setCounter] = useState(0);
};
  1. Event Handling:
				
					// In functional component
const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return <button onClick={handleClick}>Click me!</button>;
};

// In class component
class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return <button onClick={this.handleClick}>Click me!</button>;
  }
}
  1. useEffect Hook:
				
					import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // Perform side effect here, e.g., fetch data, update DOM, etc.
  }, []); // Pass an empty array to run only once (on mount and unmount)

  return <div>...</div>;
};
  1. useRef Hook:
				
					import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const handleButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleButtonClick}>Focus input</button>
    </div>
  );
};
  1. Conditional Rendering:
				
					const MyComponent = (props) => {
  return <div>{props.condition ? 'Truthy' : 'Falsy'}</div>;
};
  1. Looping through Lists:
				
					const MyComponent = (props) => {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};
  1. Context API:
				
					// Creating a context
const MyContext = React.createContext();

// Providing context
<MyContext.Provider value={value}>
  <MyComponent />
</MyContext.Provider>

// Consuming context in functional component
import { useContext } from 'react';

const MyComponent = () => {
  const value = useContext(MyContext);

  // Use the value here
};

// Consuming context in class component
class MyComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(value) => {
          // Use the value here
          return <div>{value}</div>;
        }}
      </MyContext.Consumer>
    );
  }
}

In this part, we’re covering how to create a context using React.createContext(), provide context value using a context provider, and consume context values in both functional and class components. The useContext Hook is used in functional components, while the Consumer component is used in class components.

  1. Custom Hooks:
				
					// Create custom hook
function useCustomHook() {
  // Hook logic goes here
}

// Use custom hook
const MyComponent = () => {
  const result = useCustomHook();
};
  1. useMemo Hook:
				
					import React, { useMemo } from 'react';

const MyComponent = (props) => {
  const computedValue = useMemo(() => {
    // Expensive computation goes here
  }, [props.dependency]);

  return <div>{computedValue}</div>;
};
  1. useCallback Hook:
				
					import React, { useCallback } from 'react';

const MyComponent = (props) => {
  const memoizedCallback = useCallback(() => {
    // Function implementation
  }, [props.dependency]);

  return <div>...</div>;
};
  1. React.memo:
				
					// Higher-Order Component for functional components
const MyComponent = React.memo((props) => {
  // Component implementation
});

// Prevent re-rendering if props are the same
<MyComponent />
  1. Error Boundary:
				
					class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Log the error
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>
  1. Portals:
				
					import ReactDOM from 'react-dom';

const MyPortal = (props) => {
  return ReactDOM.createPortal(
    props.children,
    document.getElementById('portal-root')
  );
};

// Usage
<MyPortal>
  <div>Content inside a portal</div>
</MyPortal>
Social Share: