Create React Modal using reactjs-popup

Bài viết được dịch từ nguồn: https://hackernoon.com/create-react-modal-using-reactjs-popup-m24m231v1

Ngày nay, Modals là một trong những thành phần được sử dụng nhiều nhất trong Ứng dụng React, có một cách dễ dàng để tạo React Modals, sẽ giúp bạn nhanh chóng sử dụng các tính năng liên quan đến Modals trong Ứng dụng React sắp tới của bạn.

Trong hướng dẫn này, chúng tôi sẽ xây dựng một React Modal đơn giản chỉ sử dụng 22 dòng code.

Ảnh gif dưới đây sẽ giúp bạn hiểu những gì chúng tôi đang cố gắng xây dựng

Create React Project

Đầu tiên, tạo một app react đơn giản bằng cách sử dụng create-react-app CLI.

$ npx Create-react-app SimpleModal

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Create React Modal in X line of code </h1>
      <button>Click Me</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Trong hướng dẫn này, chúng tôi sẽ sử dụng React-popup package, một thành phần react-component đơn giản và mạnh mẽ với rất nhiều lợi ích:

• Modal, Tooltip, Menu: All in one