Getting started with MERN stack

Introduction

When i decided to learn mern stack , i waste a lot of time in search of which is the best way or best structure to develop a full stack application.

What are the main things to consider or which factors are important in order to build a full stack application.

After spending a lot of time of internet i found out the major points which i am going to share in this article.

if we talk specifically about MERN stack then there is mainly two method to do this task.

using template from NPM.
from scratch (that's what most of the developers do.)

Prequisite

react basic
express basic
mongodb(mongoos connection)

Backend part

first of all make a project directory and then move to the directory and create a directory for backend named server(you can name it anything).

create a node file through command line by typing

npm init -y

now create a file in the server directory named index.js and install express module using terminal in the server directory

npm install express

now add this code in index.js

const express = require("express")

const app = express();

app.get('/api/customers', (req, res) => {
    const customers = [
        { id: 1, firstName: "john", lastName: "doe" },
        { id: 2, firstName: "steve", lastName: "smith" },
        { id: 3, firstName: "mary", lastName: "swanson" },
        { id: 4, firstName: "sonu", lastName: "akmal" }
    ];

    res.json(customers)
})
const port = 5000;

app.listen(port, () => console.log(`server started at port ${port}`));

you can also make models using mongoose and import the customers data from there, but i am using array of objects to make it simple.

Frontend part

First of all move to the project directory and open the terminal and create a react app named client(you can choose any name)

npm create-react-app client

now you can install axios to connect with backend i am using here the inbuilt method of java script "fetch".

now move to the src directory and create a new directory name it customers. then within customers create a file call customers.js and the following code in the customers.js file

import React, { Component } from 'react';
import './customers.css';

class Customers extends Component {
  constructor() {
    super();
    this.state = {
      customers: []
    };
  }

  componentDidMount() {
    fetch('http://localhost:5000/api/customers')
      .then(res => res.json())
      .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));
  }

  render() {
    return (
      <div>
        <h2>Customers</h2>
        <ul>
        {this.state.customers.map(customer => 
          <li key={customer.id}>{customer.firstName} {customer.lastName}</li>
        )}
        </ul>
      </div>
    );
  }
}

export default Customers;

how to connect frontend to backend

Frontend gets connected to backend through api's. here in the customers.js file the fetch method is used to connect backend and frontend as an API call. that's how backend connect to frontend (through API's).

Nausher Ali