Form Builder project
The big project in this module is a Form Builder. Let's take a look at what we'll be building.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo 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 Beginner's Guide to Real World 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.
Get unlimited access to Beginner's Guide to Real World React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:09] Lesson 4 - The Form Builder Project For our project in this module we'll be making a form builder app. The form builder will allow us to dynamically create a number of form fields using a JSON file.
[00:10 - 00:21] The final form will be assembled dynamically based on the JSON information and each form field's value will be captured instead. But we're essentially building a really simplified version of the popular React form generators such as Formic.
[00:22 - 00:30] It's going to look like this. As you can see we'll be able to change the JSON data adding our removing fields as we wish and the form will be automatically updated on the front end.
[00:31 - 00:41] All the information from each field is captured and mock sent to our site owner via an email. This is what we'd like to do in real life but for now we're just displaying the submitted form field values back to the user in a display box.
[00:42 - 00:45] Let's head over to the next lesson and start making our form builder.