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.

Lesson Transcript

  • [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.

  • [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.