React Progress till now..

🧠 Following the React Course on Udemy

React - The Complete Guide (incl. Redux)

GitHub Profile: Kushal Jangra

I've been diving deep into React through this course and building projects to solidify every major concept. Here's a look at what I've built so far 👇

---

🔹 React Concepts & Projects

---

1. Essentials – Components, JSX, Props, State

📌 Core building blocks of every React application.

function Player({ name, symbol, isActive }) {
  return (
    <li className={isActive ? 'active' : ''}>
      {name} ({symbol})
    </li>
  );
}

React is component-based, meaning the UI is split into reusable pieces. JSX allows HTML to be written inside JavaScript, and props let components receive data. State enables interactivity.

📂 Project: Tic-Tac-Toe Game

Repo: GitHub

Website: Live Demo

🧠 What I Learned:

• Functional Components
• Conditional Rendering
• State Updates
• Lifting State Up

Preview:

---

2. Investment Calculator – Handling User Input & State

Repo: GitHub

Website: Live Demo

🧠 Concepts Used:

• Two-way binding
• Controlled vs Uncontrolled Inputs
• Dynamic rendering of result tables

const [enteredAmount, setEnteredAmount] = useState('');

<input 
  type="number" 
  value={enteredAmount}
  onChange={(event) => setEnteredAmount(event.target.value)}
/>

Fun Fact: React recalculates the entire virtual DOM on every render, but efficiently updates only what's changed.

Preview:

3. React Styling – Tailwind CSS, CSS Modules, Styled Components

Repo: GitHub

Website: Live Demo

🧠 Techniques Explored:

• Scoped styles with CSS Modules
• Utility-first approach with Tailwind
• Dynamic theming with Styled Components

import styled from 'styled-components';

const Card = styled.div`
  padding: 1rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
`;

💡 Did you know? Styled Components uses tagged template literals to let you write actual CSS in your JavaScript.
*preview : *

---

4. Debugging React Apps

Tools Used:

• React Developer Tools for Chrome
• React Strict Mode

🧠 What I learned:

Debugging helps detect unnecessary renders and side-effect errors early in dev mode.

<React.StrictMode>
  <App />
</React.StrictMode>

---

5. Refs and Portals – Countdown App

Repo: GitHub

Website: Live Demo

🧠 Concepts:

• Refs to access and manipulate DOM nodes
• Portals to render components outside the root DOM tree

Snippet - use Ref to Focus Input:

const inputRef = useRef();

useEffect(() => {
  inputRef.current.focus();
}, []);

Snippet – ReactDOM.createPortal:

return ReactDOM.createPortal(
  <ModalOverlay>{children}</ModalOverlay>,
  document.getElementById('modal-root')
);

💡 Portals are great for modals, tooltips, and overlays.

*preview : *

---

6. Project Management App – Working with Forms and CRUD

Repo: GitHub

Website: Live Demo

🧠 Implemented:

• Nested components
• Task data handling
• Real-world app structure with form validation

Snippet – Handling Form Submission:

function handleSubmit(event) {
  event.preventDefault();
  onAddTask(taskData);
}

*preview : *

---

7. Context API & useReducer – Shopping Cart

Repo: GitHub

Website: Live Demo

🧠 Key Concepts:

• Avoided prop drilling using Context
• Used useReducer for complex state logic

Snippet – useReducer Setup:

const cartReducer = (state, action) => {
  if (action.type === 'ADD_ITEM') {
    return { ...state, items: [...state.items, action.item] };
  }
  return state;
};

const [cartState, dispatchCartAction] = useReducer(cartReducer, initialCartState);

💡 useReducer is especially useful when you have interdependent state variables or multi-step state transitions.

Preview:

---

8. Side Effects & useEffect – Place Picker

Repo: GitHub

Website: Live Demo

🧠 Highlights:

• Running code after component mount
• Managing cleanup functions
• Working with maps or external APIs

Snippet – useEffect:

useEffect(() => {
  const storedPlaces = JSON.parse(localStorage.getItem('places'));
  setPlaces(storedPlaces || []);
}, []);

Preview:

---

9. Quiz App – Personal Project

Repo: GitHub

Website: Live Demo

🧠 Skills Practiced:

• Component-driven architecture
• Local state and score logic
• Dynamic rendering of questions

Snippet – Dynamic Rendering of Questions:

{questions.map((q, index) => (
  <Question key={index} data={q} onAnswer={handleAnswer} />
))}

Preview:

---

10. React Behind the Scenes

Explored:

• Reconciliation
• Virtual DOM diffing
• Component lifecycle

💡 React uses a concept called the fiber architecture for faster rendering and concurrency support.

---

11. Sending HTTP Requests – Backend-Connected Place Picker

Updated Place Picker to connect with a basic backend using fetch() to GET and POST data.

🧠 Topics:

• Side effects + async/await
• JSON serialization
• Error handling with .catch() and UI fallbacks

Snippet – Fetch with useEffect:

useEffect(() => {
  async function fetchPlaces() {
    const response = await fetch('http://localhost:3000/places');
    const data = await response.json();
    setPlaces(data.places);
  }
  fetchPlaces();
}, []);