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