React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Forms are difficult in React.

Luckily, there are many solutions that allow us to create React forms more easily, such as [React Final Form](https://github.com/final-form/react-final-form) created by [Erik Rasmussen](https://twitter.com/erikras).

React Final Form is a high performance subscription-based form state management for React which is not only extremely powerful, but also lightweight (3.0k gzipped!) and easy to use.

Forms are difficult in React.

In this lesson we are going to see an example of using [react-final-form](https://github.com/final-form/react-final-form) to create a basic form using Form and Field components. react-final-form is a lightweight wrapper around final-form library (only 3kB gzipped!) and is one of the best ways to create a form in React as of today.

Create a basic form in React using react-final-form 

In this lesson we are going to see how you can use `pristine` property from React Final Form render prop to ensure that users won't be able to submit (or reset) an empty form.

Disallow Submitting an Empty Form with React Final Form 'pristine' property

Re-submitting the form before the previous submit action has finished can lead to all sorts of bugs.

In this lesson we are going to see how we can ensure that users won't be able to resubmit the form before the first submit action has resolved by using `submitting` property from React Final Form render prop.

Avoid Submitting a Form Twice with React Final Form 'submitting' property

No one wants to reinvent the wheel.

That's why it's so important to be able to use components that someone else had created and put on npm. In this lesson we are going to learn how to use third party [React Select](https://react-select.com) in a [React Final Form](https://github.com/final-form/react-final-form) form to create a searchable select form field.

Use third party components (e.g. React Select) in React Final Form

Most forms require some sort of validation, for instance we'd like to check whether the password is empty, is long enough etc.

In this lesson we are going to learn how to use the `validate` prop from [react-final-form](https://github.com/final-form/react-final-form) `Form` component to validate form values whenever they change and to display helpful error messages to users.

Create forms in React applications with React Final Form

Tomasz Łakomy

Course Content