Posts

Showing posts with the label Javascript

ReactJS - Form

Image
Hello everyone, Today we will learn how to validate a simple signup form in React JS.Form validation is the most important part of web development, through which we can restrict invalid entries and validate form details to some extent by using valid sets of checkpoints or validation rules. Why form validation on the client-side?  Form validation normally occurs on the server-side. This was really a lengthy process that used to put a lot of burden on the server. So, it will be a good choice if you add validation on the client side. Doing so improves application performance. Here we are using a simple signUP form and performing Client Side Validation using SignUpForm Component. Let's see the React JS signUP form with error messages below: Here we are validating the following entries, Name Email ID Mobile Number Password Directory Structure: Let's see the directory structure : SignUpForm.jsx This is a SignUpForm Component, it helps to render the signup form and validate the form d

React JS + Node JS + Express + MongoDB CRUD - MERN stack development example

Image
Hello everyone, today we will learn how to develop a MERN stack web application that is a basic User Management Application using MongoDB, Express, React JS, Node JS, and AdminLTE. GitHub repository link is provided at the end of this tutorial. You can download the source code.   Following technologies stack being used: Back-End: Node JS Express JS Mongo DB Front-End: React JS AdminLTE react-router-dom 5+ axios 0.19.2 bootstrap   Project Structure   Back-End:     Front-End:   After completing this tutorial what we will build?   1)We will build a MERN-stack web application that is a basic User Management  Application with CRUD features:  • Create User  • List User  • Update User  • Delete User    AND   2)How to integrate Admin Template In ReactJS?   Following is the screenshot of our application -   MERN stack App development   We will build two projects:  Node JS+Express JS: Back End React JS+AdminLTE: Front End   Project 1:BackEnd package.json { "name" : "knf-B