MERN

MERN

client
server

Step :#1
cd client
client > npx create-react-app .
npm start


Step :#2
cd server 
npm init -y    [ -y  means no questions]
yarn add  bcrypt dotenv express express-validator jsonwebtoken mongoose
yarn add concurrently nodemon --dev

Step :#3

Step :#4

Step :#5

Step :#6

Step :#7

Step :#8
Step :#9
...............................................................................................................................................................................................................................
Step :#10

Stpe: #1  [ create a new project and Install lib]

npm init -y
yarn add express cors
yarn global add nodemon


Stpe: #2  [ Code for Server Side]

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())
app.get('/', (req, res) => {
    res.send({ message: "Hello world!" })
})
const port = process.env.PORT || 5000
app.listen(port, () => {
    console.log(`Server running on port ${port}`)
})

Stpe: #3  [ run the server]

nodemon server

Stpe: #4  [ create a new project and Install lib]

npx create-react-app client
yarn add axios

Stpe: # 5 [ Code ]

import React from 'react'

import Axios from 'axios'

const Home = () => {

  Axios({

    method: 'GET',

    url: 'http://localhost:5000/',

    headers: {

      "Content-Type": "application/json"

    }

  }).then(response => {

    console.log(response.data.message)

  })

  return (

    <>

    </>

  )}

const App = () => {

  return (

    <Home />

  )

}

export default App

Stpe: # 5 [ run the react project]

yarn start

Happy Coding :)
...............................................................................................................................................................................................................................
Example: #2

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

const Api = Axios.create({
    method: 'GET',
    baseURL: 'http://localhost:5000',

})
export default class App extends Component {
    render() {
        Api.get('/', {
            headers: {
                'Content-Type': 'application/json'
            },
        }).then(({ data }) => console.log(data))
            .catch(error => console.log(error))
        return (
            <>
                <h3> Hello World</h3>
            </>
        )
    }
}
Happy Coding :)
............................................................................................................................................................................................................................
Example: #3  [ call inside constructor ]

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

const Api = Axios.create({
    method: 'GET',
    baseURL: 'https://jsonplaceholder.typicode.com/users',
})

export default class App extends Component {
    constructor(props) {
        super(props)
        this.fetchData()
        this.state = {
            users: []
        }
    }

    // componentDidMount() {
    //     this.fetchData()
    // }

    fetchData = async () => {
        try {
            let data = await Api.get('/')
                .then(({ data }) => data)
            console.log(data)
            this.setState({ users: data })
        } catch (error) {
            console.log(error)
        }
    }
    render() {
        return (
            <>
                {this.state.users.map((i, index) => {
                    return (
                        <div key={index}>
                            <h4 key={i}>{i.name}</h4>
                        </div>
                    )
                })}
            </>
        )
    }
}
Happy Coding :)
............................................................................................................................................................................................................................
Example: #4

















Happy Coding :)
............................................................................................................................................................................................................................
Example: #5






Happy Coding :)
............................................................................................................................................................................................................................
Example: #6



Happy Coding :)
............................................................................................................................................................................................................................
Example: #7