開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

2024年1月1日，開源日報第1061期：
今日推薦開源項目：《developer-roadmap》
今日推薦英文原文：《Building a Simple React Hook to Detect Screen Size》

開源項目

今日推薦開源項目：《developer-roadmap》傳送門：項目鏈接

推薦理由：非常全面的 developer 路線圖、實戰指南和深度技術解析，幫助開發者全面成長。直達鏈接 roadmap.sh

英文原文

今日推薦英文原文：Building a Simple React Hook to Detect Screen Size

推薦理由：本文介紹如何使用React創建一個簡單的屏幕尺寸檢測的自定義Hook, 通過監聽窗口大小變化，實時更新屏幕尺寸，適合練手

Building a Simple React Hook to Detect Screen Size

Hey folks! 🌟 In this super cool article, we』ll dive into the world of responsive web design using React. We』ll learn how to create a simple React hook that detects screen size changes. Exciting, right? Let』s get started and rock that responsive game! 🚀

Prerequisites

Before we begin, make sure you』re familiar with React and React hooks. Some basic JavaScript and JSX knowledge would be helpful too. If you』re already on board, let』s rock 』n』 roll! 🎸

Setting Up the Project

To start things off, we need a React project. No worries, just create a new React project using Create React App or any other fancy method:

npx create-react-app screen-size-hook-demo
cd screen-size-hook-demo

Creating the Custom Hook ⚓️

Alright, we』re all set! Now, let』s dive into creating our own custom hook for detecting screen size changes. In the src folder, let's create a new file called useScreenSize.js. This is where the magic happens! ✨

// useScreenSize.js
import { useState, useEffect } from 'react';

const useScreenSize = () => {
  const [screenSize, setScreenSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setScreenSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);

    // Clean up the event listener when the component unmounts
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return screenSize;
};

export default useScreenSize;

Custom Hook Magic ✨

Hey, look at this fancy code! 😎 Let』s break it down real quick:

We import the useState and useEffect hooks from React. You know, React's got some sweet hooks! 🎣
We create our custom hook called useScreenSize, which sets up the initial state for screenSize with the current screen dimensions.
Inside the useEffect hook, we add an event listener to the window object to detect screen resize events.
Whenever the window size changes, the handleResize function kicks in, updating the screenSize state with the new dimensions.
We』re responsible developers, so we remove the event listener in the cleanup function to avoid any unwanted mess. 🧹

Using the Custom Hook

Alright, we』ve built the hook, but how do we use it? Don』t worry; it』s a breeze! Just take a look at this App.js file:

// App.js
import React from 'react';
import useScreenSize from './useScreenSize';

const App = () => {
  const screenSize = useScreenSize();

  return (
    <div>
      <h1>Screen Size Detection with React Hook</h1>
      <p>Width: {screenSize.width}</p>
      <p>Height: {screenSize.height}</p>
    </div>
  );
};

export default App;

Usage Made Easy-Peasy! 🌈

Super simple, right? All we did was import the useScreenSize hook we created and called it within the App component. The screenSize object contains the current width and height of the screen, and we proudly display them on the page! 🎉

Conclusion

There you have it, amigos!

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/

開源日報第1061期：開發者路線圖：《developer-roadmap》