ReactJS version of the original AdminLTE dashboard (EXPERIMENTAL)- https://github.com/almasaeed2010/AdminLTE
ReactJS version of the original AdminLTE dashboard - https://github.com/almasaeed2010/AdminLTE. This project consists of widgets, charts and other components written in ReactJS. Stylesheets are borrowed from the AdminLTE project.
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,
change this to
Then you can run
webpack-dev-server --hot --inlinejust 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 -pevery time you make some edit in your code. You can later change the
scripttags 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 :oncomingpolicecar:
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. - Place/move your component inside the /src/components folder and include it inside
widgets.src.js. - Run
npm buildto generate the library
reactjsAdminlte.js. Your component will be included in the library! - To make sure that your component works correctly, test it out by including it in the page using the library.