https://github.com/dhiant/react-form
Handle and Validate React Forms without a Library
https://github.com/dhiant/react-form
formhandling formvalidation react reactforms vite
Last synced: 2 months ago
JSON representation
Handle and Validate React Forms without a Library
- Host: GitHub
- URL: https://github.com/dhiant/react-form
- Owner: dhiant
- Created: 2022-06-16T12:43:14.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-19T15:53:11.000Z (almost 3 years ago)
- Last Synced: 2025-01-21T19:38:41.630Z (4 months ago)
- Topics: formhandling, formvalidation, react, reactforms, vite
- Language: JavaScript
- Homepage: https://react-form-handling.netlify.app/
- Size: 268 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Getting Started with Vite
This project was bootstrapped with Vite.
## Handle & Validate Forms in React
An application used to validate forms in react without a library.
## Overview of Vite
Vite is the next generation in frontend tooling. It focuses on speed and performance by improving the development experience for modern web projects.
It consists of two major parts:
- A dev server which provides support for Hot Module Replacement (HMR) for updating modules during the execution of the application. When changes are made to the source code of an application, only the changes are updated, rather than the entire application. This feature helps speed up development time.
- A build command that bundles your code with Rollup, pre-configured to output highly optimised static assets for production.
## Why Vite over Create React App?
Hot Module Replacement(HMR)
Vite uses HMR capabilities to keep track of changes in your application without reloading the full page. With the HMR API, the browser will only load the modified section of the page and still retain the application's state.
You don't need to manually set these up - when you create an app via create-vite, the selected templates would have these pre-configured for you already.
Native ECMAScript module support
Vite supports ES modules natively. It allows you to develop for the browser with bare imports like TypeScript and
it converts them to proper versioned imports on build.
Speed
Vite is 10–20 times faster than CRA because it uses esbuild instead of webpack under the hood. It’s hard to describe how much faster it feels but all changes are essentially instantaneous in your browser.
One thing to note is that Vite doesn’t type check your code. It only transpiles TypeScript to JavaScript. So you might find some static bugs when building later in your development pipeline. Your IDE should help with this though.
## What is the use of this repo?
This Project is a Simple ReactJS Project which demonstrates the following
- Creating a react app using Vite.
- Form Validation
- Form Handling
- Using pure CSS for styling
## Live Application URL
## Prerequisties
### Install `Node JS`
Refer to https://nodejs.org/en/ to install nodejs
Node.js version 12.2.0 or higher is required.
### Install `npm`
Package manager - Npm or Yarn
Along with nodejs npm gets downloaded globally in your computer. Run `npm -v` in terminal to confirm if it is downloaded.
### Compatible browser for development
## Setup Instructions
Once nodejs is installed on your computer run `node -v` to see the downloaded version and `npm -v` in the terminal (git bash)to see their downloaded version.
Sometimes we'll get error while creating a react app. This may be the case of nodejs version. In that case, you need to downgrade the nodejs version. If you have nodejs version 17+, it's better to use version 16+. Click the link to solve the problem.
#### Example:
Clone down this repository. Run`git clone https://github.com/dhiant/react-form.git` in the terminal.
Installation:
`npm install`
To Start Server:
`npm run dev` - now the react app gets rendered in browser
To Visit App:
`localhost:3000/`
## Learn More
You can learn more in the [Vite documentation](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
To learn React, check out the [React documentation](https://reactjs.org/).