Hello Guys in this blog i will continue the series of MERN CRUD and in this blog i will be creating a form React which we will use to send data to the backend.
If you have not seen my previous 4 blogs check them out in sequence and then come back here
Lets get started...
So go to your frontend folder in your Project and run this command to install some modules which we are going to need in our front-end part
npm i axios react-icons redux react-redux react-router-dom react-toastify
And open the public folder inside Frontend folder and open "index.html" file and copy-paste these CDN inside head tag
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
!!You are now ready to go!!
- Step 1 - Create a folder named components inside "src" folder in Frond-end folder
- Step 2 - Inside components folder , create two files named Home.js and Add.js
- Step 3 - Open Home.js file and paste this code
import React from 'react'
function Home() {
return (
<div>Home Page</div>
)
}
export default Home
- Step 4 - Open Add.js file, paste this
import React,{useState} from "react"
import { Link } from 'react-router-dom'
function Add() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [number, setNumber] = useState("");
const hanldeAdd = (e) => {
e.preventDefault();
}
return (
<div>
<h1 className="text-4xl text-center text-slate-800 font-bold">Contact Form</h1>
<div className="grid place-content-center my-5">
<form className="w-blue-claymorphism"
onSubmit={(event) => handleAdd(event)}>
<div className="form-group">
<input type="text" className="form-control my-3" placeholder="Name..." value={name} onChange={e => setName(e.target.value)} />
</div>
<div className="form-group">
<input type="email" className="form-control my-3" placeholder="Email..." value={email} onChange={e => setEmail(e.target.value)} />
</div>
<div className="form-group">
<input type="number" className="form-control my-3" placeholder="Phone..." value={number} onChange={e => setNumber(e.target.value)} />
</div>
<div className="form-group flex my-6 space-x-4">
<input type="submit"
className="form-control bg-gradient-to-r from bg-indigo-500 via-purple-500 to-pink-500 text-white"
value="Add" />
<div>
<Link to='/' className="btn btn-danger">Cancel</Link>
</div>
</div>
</form>
</div>
</div>
)
}
export default Add
This will create a form with 3 states attached to it email,name,number. I named this form as contact form where we will save users name , email and phone number.
For now this is a static form and dont save any data to the backend and we will do the validations using server-side data.
- "Cancel", it will cancel the operation and navigate to home page
Step - 5 Open App.js file in your Front-end folder and paste this code
import { Link, Routes, Route, useNavigate } from 'react-router-dom'
import Add from './components/Add'
import Home from './components/Home'
function App() {
return (
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark py-4">
<div className="container-fluid">
<p className="navbar-brand" href="#">E-Contact</p>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link to="/" className="nav-link active" aria-current="page">Home</Link>
</li>
<li className="nav-item">
<Link to="/add" className="nav-link" aria-current="page">Add</Link>
</li>
</ul>
</div>
</div>
</nav>
<Routes>
<Route exact path='/' element={<Home />} />
<Route path='/add' element={<Add />} />
</Routes>
</div>
)
}
export default App;
- It will create a navbar with two links "Home" and "Add" with routings using "Routes", when the user click Home button it will open Home page and when user click Add button , it will open the Form to Add a contact.Here for routing we have used react-router-dom module
- Link tag links the button to the url where the path is mentioned with "to=" attribute
- Routes is used to provide the routings
- Route is used to provide the path to the url using "path" attribute and which element to render using "element" attribute.
- We have set the Home page component as landing url using "/" which is the home page of our App.
Part - 1
https://dev.to/shubhamtiwari909/mern-crud-setup-148a
Part - 2
https://dev.to/shubhamtiwari909/2-mern-mongodb-setup-434g
Part - 3
https://dev.to/shubhamtiwari909/mongodb-connections-using-mongoose-3bl6
Part - 4
https://dev.to/shubhamtiwari909/mern-backend-modules-4-38pk
Thats it for this post, i will continue this series in the next blog where i will be creating the Express server and create the post method to get the data from our Form and save it in the mongo db database.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/2-mern-mongodb-setup-434g
https://dev.to/shubhamtiwari909/mongodb-connections-using-mongoose-3bl6
Top comments (0)