AdminLTE with React and Vite: A Comprehensive Guide

This guide will help you get started using AdminLTE with React, specifically in a Vite project. AdminLTE provides a responsive and customizable admin dashboard template built on top of Bootstrap, and here we will walk through the process of integrating it with React.

Prerequisites

Basic knowledge of React and JavaScript
Node.js installed on your machine (preferably the latest LTS version or at least version 20)
A package manager like npm or yarn

Step 1: Create a New Vite Project

To start, we'll create a new React project using Vite. Vite is a modern build tool that provides fast and optimized development.

Open your terminal and run the following command to create a new Vite project:
```
npm create vite@latest
```
Select React as the project template when prompted.
Navigate into your project directory:
```
cd your-project-name
```

Step 2: Install AdminLTE

AdminLTE has recently made the transition from Bootstrap 4 to Bootstrap 5, and as of version 4.0.0-beta2, jQuery has been removed. This is a major update, and it is recommended to start using the latest beta version to avoid vulnerabilities in the LTS version.

Install AdminLTE via npm:

npm i admin-lte

This will add AdminLTE as a dependency in your package.json file.

Step 3: Include AdminLTE Assets in `index.html`

To properly use AdminLTE, you'll need to include its JavaScript and CSS files in your index.html file. Vite uses this file as the entry point to load the necessary resources.

Open the index.html file located in the public directory.

Add the following <script> and <link> tags in the <head> section of your index.html file:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/css/adminlte.min.css"
/>
<script
  src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/js/adminlte.min.js"
></script>

This links the latest AdminLTE styles and scripts to your project.

Step 4: Recommended Configure Bootstrap and FontAwesome

Since AdminLTE is built on top of Bootstrap 5, you should also include Bootstrap and FontAwesome (optional, but recommended for icons).

Add these links to your index.html file, alongside the AdminLTE links:

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

Add the Bootstrap JavaScript as well:

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Step 5: Convert AdminLTE Components to React

AdminLTE provides many ready-made components in HTML format. To use them in a React project, you will need to convert them from HTML to JSX (React’s HTML-like syntax).

Here’s a simple example of converting an AdminLTE card component:

Visit the documentation AdminLTE Components Documentation.
Copy an HTML snippet for a component you want to use (e.g., a card).

Convert the HTML to JSX. For example, an AdminLTE card in HTML might look like this:

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Default Card Example</h3>
    <div class="card-tools">
      <span class="badge badge-primary">Label</span>
    </div>
  </div>
  <div class="card-body">
    The body of the card
  </div>
  <div class="card-footer">
    The footer of the card
  </div>
</div>

Convert this to JSX:

<div className="card">
  <div className="card-header">
    <h3 className="card-title">Default Card Example</h3>
    <div className="card-tools">
      <span className="badge badge-primary">Label</span>
    </div>
  </div>
  <div className="card-body">The body of the card</div>
  <div className="card-footer">The footer of the card</div>
</div>

Note: Remember that in JSX, you must replace class with className.

Step 6: Start Your Development Server

Now that everything is set up, you can start your development server and see AdminLTE in action within your React components.

Run the following command to start the Vite development server:
```
npm run dev
```
Open your browser and navigate to the provided localhost URL.

Conclusion

You’re now ready to build out your admin dashboard using AdminLTE in a React project powered by Vite. This setup gives you the flexibility and speed of React while leveraging AdminLTE’s powerful UI components.

If you have any questions or need more detailed explanations of specific components, feel free to refer to the old AdminLTE documentation while the new documentation is being drafted, or reach out to the community!

Happy coding!

Uh oh!

How to use in React? #5737

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions