{"id":2257,"date":"2022-01-25T18:15:57","date_gmt":"2022-01-25T18:15:57","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2257"},"modified":"2022-01-25T18:15:57","modified_gmt":"2022-01-25T18:15:57","slug":"creating-dashboards-in-react-with-react-dashboard","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2257","title":{"rendered":"Creating dashboards in React with React Dashboard"},"content":{"rendered":"\n

Flatologic<\/a> is a company that offers free and premium dashboard templates in various frameworks. Whether in Angular, Vue, or React, developers can find many user-friendly pre-built applications to suit their needs.<\/p>\n\n\n\n\n\n\n\n

Rather than starting a project from scratch, this drastically reduces the amount of coding involved and gets a project running quickly. In this tutorial, we will focus on their free template called React Dashboard<\/a>.<\/p>\n\n\n\n

This template is built with React, Bootstrap, React Router, Redux, and GraphQL. It comes with a React frontend and a Node.js backend. Authentication is included and the layout is responsive.<\/p>\n\n\n\n

This tutorial will cover how to create a dashboard in three easy steps. Then, we will connect it to an SQL database with MAMP so you have some local data.<\/p>\n\n\n\n

Setting up the React Dashboard project<\/h2>\n\n\n\n

To start with, let\u2019s clone the React Dashboard repository and choose a name for our new project.<\/p>\n\n\n\n

git clone -o React Dashboard -b master --single-branch https:\/\/github.com\/flatlogic\/React Dashboard.git <app-name><\/pre>\n\n\n\n
Once the project is cloned on our local machine, we can proceed with installing the required dependencies.<\/p>\n\n\n\n
cd <app-name>\nyarn install<\/pre>\n\n\n\n
At the time of writing, React Dashboard runs into an issue when you run yarn install<\/code> and there is a GitHub issue<\/a> logged. Here is a snippet of the error:<\/p>\n\n\n\n
    error \/Users\/....\/node_modules\/sqlite3: Command failed.\n    Exit code: 1\n    Command: node-pre-gyp install --fallback-to-build<\/pre>\n\n\n\n
If you run yarn add sqlite3<\/code> separately and then re-run yarn install<\/code>, things should work fine.<\/p>\n\n\n\n
Now, we can run yarn dev<\/code>. Once done, this will launch the backend and frontend servers, which will be accessible on port 5000<\/code> and 3000<\/code>, respectively. If we navigate to http:\/\/localhost:3000\/<\/a><\/code>, we should see our dashboard:<\/p>\n\n\n\n
\"React<\/figure><\/div>\n\n\n\n
<\/a><\/p>\n\n\n\n
This project also comes with GraphQL. Once the app is launched, the playground is accessible at http:\/\/localhost:5000\/graphql<\/a><\/code>. If you are unfamiliar with this technology, do not hesitate to read the GraphQL documentation<\/a> and learn how to create queries and mutations.<\/p>\n\n\n\n
Creating the dashboard and table<\/h2>\n\n\n\n
We have a great dashboard, but at the moment, it is working with hard-coded values. To make it more valuable, let\u2019s connect our new application to a local database.<\/p>\n\n\n\n
You can choose any database, but for the sake of this tutorial, I will connect a MySQL database. To create one, I am using MAMP<\/a>, which allows you to get Apache, Nginx, PHP, and MySQL out of the box. If you do not have MAMP, you can download it here<\/a>.<\/p>\n\n\n\n
Once it is installed, start the application and click Webstart<\/strong>.<\/p>\n\n\n\n
\"MAMP<\/figure><\/div>\n\n\n\n
This opens the MAMP index page at http:\/\/localhost:8888\/MAMP<\/a><\/code>. On this page, you will see plenty of information, but what we care about is under MySQL<\/strong>. Once opened, click on phpMyAdmin<\/strong>.<\/p>\n\n\n\n
This will open another tab, this one to http:\/\/localhost:8888\/phpMyAdmin\/index.php<\/a><\/code>, where you will see the interface of phpMyAdmin<\/code>. Thanks to this, we will be able to see, create, and work with our future MySQL databases.<\/p>\n\n\n\n
We can create a database by clicking on Databases<\/strong>. Then, enter the name of our new database and click Create<\/strong>.<\/p>\n\n\n\n
We may then create our first table. For our tutorial, name it posts<\/code> and select five columns, as we will have five fields. Once we click Go<\/strong>, we will be able to enter our new fields.<\/p>\n\n\n\n
Our fields should be as such:<\/p>\n\n\n\n