# ReactJS

**Overview:** React.js is a popular JavaScript library for building user interfaces, particularly single-page applications, with a component-based architecture. It enables efficient updates and rendering of user interfaces through its virtual DOM.

**Key Features and Skills:**

* **Component-Based Architecture:** Created reusable and modular components to build dynamic and maintainable user interfaces.

  <pre class="language-jsx"><code class="lang-jsx"><strong>import React from 'react';
  </strong>
  const Greeting = ({ name }) => (
    &#x3C;div>
      &#x3C;h1>Hello, {name}!&#x3C;/h1>
    &#x3C;/div>
  );

  export default Greeting;
  </code></pre>
* **State Management:** Managed local component state using React’s `useState` hook and global state with context or third-party libraries like Redux.

  ```jsx
  import React, { useState } from 'react';

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

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>Click me</button>
      </div>
    );
  };

  export default Counter;
  ```
* **Lifecycle Methods and Hooks:** Utilized React lifecycle methods (`componentDidMount`, `componentDidUpdate`) and hooks (`useEffect`, `useMemo`) to handle side effects and optimize performance.

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

  const DataFetcher = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once on mount

    return (
      <div>
        {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
      </div>
    );
  };

  export default DataFetcher;
  ```
* **Context API:** Implemented Context API for managing global state and avoiding prop drilling.

  ```jsx
  import React, { createContext, useState, useContext } from 'react';

  const ThemeContext = createContext();

  const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light');
    return (
      <ThemeContext.Provider value={{ theme, setTheme }}>
        {children}
      </ThemeContext.Provider>
    );
  };

  const ThemedComponent = () => {
    const { theme, setTheme } = useContext(ThemeContext);
    return (
      <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>
        <p>The current theme is {theme}</p>
        <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>Toggle Theme</button>
      </div>
    );
  };

  export { ThemeProvider, ThemedComponent };
  ```
* **React Router:** Used React Router for handling routing and navigation within single-page applications.

  ```jsx
  import React from 'react';
  import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

  const Home = () => <h2>Home Page</h2>;
  const About = () => <h2>About Page</h2>;

  const App = () => (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );

  export default App;
  ```
* **Form Handling:** Managed form state and validation using React’s controlled components and libraries like Formik or React Hook Form.

  ```jsx
  import React, { useState } from 'react';

  const ContactForm = () => {
    const [form, setForm] = useState({ name: '', email: '' });

    const handleChange = (e) => {
      const { name, value } = e.target;
      setForm({ ...form, [name]: value });
    };

    const handleSubmit = (e) => {
      e.preventDefault();
      console.log('Form Submitted:', form);
    };

    return (
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={form.name} onChange={handleChange} />
        </label>
        <label>
          Email:
          <input type="email" name="email" value={form.email} onChange={handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  };

  export default ContactForm;
  ```
* **Performance Optimization:** Applied performance optimization techniques like lazy loading, code splitting, and memoization to enhance application speed.

  ```jsx
  import React, { Suspense, lazy } from 'react';

  const LazyComponent = lazy(() => import('./LazyComponent'));

  const App = () => (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );

  export default App;
  ```
* **Testing:** Performed testing of components and hooks using tools like Jest and React Testing Library to ensure reliability and functionality.

  ```jsx
  import { render, screen, fireEvent } from '@testing-library/react';
  import '@testing-library/jest-dom';
  import Counter from './Counter';

  test('increments counter on button click', () => {
    render(<Counter />);
    fireEvent.click(screen.getByText(/Click me/i));
    expect(screen.getByText(/You clicked 1 times/i)).toBeInTheDocument();
  });
  ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.mohitkapadiya.com/frontend/reactjs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.