search

ColorlibHQ / AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 5
https://adminlte.io
MIT License
44.01k stars 18.17k forks source link

How to use in React? #5737

Open stesvis opened 1 week ago

stesvis commented 1 week ago

I created a react app, and installed AdminLTE with npm i admin-lte and everything is in node_modules.

How can i now use the theme (like use the css classes etc) without copying the dist folder to the public folder?

CavaliereDavid commented 3 days ago

I am also working on a new application using React + Vite. If you'd like, we can collaborate and help each other.

stesvis commented 3 days ago

I am also working on a new application using React + Vite. If you'd like, we can collaborate and help each other.

I've tried different solutions but eventually i switched to a different theme that i already used in the past and i was familiar with.

But I'll still be curious to know if someone figures it out.

sact1909 commented 2 days ago

@CavaliereDavid @stesvis having the same problem, I tried to use version 4 with Next and Vite and I couldn't handle it, I had to downgrade to AdminLTE 3.2 to use it with React + Vite

CavaliereDavid commented 1 day ago

@CavaliereDavid @stesvis having the same problem, I tried to use version 4 with Next and Vite and I couldn't handle it, I had to downgrade to AdminLTE 3.2 to use it with React + Vite

I found a way to use the latest version with React (ts) and vite. However, I am not sure if AdminLTE is the right answer for my needs after tinkering with It. If you need help, I am available.

sact1909 commented 1 day ago

@CavaliereDavid @stesvis having the same problem, I tried to use version 4 with Next and Vite and I couldn't handle it, I had to downgrade to AdminLTE 3.2 to use it with React + Vite

I found a way to use the latest version with React (ts) and vite. However, I am not sure if AdminLTE is the right answer for my needs after tinkering with It. If you need help, I am available.

nice man, if you found a way I would like to learn from you, how can we do a meet or whatever, you just tell me

CavaliereDavid commented 1 day ago

Ok let's do It now: https://meet.jit.si/UnfairTitlesSitTogether

CavaliereDavid commented 1 day ago

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

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.

  1. Open your terminal and run the following command to create a new Vite project:

    npm create vite@latest

  2. Select React as the project template when prompted.

  3. 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.

  1. 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.

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

  2. 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).

  1. 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" />

  2. 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:

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

  3. 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.

  1. Run the following command to start the Vite development server:

    npm run dev

  2. 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!

sact1909 commented 1 day ago

Really useful bro, thanks a lot man @CavaliereDavid