ReactJS

Here's a detailed section for my React.js skills covering its features, usecase, and example code snippets.

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.

  import React from 'react';
  
  const Greeting = ({ name }) => (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
  
  export default Greeting;

• State Management: Managed local component state using React’s useState hook and global state with context or third-party libraries like Redux.

  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.

  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.

  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.

  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.

  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.

  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.

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