Sử Dụng React-toastify để Tạo Kiểu Cho Các Tin Nhắn Trong ứng Dụng

Các nhà phát triển giao diện người dùng sử dụng HTML, CSS và JavaScript để xây dựng giao diện đồ họa cho các trang web mà người dùng có thể nhìn thấy và tương tác. Mục tiêu là xây dựng và thiết kế một trang web mà người dùng có thể mở, sử dụng và tương tác dễ dàng, đặc biệt là khi đọc thông tin quan trọng.

Một phần của phát triển giao diện người dùng liên quan đến việc trang web đẹp và thẩm mỹ như thế nào, còn được gọi là giao diện người dùng. Một khía cạnh khác được gọi là UX liên quan đến việc sử dụng trang web dễ dàng và đơn giản như thế nào.

Các công cụ khác nhau tồn tại để giúp chúng tôi đạt được cả UI và UX tuyệt vời. Một trong những công cụ thú vị mà chúng ta có thể sử dụng trong giao diện người dùng là React-Toastify.

Trong bài viết này, chúng ta sẽ tìm hiểu về React-Toastify và cách chúng ta có thể sử dụng nó để tạo thông báo, tin nhắn và cửa sổ bật lên trong ứng dụng React của mình.

Để làm theo hướng dẫn này, bạn cần cài đặt React và Node trong máy tính của mình. Chúng ta sẽ xem xét cách cài đặt gói React-Toastify trong phần tiếp theo.

React-Toastify là gì?

React-Toastify là một trong những thư viện bánh mì nướng React hàng đầu hiện có . Công cụ này cho phép bạn thêm thông báo bánh mì nướng vào ứng dụng của mình một cách dễ dàng và cũng có thể được sử dụng để đặt thông báo và cảnh báo.

Thông báo toast hoặc Toastify là các thông báo bật lên hiển thị một số thông tin cho người dùng. Thông tin này có thể là thông báo thành công, cảnh báo, lỗi, v.v., như thể hiện trong hình ảnh bên dưới:

Sáu loại thông báo React-Toastify ở sáu vị trí

Sử dụng bất kỳ lệnh nào dưới đây để cài đặt gói React-Toastify .

/* NPM */
$ npm install --save react-toastify

/* YARN */
$ yarn add react-toastify

Sau khi cài đặt xong, bạn phải nhập gói bên trong thành phần của mình như minh họa bên dưới. React-Toastify đi kèm với một tệp CSS phải được nhập để công cụ hoạt động.

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Tạo kiểu cho tin nhắn bánh mì nướng của bạn với React-Toastify

Hãy để chúng tôi phát triển ứng dụng React của mình và xem cách chúng tôi có thể sử dụng React-Toastify để tạo kiểu cho các thông điệp nâng ly của chúng tôi.

Hãy nhớ rằng tin nhắn bánh mì nướng là những thông báo hoặc cảnh báo mà chúng tôi muốn hiển thị cho người dùng tại một thời điểm nhất định. Những thông báo này có thể được hiển thị khi người dùng đăng nhập thành công, lỗi đăng nhập, khi yêu cầu xấu xảy ra, khi thông tin quan trọng được nhấp, v.v.

Trong App.jstệp của bạn, hãy nhập react-toastifygói và tệp CSS của nó:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Sau đó, bạn có thể gọi toastvà chèn Success Notification !tin nhắn của mình:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
    const showToastMessage = () => {
        toast.success('Success Notification !', {
            position: toast.POSITION.TOP_RIGHT
        });
    };
    return (
        <div>
            <button onClick={showToastMessage}>Notify</button>
            <ToastContainer />
        </div>
    );
}
export default App;

Lưu ý rằng chúng tôi cũng đã gọi ToastContainermã ở trên. Hộp chứa này chứa cửa sổ bật lên bánh mì nướng của chúng tôi. Nếu không có nó, cửa sổ bật lên bánh mì nướng của chúng tôi sẽ không được hiển thị.

Việc hiển thị mã này sẽ cho chúng ta kết quả bên dưới khi chúng ta nhấp vào Notifynút:

Ví dụ về thông báo thành công React-Toastify Hiển thị ở trên cùng bên phải của hình ảnh

Cách thay đổi vị trí tin nhắn bánh mì nướng của bạn

Tất cả nâng cốc được đặt ở trên cùng bên phải của trình duyệt của bạn theo mặc định. Vị trí này có thể được thay đổi bằng cách gán một vị trí mới cho bánh mì nướng. React-Toastify cho phép sáu vị trí:

Trên cùng bên phải
Trung tâm hàng đầu
Trên cùng bên trái
Góc phải ở phía dưới
Trung tâm trên
Dưới cùng bên trái

Tùy thuộc vào nơi bạn muốn tin nhắn nâng ly của mình, bạn có thể đặt một vị trí như vậy trong App.jstệp của mình:

toast.success('Success Notification !', {
    position: toast.POSITION.TOP_RIGHT
});
toast.success('Success Notification !', {
    position: toast.POSITION.TOP_CENTER
});
toast.success('Success Notification !', {
    position: toast.POSITION.TOP_LEFT
});
toast.success('Success Notification !', {
    position: toast.POSITION.BOTTOM_RIGHT
});
toast.success('Success Notification !', {
    position: toast.POSITION.BOTTOM_LEFT
});
toast.success('Success Notification !', {
    position: toast.POSITION.BOTTOM_CENTER
});

Trình diễn sáu vị trí thông báo React-Toastify có sẵn để sử dụng với thông báo thành công ở mỗi vị trí

Cách phân biệt giữa các loại tin nhắn bánh mì nướng

Tương tự như đặt vị trí của tin nhắn bánh mì nướng, bạn có thể yêu cầu trình phát bánh mì nướng chỉ định các loại thông báo bánh mì nướng khác nhau để người dùng có thể hiểu rõ hơn về thông tin đang được hiển thị.

Đặc tả là một cách hữu ích để cải thiện trải nghiệm người dùng cho ứng dụng React của bạn . Kỹ thuật này sử dụng các màu sắc khác nhau cho từng loại tin nhắn chúc mừng để giúp người dùng hiểu nhanh thông tin họ thấy dễ dàng hơn.

Ví dụ: thông báo bánh mì nướng màu đỏ thường ngụ ý cảnh báo hoặc thông báo lỗi, cũng như thông báo màu xanh lá cây thường ngụ ý phản hồi thành công. Về bản chất, bạn có thể đặt cụ thể một biến thể bánh mì nướng cho các thông báo lỗi, thông tin chung, cảnh báo, v.v.

Để chỉ định trình phát bánh mì nướng của bạn, hãy gọi bánh mì nướng trong App.jstệp của bạn với bất kỳ biến thể nào dưới đây:

toast.success('Success Notification !', {
    position: toast.POSITION.TOP_RIGHT
});
toast.error('Error Notification !', {
    position: toast.POSITION.TOP_CENTER
});
toast.warning('Warning Notification !', {
    position: toast.POSITION.TOP_LEFT
});
toast.info('Information Notification !', {
    position: toast.POSITION.BOTTOM_CENTER
});
toast('Default Notification !', {
    position: toast.POSITION.BOTTOM_LEFT
});
toast('Custom Style Notification with css class!', {
     position: toast.POSITION.BOTTOM_RIGHT,
className: 'foo-bar'
});

Làm điều này sẽ dễ dàng cho người dùng biết những gì đang được hiển thị.

Sáu loại thông báo bánh mì nướng, mỗi loại hiển thị ở một vị trí khác nhau trên màn hình

Quan sát thông báo bánh mì nướng cuối cùng mà chúng tôi đã tạo, hiển thị ở dưới cùng bên phải của hình ảnh trên. Chúng tôi có thể thấy rằng chúng tôi đã thêm một classNamevào nó, không giống như những người khác. Đó là một bánh mì nướng tùy chỉnh. Hãy cùng tìm hiểu thêm về nâng cốc tùy chỉnh trong React-Toastify.

Cách tạo kiểu cho một tin nhắn bánh mì nướng tùy chỉnh

Bánh mì nướng tùy chỉnh là một thông báo chúng ta có thể tạo kiểu theo kiểu ưa thích của mình. Điều này cho phép chúng tôi cung cấp cho thông điệp bánh mì nướng của chúng tôi chiều cao, phông chữ, cỡ chữ, nền ưa thích của chúng tôi, v.v. tùy thuộc vào loại thông điệp mà chúng tôi muốn hiển thị.

Ví dụ: chúng tôi có thể muốn hiển thị bánh mì nướng phù hợp với kiểu trang web hoặc ứng dụng của chúng tôi. Một bánh mì nướng tùy chỉnh cho phép chúng tôi làm như vậy.

Để tạo kiểu thông điệp bánh mì nướng của riêng bạn trong App.jstệp của bạn, trước tiên hãy cung cấp cho nó một thông điệp classNamenhư được minh họa bên dưới:

toast('This is a custom toast Notification!', {
    position: toast.POSITION.BOTTOM_LEFT,
    className: 'toast-message'
});

Tiếp theo, tạo kiểu cho nó trong tệp CSS của bạn bằng cách sử dụng classNametùy chọn của bạn:

.toast-message {
    background: darkblue;
    color: #fff;
    font-size: 20px;
    width: 34vw;
    padding: 30px 20px;
}

Với các kiểu được chỉ định trong ví dụ về khối mã ở trên, bạn sẽ thấy kết quả sau:

Ví dụ Bánh mì nướng tùy chỉnh được tạo bằng React-Toastify Hiển thị ở dưới cùng bên trái với màu xanh tùy chỉnh và kích thước lớn hơn

Cách tạo lời hứa trong React-Toastify

Ngoài các biến thể bánh mì nướng này, React-Toastify cũng cho phép chúng tôi tạo và hiển thị Promisethông báo. Các thông báo bánh mì nướng này hiển thị khi bất kỳ lệnh gọi API nào đang được xử lý và trả về thông báo thành công hoặc thông báo lỗi sau khi cuộc gọi hoàn tất.

Để tạo lời chúc mừng hứa hẹn, hãy thêm phần sau vào App.jstệp của bạn:

const myPromise = new Promise((resolve) =>
    fetch("https://jsonplaceholder.typicode.com/post")
      .then((response) => response.json())
      .then((json) => setTimeout(() => resolve(json), 3000))
  );

  useEffect(() => {
    toast.promise(myPromise, {
      pending: "Promise is pending",
      success: "Promise  Loaded",
      error: "error"
    });
  }, []);

Trong toast.promise, chúng tôi thiết lập pending, successvà errorthông điệp. Thông báo pendingsẽ hiển thị khi quá trình tìm nạp thực thi. Tùy thuộc vào kết quả, hoặc successhoặc errorthông báo sẽ hiển thị sau đó.

GIF Hiển thị Thông báo Lời hứa React-Toastify Đang hoạt động, Đi từ Đang chờ Xử lý Với Vòng tròn Đang Tải đến Thành công Với Dấu Kiểm Màu xanh lá cây

Hiểu `useNotificationCenter`bản cập nhật trong React-Toastify v9

useNotificationCenterlà một bản cập nhật mới và lớn đi kèm với việc phát hành React-Toastify v9 . Nó là một hook xây dựng trung tâm thông báo của bạn trên React-Toastify.

Bất cứ khi nào bạn gọi bất kỳ biến thể bánh mì nướng nào - như toast.update,, v.v. toast.promise- toast.infothông báo bánh mì nướng sẽ được thêm vào trung tâm bánh mì nướng.

Mảng useNotificationCenterlà một mảng chứa tất cả các thông báo và do đó cho phép chúng tôi thực hiện một số chức năng của mảng như lọc, sắp xếp, ánh xạ, v.v. trên đó. Hãy sử dụng một ví dụ để hiểu rõ hơn về hook này.

Trước khi sử dụng hook này, trước tiên hãy nhập nó từ react-toastify addons, sau đó gọi nó trước returncâu lệnh trong App.jstệp của bạn:

import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';

const App = () => {
      const { notifications } = useNotificationCenter();
return ()}

Cái useNotificationCentermóc cho phép chúng ta sử dụng một số hàm và giá trị, bao gồm , và notificationsnhiều hàm khác. Hãy xem xét ý nghĩa của một vài trong số này.clearmarkAllAsReadmarkAsRead

notificationscung cấp cho chúng tôi quyền truy cập vào tất cả các mục thông báo hoặc tin nhắn bánh mì nướng mà chúng tôi có trong trung tâm của mình. Mỗi notificationItemtrong notificationsmảng chứa dữ liệu như dữ liệu id, readtrạng thái (boolean) theme,, isLoadingtrạng thái (boolean) và các thông tin khác.

Chức clearnăng loại bỏ tất cả các thông báo khỏi trung tâm thông báo.

markAllAsReadđánh dấu tất cả các thông báo là đã đọc, có nghĩa là nó thay đổi readboolean của mọi thông báo notificationItemtừ falseđến true. Trong khi đó, markAsReadchỉ thay đổi một notificationItemboolean thành true.

Tổng hợp tất cả kiến thức về React-Toastify của bạn lại với nhau

Bây giờ chúng ta đã hiểu về useNotificationCenterhook cùng với các vị trí, loại và tùy chỉnh của tin nhắn bánh mì nướng, hãy xem cách chúng ta có thể sử dụng chúng cùng nhau trong ứng dụng của mình.

Đầu tiên, nhập bốn useNotificationCenterchức năng mà chúng ta đã xem qua trong phần trước vào App.jstệp của bạn:

import React from 'react';
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const App = () => {
const { notifications, clear, markAllAsRead, markAsRead } = useNotificationCenter();
}

Như đã thấy ở trên, chúng tôi cũng đã nhập tệp CSS của chúng tôi toastvà ToastContainercủa nó để chúng tôi có thể gọi là bánh mì nướng. Tiếp tục trong App.jstệp, hãy tạo một hàm để gọi thông báo bánh mì nướng của chúng tôi:

import React from 'react';
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const App = () => {
    const { notifications, clear, markAllAsRead, markAsRead } = useNotificationCenter();
    const showToast = () => {
        toast('Hello World', {
            data: {
                title: 'Hello World Again',
                text: 'We are here again with another article'
            }
        });
    };
    return (
        <div>
            <p>{notifications.length}</p>
            <button onClick={showToast}>Click me</button>
            <ToastContainer />
        </div>
    );
};
export default App;

Lưu ý rằng trong đoạn mã trên, chúng tôi đã thêm một thẻ đoạn để hiển thị số lượng tin nhắn nâng ly mà chúng tôi đã gọi hoặc thêm vào trung tâm thông báo của mình.

Khi chúng tôi nhấp vào nút để gọi bánh mì nướng, nó sẽ tự động đi vào trung tâm thông báo. Số phía trên nút sau đó sẽ cập nhật để hiển thị số lượng tin nhắn bánh mì nướng mà chúng tôi đã thêm, như sau:

Trình diễn Tính năng React-Toastify phiên bản 9 Mới được gọi là sử dụng Thông báo Trung tâm với ba thông báo ở trên cùng bên phải

Tuyệt, phải không? Hãy xem chúng ta có thể làm gì khác với hook. Như đã đề cập trước đó, useNotificationCenterhook cho phép chúng ta thực hiện sắp xếp, ánh xạ và các hành động khác trên notificationsmảng.

Vẫn bên trong App.jstệp của bạn, hãy sao chép và dán mã bên dưới:

import React from 'react';
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const Dash = () => {
    const { notifications, clear, markAllAsRead, markAsRead } = useNotificationCenter();
    const showToast = () => {
        toast('Hello World', {
            data: {
                title: 'Hello World Again',
                text: 'We are here again with another article'
            }
        });
    };
    const showSuccessToast = () => {
        toast.success('Hello World', {
            data: {
                title: 'Success toast',
                text: 'This is a success message'
            }
        });
    };
    const showErrorToast = () => {
        toast.error('Hello World', {
            data: {
                title: 'Error toast',
                text: 'This is an error message'
            }
        });
    };
    return (
        <div>
            <p>{notifications.length}</p>
            <button onClick={showToast}>Default</button>
            <button onClick={showSuccessToast}>Success</button>
            <button onClick={showErrorToast}>Error</button>
            <br />
            <br />
            <button onClick={clear}>Clear Notifications</button>
            <button onClick={() => markAllAsRead()}>Mark all as read</button>
            <ul>
                {notifications.map((notification) => (
                    <li
                        onClick={() => markAsRead(notification.id)}
                        key={notification.id}
                        style={
                            notification.read ? (
                                { background: 'green', color: 'silver', padding: '0 20px' }
                            ) : (
                                {
                                    border: '1px solid black',
                                    background: 'navy',
                                    color: '#fff',
                                    marginBottom: 20,
                                    cursor: 'pointer',
                                    padding: '0 20px'
                                }
                            )
                        }
                    >
                        <span>id: {notification.id}</span>
                        <p>title: {notification.data.title}</p>
                        <p>text: {notification.data.text}</p>
                    </li>
                ))}
            </ul>
            <ToastContainer />
        </div>
    );
};
export default Dash;

Hãy để tôi giải thích đoạn mã trên.

Đầu tiên, chúng tôi đang lập bản đồ thông qua trung tâm thông báo của chúng tôi (là một loạt các mục thông báo) và nhận và idcác tin nhắn nâng ly của chúng tôi.titletext

Sau đó, nhờ trình xử lý sự kiện ReactonClick , khi bất kỳ mục thông báo nào được nhấp vào, chúng ta có thể sử dụng markAsReadchức năng để đánh dấu mục đó là đã đọc.

Chúng tôi cũng đã hướng dẫn chương trình thay đổi màu nền từ xanh lam sang xanh lục readcủa mục thông báo để phân biệt giữa thông báo đã đọc và chưa đọc.

Nút “Đánh dấu tất cả là đã đọc” sử dụng markAllAsReadchức năng để thay đổi readtrạng thái của tất cả các mục thông báo thành true. Khi nhấp vào nút này, tất cả các hình nền của mục sẽ thay đổi màu sắc.

Cuối cùng, nút “Xóa thông báo” sử dụng clearchức năng xóa hoặc xóa tất cả các mục khỏi trung tâm thông báo.

Hãy nhớ rằng, bất kỳ biến thể bánh mì nướng nào bạn gọi - dù là , toast.successhay bất kỳ loại nào khác - đều sẽ được thêm vào trung tâm thông báo, như sau:toast.errortoast.update

Thông báo React-Toastify theo kiểu màu xanh lam và xanh lá cây được hiển thị dưới dạng cửa sổ bật lên và trong trung tâm thông báo

Sự kết luận

Trong hướng dẫn này, chúng ta đã học cách tạo kiểu cho các thông điệp nâng ly bằng React-Toastify. Chúng tôi cũng thấy rằng chúng tôi có thể tạo và tạo kiểu thông báo bánh mì nướng tùy chỉnh theo bất kỳ cách nào chúng tôi muốn.

Cuối cùng, chúng tôi đã xem cách sử dụng useNotificationCenterhook để tạo một trung tâm thông báo thú vị và hiển thị tất cả các thông báo của chúng tôi.

React-Toastify là một thư viện bánh mì nướng React hữu ích vì nó có khả năng tùy biến cao và cung cấp nhiều biến thể bánh mì nướng. Các công cụ khác có sẵn nếu bạn cần nhiều chức năng hơn, chẳng hạn như triển khai chúc mừng hoạt hình trong React .

Cảm ơn vì đã đọc. Tôi hy vọng bài viết này hữu ích trong việc trình bày cách sử dụng công cụ React-Toastify đúng cách. Nếu bạn có bất kỳ câu hỏi nào khác, hãy cho tôi biết trong phần bình luận bên dưới.

Nguồn: https://blog.logrocket.com/using-react-toastify-style-toast-messages/

#react

What is GEEK

Buddha Community

Sử Dụng React-toastify để Tạo Kiểu Cho Các Tin Nhắn Trong ứng Dụng

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

Performance: It delivers optimal performance.
Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
UI design: React Native enables you to design simple and responsive UI for your mobile app.
3rd party plugins: This framework supports 3rd party plugins.
Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
Near-native user experience: React Native provides several native components, and these are platform agnostic.
The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Hoang Ha

1657775460

Sử Dụng React-toastify để Tạo Kiểu Cho Các Tin Nhắn Trong ứng Dụng

Các nhà phát triển giao diện người dùng sử dụng HTML, CSS và JavaScript để xây dựng giao diện đồ họa cho các trang web mà người dùng có thể nhìn thấy và tương tác. Mục tiêu là xây dựng và thiết kế một trang web mà người dùng có thể mở, sử dụng và tương tác dễ dàng, đặc biệt là khi đọc thông tin quan trọng.

Một phần của phát triển giao diện người dùng liên quan đến việc trang web đẹp và thẩm mỹ như thế nào, còn được gọi là giao diện người dùng. Một khía cạnh khác được gọi là UX liên quan đến việc sử dụng trang web dễ dàng và đơn giản như thế nào.

Các công cụ khác nhau tồn tại để giúp chúng tôi đạt được cả UI và UX tuyệt vời. Một trong những công cụ thú vị mà chúng ta có thể sử dụng trong giao diện người dùng là React-Toastify.

Trong bài viết này, chúng ta sẽ tìm hiểu về React-Toastify và cách chúng ta có thể sử dụng nó để tạo thông báo, tin nhắn và cửa sổ bật lên trong ứng dụng React của mình.

Để làm theo hướng dẫn này, bạn cần cài đặt React và Node trong máy tính của mình. Chúng ta sẽ xem xét cách cài đặt gói React-Toastify trong phần tiếp theo.

React-Toastify là gì?

React-Toastify là một trong những thư viện bánh mì nướng React hàng đầu hiện có . Công cụ này cho phép bạn thêm thông báo bánh mì nướng vào ứng dụng của mình một cách dễ dàng và cũng có thể được sử dụng để đặt thông báo và cảnh báo.

Thông báo toast hoặc Toastify là các thông báo bật lên hiển thị một số thông tin cho người dùng. Thông tin này có thể là thông báo thành công, cảnh báo, lỗi, v.v., như thể hiện trong hình ảnh bên dưới:

Sáu loại thông báo React-Toastify ở sáu vị trí

Sử dụng bất kỳ lệnh nào dưới đây để cài đặt gói React-Toastify .

/* NPM */
$ npm install --save react-toastify

/* YARN */
$ yarn add react-toastify

Sau khi cài đặt xong, bạn phải nhập gói bên trong thành phần của mình như minh họa bên dưới. React-Toastify đi kèm với một tệp CSS phải được nhập để công cụ hoạt động.

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Tạo kiểu cho tin nhắn bánh mì nướng của bạn với React-Toastify

Hãy để chúng tôi phát triển ứng dụng React của mình và xem cách chúng tôi có thể sử dụng React-Toastify để tạo kiểu cho các thông điệp nâng ly của chúng tôi.

Hãy nhớ rằng tin nhắn bánh mì nướng là những thông báo hoặc cảnh báo mà chúng tôi muốn hiển thị cho người dùng tại một thời điểm nhất định. Những thông báo này có thể được hiển thị khi người dùng đăng nhập thành công, lỗi đăng nhập, khi yêu cầu xấu xảy ra, khi thông tin quan trọng được nhấp, v.v.

Trong App.jstệp của bạn, hãy nhập react-toastifygói và tệp CSS của nó:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Sau đó, bạn có thể gọi toastvà chèn Success Notification !tin nhắn của mình:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
    const showToastMessage = () => {
        toast.success('Success Notification !', {
            position: toast.POSITION.TOP_RIGHT
        });
    };
    return (
        <div>
            <button onClick={showToastMessage}>Notify</button>
            <ToastContainer />
        </div>
    );
}
export default App;

Lưu ý rằng chúng tôi cũng đã gọi ToastContainermã ở trên. Hộp chứa này chứa cửa sổ bật lên bánh mì nướng của chúng tôi. Nếu không có nó, cửa sổ bật lên bánh mì nướng của chúng tôi sẽ không được hiển thị.

Việc hiển thị mã này sẽ cho chúng ta kết quả bên dưới khi chúng ta nhấp vào Notifynút:

Ví dụ về thông báo thành công React-Toastify Hiển thị ở trên cùng bên phải của hình ảnh

Cách thay đổi vị trí tin nhắn bánh mì nướng của bạn

Tất cả nâng cốc được đặt ở trên cùng bên phải của trình duyệt của bạn theo mặc định. Vị trí này có thể được thay đổi bằng cách gán một vị trí mới cho bánh mì nướng. React-Toastify cho phép sáu vị trí:

Trên cùng bên phải
Trung tâm hàng đầu
Trên cùng bên trái
Góc phải ở phía dưới
Trung tâm trên
Dưới cùng bên trái

Tùy thuộc vào nơi bạn muốn tin nhắn nâng ly của mình, bạn có thể đặt một vị trí như vậy trong App.jstệp của mình:

toast.success('Success Notification !', {
    position: toast.POSITION.TOP_RIGHT
});
toast.success('Success Notification !', {
    position: toast.POSITION.TOP_CENTER
});
toast.success('Success Notification !', {
    position: toast.POSITION.TOP_LEFT
});
toast.success('Success Notification !', {
    position: toast.POSITION.BOTTOM_RIGHT
});
toast.success('Success Notification !', {
    position: toast.POSITION.BOTTOM_LEFT
});
toast.success('Success Notification !', {
    position: toast.POSITION.BOTTOM_CENTER
});

Trình diễn sáu vị trí thông báo React-Toastify có sẵn để sử dụng với thông báo thành công ở mỗi vị trí

Cách phân biệt giữa các loại tin nhắn bánh mì nướng

Tương tự như đặt vị trí của tin nhắn bánh mì nướng, bạn có thể yêu cầu trình phát bánh mì nướng chỉ định các loại thông báo bánh mì nướng khác nhau để người dùng có thể hiểu rõ hơn về thông tin đang được hiển thị.

Đặc tả là một cách hữu ích để cải thiện trải nghiệm người dùng cho ứng dụng React của bạn . Kỹ thuật này sử dụng các màu sắc khác nhau cho từng loại tin nhắn chúc mừng để giúp người dùng hiểu nhanh thông tin họ thấy dễ dàng hơn.

Ví dụ: thông báo bánh mì nướng màu đỏ thường ngụ ý cảnh báo hoặc thông báo lỗi, cũng như thông báo màu xanh lá cây thường ngụ ý phản hồi thành công. Về bản chất, bạn có thể đặt cụ thể một biến thể bánh mì nướng cho các thông báo lỗi, thông tin chung, cảnh báo, v.v.

Để chỉ định trình phát bánh mì nướng của bạn, hãy gọi bánh mì nướng trong App.jstệp của bạn với bất kỳ biến thể nào dưới đây:

toast.success('Success Notification !', {
    position: toast.POSITION.TOP_RIGHT
});
toast.error('Error Notification !', {
    position: toast.POSITION.TOP_CENTER
});
toast.warning('Warning Notification !', {
    position: toast.POSITION.TOP_LEFT
});
toast.info('Information Notification !', {
    position: toast.POSITION.BOTTOM_CENTER
});
toast('Default Notification !', {
    position: toast.POSITION.BOTTOM_LEFT
});
toast('Custom Style Notification with css class!', {
     position: toast.POSITION.BOTTOM_RIGHT,
className: 'foo-bar'
});

Làm điều này sẽ dễ dàng cho người dùng biết những gì đang được hiển thị.

Sáu loại thông báo bánh mì nướng, mỗi loại hiển thị ở một vị trí khác nhau trên màn hình

Quan sát thông báo bánh mì nướng cuối cùng mà chúng tôi đã tạo, hiển thị ở dưới cùng bên phải của hình ảnh trên. Chúng tôi có thể thấy rằng chúng tôi đã thêm một classNamevào nó, không giống như những người khác. Đó là một bánh mì nướng tùy chỉnh. Hãy cùng tìm hiểu thêm về nâng cốc tùy chỉnh trong React-Toastify.

Cách tạo kiểu cho một tin nhắn bánh mì nướng tùy chỉnh

Bánh mì nướng tùy chỉnh là một thông báo chúng ta có thể tạo kiểu theo kiểu ưa thích của mình. Điều này cho phép chúng tôi cung cấp cho thông điệp bánh mì nướng của chúng tôi chiều cao, phông chữ, cỡ chữ, nền ưa thích của chúng tôi, v.v. tùy thuộc vào loại thông điệp mà chúng tôi muốn hiển thị.

Ví dụ: chúng tôi có thể muốn hiển thị bánh mì nướng phù hợp với kiểu trang web hoặc ứng dụng của chúng tôi. Một bánh mì nướng tùy chỉnh cho phép chúng tôi làm như vậy.

Để tạo kiểu thông điệp bánh mì nướng của riêng bạn trong App.jstệp của bạn, trước tiên hãy cung cấp cho nó một thông điệp classNamenhư được minh họa bên dưới:

toast('This is a custom toast Notification!', {
    position: toast.POSITION.BOTTOM_LEFT,
    className: 'toast-message'
});

Tiếp theo, tạo kiểu cho nó trong tệp CSS của bạn bằng cách sử dụng classNametùy chọn của bạn:

.toast-message {
    background: darkblue;
    color: #fff;
    font-size: 20px;
    width: 34vw;
    padding: 30px 20px;
}

Với các kiểu được chỉ định trong ví dụ về khối mã ở trên, bạn sẽ thấy kết quả sau:

Ví dụ Bánh mì nướng tùy chỉnh được tạo bằng React-Toastify Hiển thị ở dưới cùng bên trái với màu xanh tùy chỉnh và kích thước lớn hơn

Cách tạo lời hứa trong React-Toastify

Ngoài các biến thể bánh mì nướng này, React-Toastify cũng cho phép chúng tôi tạo và hiển thị Promisethông báo. Các thông báo bánh mì nướng này hiển thị khi bất kỳ lệnh gọi API nào đang được xử lý và trả về thông báo thành công hoặc thông báo lỗi sau khi cuộc gọi hoàn tất.

Để tạo lời chúc mừng hứa hẹn, hãy thêm phần sau vào App.jstệp của bạn:

const myPromise = new Promise((resolve) =>
    fetch("https://jsonplaceholder.typicode.com/post")
      .then((response) => response.json())
      .then((json) => setTimeout(() => resolve(json), 3000))
  );

  useEffect(() => {
    toast.promise(myPromise, {
      pending: "Promise is pending",
      success: "Promise  Loaded",
      error: "error"
    });
  }, []);

Trong toast.promise, chúng tôi thiết lập pending, successvà errorthông điệp. Thông báo pendingsẽ hiển thị khi quá trình tìm nạp thực thi. Tùy thuộc vào kết quả, hoặc successhoặc errorthông báo sẽ hiển thị sau đó.

GIF Hiển thị Thông báo Lời hứa React-Toastify Đang hoạt động, Đi từ Đang chờ Xử lý Với Vòng tròn Đang Tải đến Thành công Với Dấu Kiểm Màu xanh lá cây

Hiểu `useNotificationCenter`bản cập nhật trong React-Toastify v9

useNotificationCenterlà một bản cập nhật mới và lớn đi kèm với việc phát hành React-Toastify v9 . Nó là một hook xây dựng trung tâm thông báo của bạn trên React-Toastify.

Bất cứ khi nào bạn gọi bất kỳ biến thể bánh mì nướng nào - như toast.update,, v.v. toast.promise- toast.infothông báo bánh mì nướng sẽ được thêm vào trung tâm bánh mì nướng.

Mảng useNotificationCenterlà một mảng chứa tất cả các thông báo và do đó cho phép chúng tôi thực hiện một số chức năng của mảng như lọc, sắp xếp, ánh xạ, v.v. trên đó. Hãy sử dụng một ví dụ để hiểu rõ hơn về hook này.

Trước khi sử dụng hook này, trước tiên hãy nhập nó từ react-toastify addons, sau đó gọi nó trước returncâu lệnh trong App.jstệp của bạn:

import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';

const App = () => {
      const { notifications } = useNotificationCenter();
return ()}

Cái useNotificationCentermóc cho phép chúng ta sử dụng một số hàm và giá trị, bao gồm , và notificationsnhiều hàm khác. Hãy xem xét ý nghĩa của một vài trong số này.clearmarkAllAsReadmarkAsRead

notificationscung cấp cho chúng tôi quyền truy cập vào tất cả các mục thông báo hoặc tin nhắn bánh mì nướng mà chúng tôi có trong trung tâm của mình. Mỗi notificationItemtrong notificationsmảng chứa dữ liệu như dữ liệu id, readtrạng thái (boolean) theme,, isLoadingtrạng thái (boolean) và các thông tin khác.

Chức clearnăng loại bỏ tất cả các thông báo khỏi trung tâm thông báo.

markAllAsReadđánh dấu tất cả các thông báo là đã đọc, có nghĩa là nó thay đổi readboolean của mọi thông báo notificationItemtừ falseđến true. Trong khi đó, markAsReadchỉ thay đổi một notificationItemboolean thành true.

Tổng hợp tất cả kiến thức về React-Toastify của bạn lại với nhau

Bây giờ chúng ta đã hiểu về useNotificationCenterhook cùng với các vị trí, loại và tùy chỉnh của tin nhắn bánh mì nướng, hãy xem cách chúng ta có thể sử dụng chúng cùng nhau trong ứng dụng của mình.

Đầu tiên, nhập bốn useNotificationCenterchức năng mà chúng ta đã xem qua trong phần trước vào App.jstệp của bạn:

import React from 'react';
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const App = () => {
const { notifications, clear, markAllAsRead, markAsRead } = useNotificationCenter();
}

Như đã thấy ở trên, chúng tôi cũng đã nhập tệp CSS của chúng tôi toastvà ToastContainercủa nó để chúng tôi có thể gọi là bánh mì nướng. Tiếp tục trong App.jstệp, hãy tạo một hàm để gọi thông báo bánh mì nướng của chúng tôi:

import React from 'react';
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const App = () => {
    const { notifications, clear, markAllAsRead, markAsRead } = useNotificationCenter();
    const showToast = () => {
        toast('Hello World', {
            data: {
                title: 'Hello World Again',
                text: 'We are here again with another article'
            }
        });
    };
    return (
        <div>
            <p>{notifications.length}</p>
            <button onClick={showToast}>Click me</button>
            <ToastContainer />
        </div>
    );
};
export default App;

Lưu ý rằng trong đoạn mã trên, chúng tôi đã thêm một thẻ đoạn để hiển thị số lượng tin nhắn nâng ly mà chúng tôi đã gọi hoặc thêm vào trung tâm thông báo của mình.

Khi chúng tôi nhấp vào nút để gọi bánh mì nướng, nó sẽ tự động đi vào trung tâm thông báo. Số phía trên nút sau đó sẽ cập nhật để hiển thị số lượng tin nhắn bánh mì nướng mà chúng tôi đã thêm, như sau:

Trình diễn Tính năng React-Toastify phiên bản 9 Mới được gọi là sử dụng Thông báo Trung tâm với ba thông báo ở trên cùng bên phải

Tuyệt, phải không? Hãy xem chúng ta có thể làm gì khác với hook. Như đã đề cập trước đó, useNotificationCenterhook cho phép chúng ta thực hiện sắp xếp, ánh xạ và các hành động khác trên notificationsmảng.

Vẫn bên trong App.jstệp của bạn, hãy sao chép và dán mã bên dưới:

import React from 'react';
import { useNotificationCenter } from 'react-toastify/addons/use-notification-center';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const Dash = () => {
    const { notifications, clear, markAllAsRead, markAsRead } = useNotificationCenter();
    const showToast = () => {
        toast('Hello World', {
            data: {
                title: 'Hello World Again',
                text: 'We are here again with another article'
            }
        });
    };
    const showSuccessToast = () => {
        toast.success('Hello World', {
            data: {
                title: 'Success toast',
                text: 'This is a success message'
            }
        });
    };
    const showErrorToast = () => {
        toast.error('Hello World', {
            data: {
                title: 'Error toast',
                text: 'This is an error message'
            }
        });
    };
    return (
        <div>
            <p>{notifications.length}</p>
            <button onClick={showToast}>Default</button>
            <button onClick={showSuccessToast}>Success</button>
            <button onClick={showErrorToast}>Error</button>
            <br />
            <br />
            <button onClick={clear}>Clear Notifications</button>
            <button onClick={() => markAllAsRead()}>Mark all as read</button>
            <ul>
                {notifications.map((notification) => (
                    <li
                        onClick={() => markAsRead(notification.id)}
                        key={notification.id}
                        style={
                            notification.read ? (
                                { background: 'green', color: 'silver', padding: '0 20px' }
                            ) : (
                                {
                                    border: '1px solid black',
                                    background: 'navy',
                                    color: '#fff',
                                    marginBottom: 20,
                                    cursor: 'pointer',
                                    padding: '0 20px'
                                }
                            )
                        }
                    >
                        <span>id: {notification.id}</span>
                        <p>title: {notification.data.title}</p>
                        <p>text: {notification.data.text}</p>
                    </li>
                ))}
            </ul>
            <ToastContainer />
        </div>
    );
};
export default Dash;

Hãy để tôi giải thích đoạn mã trên.

Đầu tiên, chúng tôi đang lập bản đồ thông qua trung tâm thông báo của chúng tôi (là một loạt các mục thông báo) và nhận và idcác tin nhắn nâng ly của chúng tôi.titletext

Sau đó, nhờ trình xử lý sự kiện ReactonClick , khi bất kỳ mục thông báo nào được nhấp vào, chúng ta có thể sử dụng markAsReadchức năng để đánh dấu mục đó là đã đọc.

Chúng tôi cũng đã hướng dẫn chương trình thay đổi màu nền từ xanh lam sang xanh lục readcủa mục thông báo để phân biệt giữa thông báo đã đọc và chưa đọc.

Nút “Đánh dấu tất cả là đã đọc” sử dụng markAllAsReadchức năng để thay đổi readtrạng thái của tất cả các mục thông báo thành true. Khi nhấp vào nút này, tất cả các hình nền của mục sẽ thay đổi màu sắc.

Cuối cùng, nút “Xóa thông báo” sử dụng clearchức năng xóa hoặc xóa tất cả các mục khỏi trung tâm thông báo.

Hãy nhớ rằng, bất kỳ biến thể bánh mì nướng nào bạn gọi - dù là , toast.successhay bất kỳ loại nào khác - đều sẽ được thêm vào trung tâm thông báo, như sau:toast.errortoast.update

Thông báo React-Toastify theo kiểu màu xanh lam và xanh lá cây được hiển thị dưới dạng cửa sổ bật lên và trong trung tâm thông báo

Sự kết luận

Trong hướng dẫn này, chúng ta đã học cách tạo kiểu cho các thông điệp nâng ly bằng React-Toastify. Chúng tôi cũng thấy rằng chúng tôi có thể tạo và tạo kiểu thông báo bánh mì nướng tùy chỉnh theo bất kỳ cách nào chúng tôi muốn.

Cuối cùng, chúng tôi đã xem cách sử dụng useNotificationCenterhook để tạo một trung tâm thông báo thú vị và hiển thị tất cả các thông báo của chúng tôi.

React-Toastify là một thư viện bánh mì nướng React hữu ích vì nó có khả năng tùy biến cao và cung cấp nhiều biến thể bánh mì nướng. Các công cụ khác có sẵn nếu bạn cần nhiều chức năng hơn, chẳng hạn như triển khai chúc mừng hoạt hình trong React .

Cảm ơn vì đã đọc. Tôi hy vọng bài viết này hữu ích trong việc trình bày cách sử dụng công cụ React-Toastify đúng cách. Nếu bạn có bất kỳ câu hỏi nào khác, hãy cho tôi biết trong phần bình luận bên dưới.

Nguồn: https://blog.logrocket.com/using-react-toastify-style-toast-messages/

#react

Mathew Rini

1615544450

How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
React.js and React Native have similar syntax and workflows, but their implementation is quite different.
React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

United States- $120,000
Canada - $110,000
United Kingdom - $71,820
The Netherlands $49,095
Spain - $35,423.00
France - $44,284
Ukraine - $28,990
India - $9,843
Sweden - $55,173
Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

Conduct thorough candidate research, including portfolios and areas of expertise.
Before you sit down with your interviewing panel, do some homework.
Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer

Franz Becker

1651604400

React Starter Kit: Build Web Apps with React, Relay and GraphQL.

React Starter Kit — "isomorphic" web app boilerplate

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap | Join #react-starter-kit chat room on Gitter | Visit our sponsors:

Hiring

Getting Started

Follow the getting started guide to download and run the project (Node.js >= 8.16.2)
Check the code recipes used in this boilerplate, or share yours

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

feature/redux (PR) — isomorphic Redux by Pavel Lang (see how to integrate Redux) (based on master)
feature/apollo (PR) — isomorphic Apollo Client by Pavel Lang (see Tracking PR #1147) (based on feature/redux)
feature/react-intl (PR) — isomorphic Redux and React Intl by Pavel Lang (see how to integrate React Intl) (based on feature/apollo)
feature/apollo-pure (PR) — Apollo devtools and TypeScript integration by piglovesyou (based on master)

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

	React Starter Kit	React Static Boilerplate	ASP.NET Core Starter Kit
App type	Isomorphic (universal)	Single-page application	Single-page application
Frontend
Language	JavaScript (ES2015+, JSX)	JavaScript (ES2015+, JSX)	JavaScript (ES2015+, JSX)
Libraries	React, History, Universal Router	React, History, Redux	React, History, Redux
Routes	Imperative (functional)	Declarative	Declarative, cross-stack
Backend
Language	JavaScript (ES2015+, JSX)	n/a	C#, F#
Libraries	Node.js, Express, Sequelize, GraphQL	n/a	ASP.NET Core, EF Core, ASP.NET Identity
SSR	Yes	n/a	n/a
Data API	GraphQL	n/a	Web API

Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

lehneres Tarkan Anlar Morten Olsen Adam David Ernst Zane Hitchcox

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

Related Projects

GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

#react-starter-kit on Stack Overflow — Questions and answers
#react-starter-kit on Gitter — Watch announcements, share ideas and feedback
GitHub issues, or Scrum board — File issues, send feature requests
appear.in/react — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
@koistya on Codementor, or Skype — Private consulting

License

Author: kriasoft
Source Code: https://github.com/kriasoft/react-starter-kit
License: MIT License

#graphql #react

Juned Ghanchi

1621573085

React Native App Developers India, React Native App Development Company

Expand your user base by using react-native apps developed by our expert team for various platforms like Android, Android TV, iOS, macOS, tvOS, the Web, Windows, and UWP.

We help businesses to scale up the process and achieve greater performance by providing the best react native app development services. Our skilled and experienced team’s apps have delivered all the expected results for our clients across the world.

To achieve growth for your business, hire react native app developers in India. You can count on us for all the technical services and support.

#react native app development company india #react native app developers india #hire react native developers india #react native app development company #react native app developers #hire react native developers

Sử Dụng React-toastify để Tạo Kiểu Cho Các Tin Nhắn Trong ứng Dụng

React-Toastify là gì?

Tạo kiểu cho tin nhắn bánh mì nướng của bạn với React-Toastify

Cách thay đổi vị trí tin nhắn bánh mì nướng của bạn

Cách phân biệt giữa các loại tin nhắn bánh mì nướng

Cách tạo kiểu cho một tin nhắn bánh mì nướng tùy chỉnh

Cách tạo lời hứa trong React-Toastify

Hiểu useNotificationCenterbản cập nhật trong React-Toastify v9

Tổng hợp tất cả kiến ​​thức về React-Toastify của bạn lại với nhau

Sự kết luận

What is GEEK

Buddha Community

How native is React Native? | React Native vs Native App Development

A brief introduction to React Native

Why React Native is fundamentally different from earlier hybrid frameworks

Sử Dụng React-toastify để Tạo Kiểu Cho Các Tin Nhắn Trong ứng Dụng

React-Toastify là gì?

Tạo kiểu cho tin nhắn bánh mì nướng của bạn với React-Toastify

Cách thay đổi vị trí tin nhắn bánh mì nướng của bạn

Cách phân biệt giữa các loại tin nhắn bánh mì nướng

Cách tạo kiểu cho một tin nhắn bánh mì nướng tùy chỉnh

Cách tạo lời hứa trong React-Toastify

Hiểu useNotificationCenterbản cập nhật trong React-Toastify v9

Tổng hợp tất cả kiến ​​thức về React-Toastify của bạn lại với nhau

Sự kết luận

How to Select and Hire the Best React JS and React Native Developers?

What is React.js?

React vs React Native

What is the Average React Developer Salary?

* React.js Developer Salary by Country

How to Hire React.js Developers?

Why is React.js Popular?

Final thoughts:

React Starter Kit: Build Web Apps with React, Relay and GraphQL.

React Starter Kit — "isomorphic" web app boilerplate

Getting Started

Customization

Comparison

Backers

How to Contribute

Learn More

Related Projects

Support

License

React Native App Developers India, React Native App Development Company

Hiểu `useNotificationCenter`bản cập nhật trong React-Toastify v9

Tổng hợp tất cả kiến thức về React-Toastify của bạn lại với nhau

Hiểu `useNotificationCenter`bản cập nhật trong React-Toastify v9

Tổng hợp tất cả kiến thức về React-Toastify của bạn lại với nhau