react - dwilson2547/wiki_demo GitHub Wiki

React is a JavaScript library for building user interfaces (UIs), developed and maintained by Facebook. It focuses on declarative, component-based architecture, making it efficient and flexible for creating interactive and dynamic web applications. React is widely used for single-page applications (SPAs) and can also power mobile apps (React Native) and server-rendered apps (Next.js).

• 1. Core Concepts of React
  • 1.1. Components
  • 1.2. JSX (JavaScript XML)
  • 1.3. Virtual DOM
  • 1.4. State and Props
  • 1.5. Hooks (Introduced in React 16.8)
  • 1.6. React Router
• 2. Key Features of React
• 3. React vs. Other Frontend Frameworks
• 4. React Ecosystem
• 5. Example: Simple React App
  • 5.1. Create a React App
  • 5.2. Functional Component with Hooks
  • 5.3. Class Component (Legacy)
• 6. Strengths of React
• 7. Weaknesses of React
• 8. When to Use React
• 9. React Example: Fetching Data
• 10. Summary

• Building Blocks: React applications are built using reusable components (functions or classes).
• Types:
  • Functional Components (preferred with Hooks):

    function Greeting({ name }) {
      return <h1>Hello, {name}!</h1>;
    }

  • Class Components (legacy):

    class Greeting extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}!</h1>;
      }
    }

• Syntax Extension: Allows writing HTML-like code in JavaScript.
• Example:

  const element = <h1>Hello, React!</h1>;

• Compiled to JavaScript: JSX is transformed into React.createElement() calls.

• Efficiency: React creates a virtual representation of the DOM and updates only the changed parts (reconciliation).
• Performance: Minimizes direct DOM manipulation for faster rendering.

• Props (Properties): Immutable data passed from parent to child components.

  <Greeting name="Alice" />

• State: Mutable data managed within a component (using useState Hook or this.state in class components).

  function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
  }

• State Management: useState, useReducer.
• Side Effects: useEffect (replaces componentDidMount, componentDidUpdate).
• Context: useContext for global state.
• Example:

  function Example() {
    const [count, setCount] = useState(0);
    useEffect(() => {
      document.title = `Count: ${count}`;
    }, [count]);
    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
  }

• Client-Side Routing: Enables navigation in SPAs without page reloads.
• Example:

  import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <Link to="/">Home</Link>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Router>
    );
  }

npx create-react-app my-react-app
cd my-react-app
npm start

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default Counter;

✅ Component-Based: Reusable and modular components. ✅ Virtual DOM: Efficient updates and rendering. ✅ Rich Ecosystem: Tools like Next.js, Redux, and React Native. ✅ Declarative: Easier to understand and debug. ✅ Hooks: Simplify state and side effects in functional components. ✅ Community Support: Large community and extensive documentation. ✅ Backward Compatibility: Gradual updates with minimal breaking changes.

❌ JSX Learning Curve: Mixing HTML and JavaScript can be confusing for beginners. ❌ Frequent Updates: Rapid evolution (e.g., Hooks, Concurrent Mode). ❌ No Built-in State Management: Requires external libraries (Redux, Context API). ❌ SEO Challenges: Client-side rendering can hurt SEO (mitigated by Next.js). ❌ Boilerplate: More setup required compared to Vue.js.

• Single-Page Applications (SPAs): Dynamic, interactive UIs.
• Reusable Components: Build component libraries (e.g., design systems).
• Mobile Apps: Use React Native for cross-platform mobile development.
• Server-Rendered Apps: Next.js for SSR and static sites.
• Projects Requiring Flexibility: Unopinionated approach allows custom solutions.

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

• React is a declarative, component-based JavaScript library for building interactive UIs.
• Key Features: JSX, Virtual DOM, Hooks, and a rich ecosystem.
• Strengths: Efficiency, modularity, and flexibility.
• Weaknesses: JSX learning curve, frequent updates, and SEO challenges (without SSR).
• Use Cases: SPAs, mobile apps (React Native), and server-rendered apps (Next.js).

React is ideal for dynamic, high-performance web applications and is backed by a large community and extensive tooling. For simpler projects, alternatives like Vue.js might be more suitable, while Angular offers a more opinionated framework for enterprise applications.