Skip to content

CONCEPTS.md

Latest commit

 

History

History
76 lines (57 loc) · 2.88 KB

CONCEPTS.md

File metadata and controls

76 lines (57 loc) · 2.88 KB

📚 NewsMonkey Mastery: React Concepts

This document provides an in-depth explanation of the technical concepts mastered while building the NewsMonkey project.

1. Class-Based Components

In the early days of React, Class Components were the only way to manage state and lifecycle.

Code Pattern:

export default class App extends Component {
  render() {
    return (
      <div>Hello NewsMonkey</div>
    );
  }
}

Learning: Understanding this.state and this.props is fundamental to mastering React's component-based architecture.

2. Constructor & super()

The constructor is where you initialize state and bind methods.

Code Pattern:

constructor(props) {
  super(props);
  this.state = {
    articles: [],
    loading: false
  };
}

Learning: super(props) is mandatory to access this.props within the constructor and to inherit from React.Component.

3. Component Lifecycle: componentDidMount

This method is triggered immediately after the component is added to the DOM.

Learning: It is the standard place to fetch data from an API. Since it runs after the first render, it ensures the UI structure is ready before data arrives.

4. State Management (this.setState)

Unlike regular variables, updating React state requires a specific method.

Learning: this.setState is asynchronous. When called, React schedules an update, merges the new state with the old one, and triggers a re-render.

5. Fetching Data (Async/Await)

Modern JavaScript async/await makes asynchronous code look synchronous and easier to read.

Learning: We used fetch() to call the NewsAPI endpoints. We practiced handling JSON parsing and updating the state with the results.

6. React Router Navigation

Converted a multi-page concept into a Single Page Application (SPA).

Learning:

  • BrowserRouter: Keeps UI in sync with the URL.
  • Routes: Container for all possible routes.
  • Route: Defines a path and the component to render.
  • Key Trick: Using a key prop on the same component across different routes forces React to re-mount the component, ensuring new data is fetched for different categories.

7. Props vs State

  • Props: External data passed into a component (Read-only).
  • State: Internal data managed by the component (Mutable). Learning: "State is the source of truth, Props are the messengers."

8. Environmental Variables (.env)

Protected sensitive data from exposure.

Learning: Prefixing variables with REACT_APP_ makes them accessible in the React code via process.env. This is a standard industry practice for security.

9. Third-Party Integrations

  • Infinite Scroll: Learned how to monitor scroll position and trigger "fetch more" logic.
  • Loading Bar: Learned how to pass progress values from child components back to the parent App.js to show a global progress bar.

Happy Coding! 🚀