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

2024年1月20日，開源日報第1080期：
今日推薦開源項目：《refine》
今日推薦英文原文：《Mastering ReactJS Interview Questions and Answers》

開源項目

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

推薦理由： refine 用於構建內部工具、管理面板、儀錶盤和B2B應用程序的React框架，具有無與倫比的靈活性

什麼是 refine？（來自倉庫 README文件翻譯）
Refine是一個元React框架，可以快速開發各種Web應用程序，從內部工具到管理面板、B2B應用和儀錶盤，它作為構建任何類型的CRUD應用程序的綜合解決方案。
Refine的內部鉤子和組件簡化了開發過程，並通過提供行業標準解決方案來消除重複任務，包括身份驗證、訪問控制、路由、網路連接、狀態管理和國際化等項目的關鍵方面。
Refine設計為無頭模式，因此提供了無限的樣式和自定義選項。

官網直達：refine.dev

英文原文

今日推薦英文原文：The Context API in React

推薦理由：React中的Context API是一種管理狀態的方法，允許多個組件訪問狀態而無需通過組件樹的每個級別傳遞props，這篇文章會具體講Context API使用範例

The Context API in React

The Context API in React is a way to manage a state that needs to be accessible by multiple components without having to pass props through each level of the component tree. It』s particularly useful for sharing data that is considered global or shared across different parts of your application.

Here』s an example to illustrate how Context API works

Step1: Create the context:

First, create a context: Use createContext() to create a new context. This will serve as a container to hold the shared data.

import React from "react";

// Create the context
const UserContext = React.createContext();
export default UserContext

OR

import React, { createContext, useState } from 'react';

// Create the context
const ThemeContext = createContext();

Step 2: Set up a Provider

Create a Provider component: This will wrap the components that need access to the context.
Define state (if needed): Use useState to manage the state that you want to share across components.
Provide the context value: Use the Provider component created by the context and pass the value that will be accessible to consuming components.

Step 3: Create Custom Hooks (Optional but Recommended)

Create custom hooks: These hooks will allow components to consume the context easily.
Use useContext: Inside these custom hooks, use the useContext hook provided by React to access the context

import React, { useContext } from "react";
import UserContext from "./UserContext";

export const useUser = () => {
    const user = useContext(UserContext);
    return user;
}

const UserContextProvider = ({children}) =>{

        const name ="This is example of Context Api"
        return (
            <UserContext.Provider value={name}>
                {children}
            </UserContext.Provider>
        )
}

export default UserContextProvider

Step 4: Wrap the App with the Provider

Wrap the root component: Wrap your root component (often App) with the UserContextProvider to make the context available throughout your app.

import "./App.css";
import { Outlet } from "react-router-dom";
import Header from "./components/Common/Header/Header";
import Footer from "./components/Common/Footer/Footer";
import Home from "./components/Home";
import Test from "./components/Test";

import UserContextProvider from "./context/UserContextProvider";

function App() {
  return (
    <UserContextProvider>
      <div className="App">
        <Header />
          <Home />
          <Test />
        <Footer />
       </div>
    </UserContextProvider>

  );
}

export default App;

Step 5: Use the Context in Components

Wrap components with Provider: Wrap the components that need access to the context with the UserContextProvider.
Consume the context: Use the custom hooks created to access the context values within these components.

Example -1

import React, {useContext} from "react";
import UserContext from "../../context/UserContext";

const Home = () => {
  const value = useContext(UserContext);
  return (
    <div className="container">
      <h1>{value}</h1>
    </div>
  );
};
export default Home;

Example -2

import React, {useContext} from "react";
import UserContext from "../../context/UserContext";

const Test = () => {
  const value = useContext(UserContext);
  return (
    <div className="container">
      <h1>{value}</h1>
    </div>
  );
};
export default Test;

This structure ensures that components wrapped within the ThemeProvider have access to the data provided by the context without having to pass props through each level of the component tree.

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

開源日報第1080期：React框架：《refine》