Advanced Search
Search Results
13 total results found
React Form Handling
In traditional web development, when you create a form, the browser takes care of most things. React, however, gives us more control. Instead of letting the browser handle the form, we can use React to manage it ourselves. It might sound a bit fancy, but don...
A Simple Form
Key Concepts and Functions: useState: The useState hook is used to create and manage the state of the form data (formData). It initializes the state with default values. handleChange Function: The handleChange function is called whenever ther...
Variety of the Input in Form
What Are Controlled Components? In React, we like to keep everything in check. A "controlled component" means React is in control of what's happening in the form. It helps us manage things more easily. Multiple kinds of input Let's make our form more inte...
Form Validation
What is Form Validation ? Sometimes people forget to fill in the form properly. Form validation will help them by adding some basic checks to make sure that people will fill the form correctly. We use Regex (Regular Expression) to validate our data. The r...
Advance form handling with YUP & React-hook-form
yup and react-hook-form is your life saver. Yup are powerful tools in the React ecosystem for form validation and form handling. Let's explore it together. Installation : Go to your project and run this command. npm install react-hook-form @hookform/...
Single Page Application
What is single page application ? A Single Page Application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. In SPAs, the page does not reload ...
Introduction
When you create React app, it does not include the page routing function. React Router is one of the popular solution to make routing in React application. It allows you to define routes in your application and navigate between different views or components ...
Basic Navigation
You can read full guide and tutorial here Basic Navigation in React Page creation In page folder, we will have two page Home page and About page In main.tsx file, we will defined two paths "/" and "/about" when you direct to "localhost:5173/" , it wi...
Dynamic Routing
Dynamic routing is a powerful technique used in web development to handle navigation and rendering of pages based on changing parameters. Unlike traditional static routing, where pages are created and rendered component by component, dynamic routing allows for...
Form Handling Exercise
Instruction Create a form that receive the 2 input and 1 submit button 1. Email 2. Password The form should validate the data with this requirement. Email The valid email should follow the HTML standard email validation HTML Standard (whatwg.org) ...
React router component
Components in React Router V6 BrowserRouter BrowserRouter is main component to cover our React application to make it routable. Used for applications with a modern browser that supports the HTML5 history API. Allows you to use regular URLs (e.g., /about)...
Bank project Cont.
For this week, we going to continue on our bank project from last week by the following goals Goals Create a main page that contain a navbar menu for redirect to home page and history page. Routing between home page, history page, sign up page and sign in...
Routing exercise
Instruction Make a page call MainPage.jsx - In main page (Parent) there will be two button that will render HomePage (Child) or AboutPage (Child) For homepage and aboutpage, just use the one that you've done in previous chapter ** when you click "go ...