Introduction to React

React is a tool for building parts of a website or app. It helps you divide a page into small, reusable pieces called components. When data changes, React identifies the smallest updates needed to keep the page fast and smooth.

Components, Props & JSX

A component represents one part of your page, like a button or a header. Props are simple settings you provide to a component to display different text or change its behaviour. JSX is a way to write your page layout in code, using tags that look like HTML.

Hooks & State

State is a way for a component to remember information, like a number or a piece of text. When the state changes, React updates the page to reflect that change. Hooks are special tools you can use in components to manage state and other features without adding extra code.

useEffect Hook

This hook runs code after the page updates. You use it for tasks like getting data from a server or interacting with browser tools. You can decide to run it every time, just once at the start, or only when certain values change.

useRef Hook

With this hook, you can track a page element (like an input box) or store a value without causing the page to refresh. It’s useful when you want to focus on an element or retain information between updates.

Conditional Rendering

This means showing or hiding parts of your page based on certain conditions. For example, show a login form when someone is not signed in, and show a welcome message when they are.

Handling Events

Events are actions like clicks or typing. In React, you set up a function to run when an event occurs. In that function, you can define what should happen, such as saving a form or updating the state.

React Router

React Router allows you to navigate between different views in a single-page app without reloading. You set up paths (like “/home” or “/about”) and tell React which component to display for each path. Links let users switch from one view to another smoothly.

useContext Hook

Context lets you share data, like a theme or user login, across many components without passing it down manually. The useContext hook allows any component to access that shared data directly.

useMemo Hook

If you have a slow calculation, useMemo remembers its result so you don’t need to repeat it with every update. It only recalculates when the inputs change, keeping your app fast.

useCallback Hook

This hook prevents a function from changing unless its inputs change. It’s helpful when you pass that function to other components, so they don’t re-render just because they received a new function reference.

Handling Forms and Connecting to Express Backend

When you handle forms in React, you need to track what users type and send that data to a server. Many beginners find it hard to manage form values and errors. To make this easier, keep the form values in state and update them as the user types.

Redux

Redux is a tool that helps you manage shared data in larger React apps. It keeps all the important information in one place called a "store," which you can access from anywhere in the app. Some people find Redux confusing at first because of new terms like actions, reducers, and dispatch.

Challenges and Solutions

1. Challenge: Understanding React’s Structure
   I initially struggled with how components, JSX, hooks, and routing fit together in React.

   Solution
   To improve my understanding, I built small apps, starting with a header and list component, then combining them. This hands-on approach clarified the overall structure for me.

2. Challenge: Understanding the useContext Hook
   I found it hard to grasp how to share data without prop drilling.

   Solution
   I studied a guide on useContext from GeeksforGeeks, and the step-by-step examples, especially on sharing themes or user info, helped solidify my understanding.

Resources Used

1. Code With Harry: I have explored this resource to learn the above concepts