ReactJS version of the original AdminLTE dashboard - https://awesomeopensource.com/project/almasaeed2010/AdminLTE. This project consists of widgets, charts and other components written in ReactJS. Stylesheets are borrowed from the AdminLTE project.
Thank you kindly for the ⭐ and forks. When I first started working on this project in 2015, I had just graduated from college and had no prior exposure to web-development or open source. I was very new to the open-source world, and did not fully grasp the challenges in maintaining an open-source project sustainably.
For few months while I was working in a fast-paced startup, I moved my focus away from ReactJS to focus on other technologies. But by the time I once again tried to resume work on this project, the ReactJS core library, tooling and ecosystem had changed so rapidly that this repository practically needed a rewrite from scratch. As evident from the number of issues that users kept raising - the project was rendered unusable in the later versions of React.
Without financial support, it was overwhelming to fix these issues, not to mention that I felt like an absolute imposter. With a heavy heart 💔, I decided to archive this project, and as-of-today, this is where it stands.
Back in 2015, ready-to-use React component libraries were somewhat unknown, and this was one of my very early attempts at creating one. Today, there are several excellent projects that are actively maintained, and they are backed by corporate sponsorship. Here are just a few:
So my fellow hipster, you're much better off using one of those than this one. This repo might just be of historical academic interest to you, but try not to use this one in a real project.
I take comfort knowing that this has been quite the learning experience, and since then I have been educating myself on open-source sustainability. 🔥 Today I have other projects that I now actively maintain, that could really use your ⭐ and support. Please visit my profile and check out my pinned repositories for the same. Thank you 🙏🏼
If you use React in your app, you might find some of these components useful!
Will soon be populated with charts.
More stuff coming soon. Stay tuned!
npm install adminlte-reactjs
var reactjsAdminlte = require('adminlte-reactjs'). You may prefer the AMD style or the import statement.
var ProfileCard = reactjsAdminlte.ProfileCard.
var StatTile = require('adminlte-reactjs/src/components/stat-tile')
npm install adminlte-reactjs.
npm run dev
webpack -pto generate the bundle for the page, and include the bundle and associated vendors for it in the page using
webpack-dev-serveralong with React Hot Loader can be used to ease your development workflow. This can be done by installing dev dependencies from
package.jsonfile. If you haven't, then run
npm install webpack-dev-serverand
scripttags. So if you have these bundles for example,
<script src="/dist/js/vendors.js"></script> <script src="/dist/js/app.bundle.js"></script>
change this to
<script src="http://localhost:8080/dist/js/vendors.js"></script> <script src="http://localhost:8080/dist/js/app.bundle.js"></script>
Then you can run
webpack-dev-server --hot --inline just once - and every time you make any edits to your code and save it, the server will automatically create bundles and update the changes in the browser. This is highly recommended instead of running
webpack -p every time you make some edit in your code. You can later change the
script tags back once you stop
For a detailed explanation on setting up a workflow using Webpack, check out my blog post - Webpack for The Fast and The Furious 🚔
This is still a work in progress and will get better over time.
After you've finished writing a component and testing it out, you can include it in the library.
npm buildto generate the library
reactjsAdminlte.js. Your component will be included in the library!