feat: [React Course]: Module React Forms

react/modules/forms/README.md

@@ -0,0 +1,93 @@
+# [React](https://github.com/rolling-scopes-school/tasks/tree/master/react) Forms 🌟
+
+## Module Overview 📚
+
+The "React Form" module explores the most popular form libraries for React are **React Hook Form** or **Formik**. Through this module, students will learn an overview of solutions to handle forms. The module covers one of the most popular solutions to create a fully functional form with input validation.
+
+## Learning Objectives 🎯
+
+Students will:
+
+- Understand the basics of working with forms in React.
+- Learn how to create basic forms in React.
+- Know how to control the state of a form using React state.
+- Understand controlled and uncontrolled form elements.
+- Learn how to use event handlers to process submitted forms.
+- Understand form validation in React.
+- Learn about form libraries like **React Hook Form** or **Formik** to simplify working with forms in React.
+- Understand how to handle file uploads in React forms.
+- Know how to create dynamic forms in React
+- Learn how to push submitted form data to the server or to state management libraries.
+
+## Approximate Module Completion Time ⏱️
+
+- **20 hours**
+
+## Theory 📖
+
+Students are encouraged to explore the following resources:
+
+1. **Getting Started with React Forms:**
+
+   - [video: webDev React JS #10 Формы (Forms)](https://www.youtube.com/watch?v=LLum_dcrbFo) - [15 minutes]
+   - [article: Create a Form using React JS](https://www.geeksforgeeks.org/create-a-form-using-reactjs/) - [10 minutes]
+   - [article: React Forms](https://www.w3schools.com/react/react_forms.asp) - [10 minutes]
+
+2. **How to create basic forms in React:**
+
+   - [react.dev: Form components](https://react.dev/reference/react-dom/components#form-components) - [20 minutes]
+   - [react.dev: The built-in browser <form> component](https://react.dev/reference/react-dom/components/form) - [10 minutes]
+
+3. **How to control the state of a form using React state:**
+
+   - [react.dev: Reacting to Input with State](https://react.dev/learn/reacting-to-input-with-state) - [30 minutes]
+
+4. **Controlled and uncontrolled form elements:**
+
+   - [article: Controlled and Uncontrolled Components in React](https://reactjsguru.com/controlled-and-uncontrolled-components-in-react/) - [20 minutes]
+   - [react.dev: Manipulating the DOM with Refs](https://react.dev/learn/manipulating-the-dom-with-refs) - [30 minutes]
+
+5. **How to use event handlers to process submitted forms:**
+
+   - [article: React onSubmit Event](https://www.geeksforgeeks.org/react-onsubmit-event/) - [5 minutes]
+   - [react.dev: State as a Snapshot](https://react.dev/learn/state-as-a-snapshot) - [20 minutes]
+
+6. **Form validation in React:**
+
+   - [article: How to perform form validation in React?](https://www.geeksforgeeks.org/how-to-perform-form-validation-in-react/) - [10 minutes]
+
+7. **Form libraries like **React Hook Form** or **Formik** to simplify working with forms in React:**
+
+   - [React Hook Form](https://react-hook-form.com/) - [60 minutes]
+   - [Formik](https://formik.org/) - [60 minutes]
+
+8. **How to handle file uploads in React forms:**
+
+   - [article: File uploading in React.js](https://www.geeksforgeeks.org/file-uploading-in-react-js/) - [10 minutes]
+   - [video: How To Upload Files Using **React Hook Form**](https://www.youtube.com/watch?v=XlAs-Lid-TA) - [5 minutes]
+   - [article: **Formik** - Simply Handling Images/Files Upload](https://sinn.hashnode.dev/formik-simply-handling-imagesfiles-upload) - [5 minutes]
+   - [article: **Formik** - Handling files and reCaptcha](https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc) - [10 minutes]
+
+9. **How to create dynamic forms in React:**
+
+   - [article: How to Build Dynamic Forms in React?](https://www.geeksforgeeks.org/how-to-build-dynamic-forms-in-react/) - [15 minutes]
+   - [article: Build Dynamic Forms with **React Hook Form**](https://claritydev.net/blog/build-dynamic-forms-react-hook-form) - [20 minutes]
+   - [article: Building dynamic forms with **Formik** with React and TypeScript](https://scottdj92.ghost.io/building-dynamic-forms-with-formik-with-react-and-typescript/) - [20 minutes]
+
+10. **How to push submitted form data to the server or to state management libraries:**
+
+    - [article: Explain the process of submitting forms and handling form submissions in Redux](https://www.geeksforgeeks.org/explain-the-process-of-submitting-forms-and-handling-form-submissions-in-redux/) - [20 minutes]
+    - [article: **React Hook Form** - Integrating with services](https://react-hook-form.com/get-started#Integratingwithservices) - [5 minutes]
+    - [article: **Formik** - Form Submission](https://formik.org/docs/guides/form-submission) - [10 minutes]
+
+## Practice 💻
+
+- Complete the test "React Form" in the RS-App > Auto Test.
+
+## Additional Resources 📘
+
+Expand your knowledge with these additional materials:
+
+- [article: React Hook Form, Formik or Redux Form?](https://react-hook-form.com/faqs#ReactHookFormFormikorReduxForm) - [10 minutes]
+- [react.dev: useFormState](<https://react.dev/reference/react-dom/hooks/useFormState#noun-labs-1201738-(2)>) - [10 minutes]
+- [react.dev: useFormStatus](https://react.dev/reference/react-dom/hooks/useFormStatus) - [10 minutes]