What is a mern stack application – part b

Welcome back on this guide on what is a mern stack application?

In our first part we created our api now in this part we are going to make our front-end interface to consume our api

Now lets start by creating our react app in our MERN folder

navigate to the MERN folder and type the following command

npx create-react-app appname

ian@IanoTech:~/Documents/REACT/MERN$ npx create-react-app myapp

Running the command will generate a default react template with src and public folders

to run your react app navigate to myapp folder generated and then run npm start

You app will run on port 3000 localhost:3000

Now lets start

in your src folder create a folder named components

then in the components folder create two files namely

• User.js
• Create.js

The User.js component is set to display the users data from the back-end

We will need to fetch the back-end data in our front-end folder and in our case today we will use Axios, which is a popular library is mainly used to send asynchronous HTTP requests to REST endpoints

type

ian@IanoTech:~/Documents/REACT/MERN/myapp$ npm i axios

To display our data we are going to use the

• useEffect and useState hooks
• POST and GET request methods

Displaying the data

Now hoping that you added some data using post man

lets get to display the data in our front-end

make sure that the api is running on localhost:8000 and the database connected and working well

LOGIC

In our logic functionality we are going to fetch the data using a get request method from our localhost route which islocalhost:8000/users

then display the data in our front-end interface

In the User.js file add the code below

import {useEffect, useState} from 'react'
import Axios from 'axios'

const User = ()=>{
const [users, setUsers] = useState([])


useEffect(() => {
    Axios.get('http://localhost:8000/users').then((response) => {
      setUsers(response.data);
    });
  }, []);

	return(

		<div>
      {users.length > 0 && (
        <ul>
          {users.map(user => (
            <li key={user._id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
		)

}

export default User

Now lets display the component

In our App.js in the src folder add the codes as shown below

we first import the User.js components then declare it inside our function

import './App.css';
import User from './components/User'
function App() {
  return (
    <div>
     
<h3> MERN </h3>
<User />
<br />
</div>
       );
}

export default App;

refresh your browser and see the result

Posting data

We are going to use the post request method to post our data in the back-end

Since we had written the logic in our back-end

we only need to get the post route ‘http://localhost:8000/users’ then create a form to post our data in the back-end

In the Create.js file add the codes below

import React, { useState } from 'react';
import Axios from 'axios'

function Create() {

const [name, setName] = useState('')
const [email, setEmail] = useState('')
const addUser = () => {
    Axios.post('http://localhost:8000/users',{name,email})
  }
const handleSubmit = (e)=>{
  e.preventDefault();

}

  
  return (

    <div className="container">
    <form onChange={ handleSubmit }>

        <label htmlFor="">Name: </label>
        <input type="text" onChange={(e) => {setName(e.target.value)}}/><br/>
        <label htmlFor="">Email: </label>
        <input type="email" onChange={(e) => {setEmail(e.target.value)}}/><br/>

        <button onClick={addUser}>Add New </button>
        </form>

    </div> 
  );
}

export default Create;

Then import the file in our App.js file in our src folder

as shown below

import './App.css';
import User from './components/User'
import Create from './components/Create'

function App() {
  return (
    <div>
     
<h3> MERN </h3>
<User />
<br />
<Create />
</div>
      
  );
}

export default App;

We are done with writing the front-end logic you can now test your app in the browser localhost:3000

Thanks for reaching up to this point

Contact me be any queries

See you in the next parts