React Learning Repository

Welcome to the React Learning Repository – a comprehensive guide to mastering React.js, from fundamentals to advanced concepts. This repo is perfect for beginners and intermediate developers looking to solidify their understanding of React with hands-on examples.

---

📁 Table of Contents

• React Components
• Props
• Conditional Rendering
• State
• useState Hook
• useEffect Hook
• useRef Hook
• Context API
• useContext Hook
• useReducer Hook
• useCallback Hook
• useMemo Hook
• Higher Order Components (HOC)
• Custom Hooks
• React Router
• React Forms
• Controlled vs Uncontrolled Components

---

React Components

Components are the building blocks of a React application. They can be class-based or functional and help in creating reusable UI elements.

Props

Props (short for properties) are used to pass data from parent to child components. They are read-only and help make components dynamic.

Conditional Rendering

Conditional rendering allows you to render different UI elements based on certain conditions, using JavaScript operators like if, &&, ? :.

State

State is a built-in object used to store data that changes over the lifetime of a component. It enables dynamic and interactive UI updates.

useState Hook

useState is a React Hook that lets you add state to functional components. It returns a state variable and a function to update it.

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

useEffect Hook

useEffect allows you to perform side effects in functional components (e.g., fetching data, updating the DOM, timers).

useEffect(() => {
  // side effect logic
}, [dependencies]);

useRef Hook

useRef returns a mutable object which does not trigger re-renders. Useful for accessing DOM elements or storing mutable values.

const inputRef = useRef(null);

Context API

The Context API allows you to share global data (like themes or user settings) between components without passing props manually at every level.

useContext Hook

useContext allows you to consume values from a React Context directly in a functional component.

const value = useContext(MyContext);

useReducer Hook

useReducer is used for managing more complex state logic. It works like Redux with a reducer function and actions.

const [state, dispatch] = useReducer(reducer, initialState);

useCallback Hook

useCallback memoizes a function so that it doesn't get recreated on every render, useful in optimizing performance.

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

useMemo Hook

useMemo returns a memoized value, preventing expensive calculations on every render unless dependencies change.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Higher Order Components (HOC)

An HOC is a function that takes a component and returns a new component, useful for reusing component logic.

const EnhancedComponent = withSomeLogic(WrappedComponent);

Custom Hooks

Custom hooks are functions that use other hooks. They allow you to reuse stateful logic across components.

function useCustomHook() {
  const [data, setData] = useState(null);
  return data;
}

React Router

Used for adding navigation to a React app. Enables route management with components like Route, Link, Switch, and BrowserRouter.

React Forms

React supports both controlled and uncontrolled forms to manage user inputs. Controlled components sync form data with component state.

Controlled vs Uncontrolled Components

• Controlled: Form data is handled by React via useState.
• Uncontrolled: Form data is handled by the DOM using ref.

---

📌 Contribution

Feel free to fork, clone, and submit PRs to enhance this repo with additional examples and improvements!

📄 License

This project is open-source and available under the MIT License.

---

Happy Learning! 🚀