Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to use in React? #5737

Open
stesvis opened this issue Oct 15, 2024 · 8 comments
Open

How to use in React? #5737

stesvis opened this issue Oct 15, 2024 · 8 comments

Comments

@stesvis
Copy link

stesvis commented Oct 15, 2024

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
Copy link

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

@stesvis
Copy link
Author

stesvis commented Oct 21, 2024

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
Copy link

@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
Copy link

@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
Copy link

@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
Copy link

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

@CavaliereDavid
Copy link

CavaliereDavid commented Oct 23, 2024 •
edited
Loading

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.

  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/[email protected]/dist/css/adminlte.min.css"
/>
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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
Copy link

Really useful bro, thanks a lot man @CavaliereDavid

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@stesvis @sact1909 @CavaliereDavid