Apply for Zend Framework Certification Training

ReactJs




Step 1)     create userlist.jsx
import { useEffect, useState } from 'react'
import '../css/userlist.css'
import axios from 'axios'
const Userlist = ()=>{
    const [userData,getUserData] = useState('')
    useEffect(()=>{
        userlist()
    },[])
    const userlist = ()=>{
        axios.get('https://api.uncodecart.com/users/userlist').then((response)=>{
            getUserData(response.data.message)
        })
    }
    return(
        <>
        <table>
    {userData && userData.map((User)=>(
        <tr>
            <th>{User.firstname}</th>
            <th>{User.lastname}</th>
            <th>{User.email}</th>
        </tr>
    ))}
      
        </table>
        </>
    )
}
 
export default Userlist
 
Step 2) create an userlistpage.js
import Footer from "../componants/footer"
import Header from "../componants/header"
import Userlist from "../componants/userlist"
 
const Userlistpage = ()=>{
    return(
        <>
            {<Header/>}
            {<Userlist/>}
            {<Footer/>}
        </>
    )
}
export default Userlistpage
 
Step 3 add a line of code in App.js
 
import './App.css';
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import Homepage from './pages/homepage';
import Registrationpage from './pages/registrationpage';
import Loginpage from './pages/loginpage';
import Userlistpage from './pages/userlistpage';
 
function App() {
  return (
  <>
  <BrowserRouter>
      <Routes>
        <Route path='/' element={<Homepage/>} />
        <Route path='/registration' element={<Registrationpage/>}/>
        <Route path='/login' element={<Loginpage/>}/>
        <Route path='/userlist' element={<Userlistpage/>}/>
      </Routes>
  </BrowserRouter>
  </>
  );
}
 
export default App;
 
Step 4 add an link in header.jsx
 
import { useNavigate } from 'react-router-dom'
import '../css/header.css'
const Header = ()=>{
    const navigate = useNavigate();
    return(
        <>
           <div id="navbar-parent">
            <div id="logo">Uncodemy.com</div>
            <ul class="nav-links">
                <input type="checkbox" id="checkbox-toggle"/>
                <label for="checkbox-toggle" class="hamburger">&#9776;</label>
                <div class="menu">
                <li><a onClick={()=>{navigate('/')}}>Home</a></li>
                <li class="services">
                    <a href="services.html">Services</a> <i class="ri-arrow-up-s-fill"></i><i class="ri-arrow-down-s-fill"></i>
                    <ul class="dropdown">
                    <li><a href="react.html">React Js</a></li>
                    <li><a href="node.html">NodeJs</a></li>
                    </ul>
                </li>
                <li><a onClick={()=>{navigate('/registration')}}>Registration</a></li>
                <li><a onClick={()=>{navigate('/login')}}>Login</a></li>
                <li><a onClick={()=>{navigate('/userlist')}}>User list</a></li>
                <li><a href="contact.html">Contact</a></li>
                </div>
            </ul>
            </div>
        </>
    )
}
export default Header

< Create registration form in reactjs create react routes using v6 >



Ask a question



  • Question: 
    {{questionlistdata.blog_question_description}}
    • Answer:
      {{answer.blog_answer_description  }}
    Replay to Question

(+91)-9910699802
Become A Member     Become A Teacher
Back to Top