开源日报每天推荐一个 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》