React-Bootstrap 中的警报

简介： React-Bootstrap 是一个前端框架，其设计时考虑到了 react。 Bootstrap 是为 React 重新构建和改进的，因此它被称为 React-Bootstrap。警报用于在屏幕上弹出通知。根据场景，警报的性质和主题会发生变化。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

第 3 步：创建 ReactJS 应用程序后，安装 使用以下命令所需的模块：

npm install react-bootstrap bootstrap

项目结构：它将如下所示。

项目结构

App.js：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

Javascript

import react from "react";
import Alert from "react-bootstrap/Alert";
  
const App = () => {
  return (
    

      
        
          This is a success alert which has green background
        
      
  
      
        
          This is a secondary alert which has grey background
        
      
  
      
        
          This is a primary alert which has blue background
        
      
  
      
        
          This is a danger alert which has red background
        
      
  
      
        
          This is a warning alert which has yellow background
        
      
  
      
        
          This is a light alert which has white background
        
      
  
      
        
          This is a dark alert which has dark grey background
        
      
  
      
        
          This is a info alert which has light blue background
        
      
    
  );
};
  
export default App;

使用以下命令运行服务器：

npm start

输出：