My Blog

Author: saqibkhan

  • Overreacted

    • Overview: A personal blog by Dan Abramov, one of the co-authors of React and Redux.
    • What to Expect: Deep dives into React concepts, thought-provoking insights, and explanations of complex topics in an accessible way.
    • URL: Overreacted

  • freeCodeCamp

    • Overview: An educational platform providing free coding resources and tutorials.
    • What to Expect: Comprehensive tutorials that cater to various skill levels, covering everything from the basics of React to advanced concepts like hooks and context.
    • URL: freeCodeCamp

  • Dev.to

    • Overview: A community-driven platform where developers share their experiences, tips, and tutorials.
    • What to Expect: A diverse range of topics and perspectives on React, including beginner guides, advanced techniques, and real-world use cases.
    • URL: Dev.to React Tag

  • LogRocket Blog

    • Overview: Focuses on web development with a strong emphasis on performance monitoring and best practices.
    • What to Expect: In-depth tutorials, case studies, and articles on integrating React with other technologies (like Redux, GraphQL).
    • URL: LogRocket Blog

  • Smashing Magazine

    • Overview: A comprehensive resource for web developers, covering a wide range of topics including React.
    • What to Expect: Articles that delve into React features, comparisons with other frameworks, and performance optimization techniques.
    • URL: Smashing Magazine

  • CSS-Tricks

    • Overview: A well-known web design and development blog that features a dedicated section for React.
    • What to Expect: Practical tutorials, tips on integrating React with CSS, and articles on how to solve common React problems.
    • URL: CSS-Tricks

  • React Official Blog

    • Overview: The official source for updates directly from the React team. It covers major releases, new features, and community highlights.
    • What to Expect: Insights on React’s development, performance improvements, and guides on best practices.
    • URL: React Blog

  • Basic Calculator

    A simple calculator for addition, subtraction, multiplication, and division.

    jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Calculator() {
  const [num1, setNum1] = useState('');
  const [num2, setNum2] = useState('');
  const [result, setResult] = useState(null);

  const handleCalculation = (operation) => {

    const number1 = parseFloat(num1);
const number2 = parseFloat(num2);
let res;
    

    switch (operation) {
  case 'add':
    res = number1 + number2;
    break;
  case 'subtract':
    res = number1 - number2;
    break;
  case 'multiply':
    res = number1 * number2;
    break;
  case 'divide':
    res = number2 !== 0 ? number1 / number2 : 'Error';
    break;
  default:
    break;
}
setResult(res);
      };

  return (

    <div>
  <h1>Calculator</h1>
  &lt;input type="number" value={num1} onChange={(e) =&gt; setNum1(e.target.value</code></code></pre>

  • Search Filter

    A simple search filter for a list of items.

    jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape'];

function SearchFilter() {
  const [query, setQuery] = useState('');

  const filteredItems = items.filter(item =>

    item.toLowerCase().includes(query.toLowerCase())
      );

  return (

    &lt;div&gt;
  &lt;h1&gt;Search Filter&lt;/h1&gt;
  &lt;input
    type="text"
    value={query}
    onChange={(e) =&gt; setQuery(e.target.value)}
    placeholder="Search..."
  /&gt;
  &lt;ul&gt;
    {filteredItems.map((item, index) =&gt; (
      &lt;li key={index}&gt;{item}&lt;/li&gt;
    ))}
  &lt;/ul&gt;
&lt;/div&gt;
      );
}

ReactDOM.render(<SearchFilter />, document.getElementById('root'));

  • Password Strength Checker

    A simple password strength checker.

    jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function PasswordStrengthChecker() {
  const [password, setPassword] = useState('');

  const getStrength = () => {

    if (password.length &lt; 6) return 'Weak';
if (password.length &lt; 12) return 'Moderate';
return 'Strong';
      };

  return (

    &lt;div&gt;
  &lt;h1&gt;Password Strength Checker&lt;/h1&gt;
  &lt;input
    type="password"
    value={password}
    onChange={(e) =&gt; setPassword(e.target.value)}
    placeholder="Enter your password"
  /&gt;
  &lt;p&gt;Password strength: {getStrength()}&lt;/p&gt;
&lt;/div&gt;
      );
}

ReactDOM.render(<PasswordStrengthChecker />, document.getElementById('root'));