Introduction to React Query Builder

Introduction to React Query Builder and prerequisites for the course

Welcome to the newline course Building Advanced Admin Reporting in React. In this course, we will primarily be exploring the use of a query builder.

A query builder is a component that facilitates the visual description of queries or filters using rules (aka conditions). The most common use case for a query builder is to work as a user-friendly frontend for a database backend, but it has other uses as well.

This course will guide students through the creation of a simple query builder application using the React Query Builder library. The application will connect to a custom API with an SQL database backend.

Students will learn the basic configuration of the library as well as advanced customization and feature addition.

To get started with the course, students will need to know the basics of using npm to configure and develop JavaScript/TypeScript applications, and have some basic Git and SQL knowledge. We will be using a PostgreSQL database for the back end and ReactJS for the front end.

Let's take a look at the application that we will be building. You can see the query builder at the top, with the ability to add rules and groups of rules, plus a data table at the bottom with the results of the query and a line graph with summary information.

App screenshot

Start a new discussion. All notification go to the author.