o get started, you’ll need to have Node.js and NPM installed on your machine. Once you have those installed, you can follow these steps:
-
Create a new React app using create-react-app:
perlCopy code
npx create-react-app my-app cd my-app -
Install Cube.js and its dependencies:
scssCopy code
npm install --save cubejs @cubejs-client/core @cubejs-client/react -
In your React app, create a new file called
cube.jsin thesrcdirectory, and add the following code:jsCopy code
import CubejsServerCore from '@cubejs-backend/server-core'; const serverCore = new CubejsServerCore(); export default serverCore; -
In your React app, create a new file called
App.jsin thesrcdirectory, and add the following code:jsCopy code
import React from 'react'; import { CubeProvider } from '@cubejs-client/react'; import cubejs from './cube'; const App = () => { return ( <CubeProvider cubejsApi={cubejs}> <div>My Fancy Dashboard</div> </CubeProvider> ); }; export default App; -
Replace the
divin theAppcomponent with your own custom dashboard components using theuseCubeQueryhook from@cubejs-client/react. Here’s an example of how you can use the hook:jsCopy code
import React from 'react'; import { useCubeQuery } from '@cubejs-client/react'; const MyDashboardComponent = () => { const { resultSet } = useCubeQuery({ measures: ['Orders.count'], dimensions: ['Orders.createdAt.month'], }); if (!resultSet) { return <div>Loading...</div>; } return ( <div> <h1>Orders by Month</h1> <ul> {resultSet.chartPivot().map(row => ( <li key={row.x}> {row.x}: {row['Orders.count']} </li> ))} </ul> </div> ); }; -
Finally, in your React app’s
index.jsfile, render theAppcomponent:jsCopy code
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
These are the basic steps to create a React app with a fancy dashboard on an interactive interface using Cube.js. From here, you can customize the dashboard to your liking and add more components using Cube.js queries.