Introduction to React Query Builder

Introduction to React Query Builder and prerequisites for the course

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Building Advanced Admin Reporting in React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Building Advanced Admin Reporting in React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Building Advanced Admin Reporting in React

  • [00:00 - 00:08] Welcome to the new line course, Building Advanced Admin Reporting in React. In this course, we will primarily be exploring the use of a query builder.

    [00:09 - 00:24] A query builder is a component that facilitates the visual description of queries or filters using rules, also known as conditions. The most common use case for a query builder is to work as a user-friendly front end for a database back end, but it has other uses as well.

    [00:25 - 00:37] This course will guide students to the creation of a simple query builder application using the React Query Builder library. The application will connect to a custom API with a SQL database back end.

    [00:38 - 00:55] 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.

    [00:56 - 01:05] We will be using a PostgreSQL database for the back end and React.js for the front end. Let's take a look at the application we will be building.

    [01:06 - 01:14] 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.