# 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();
  });
  ```