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

error Invalid regular expression

Example : #1

error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with --verbose flag for more details.
SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
    at new RegExp (<anonymous>)
    at blacklist (C:\Users\sapan\Desktop\React Native\demo\node_modules\metro-config\src\defaults\blacklist.js:41:10)
    at getBlacklistRE (C:\Users\sapan\Desktop\React Native\demo\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:66:59)
    at getDefaultConfig (C:\Users\sapan\Desktop\React Native\demo\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:82:20)
    at load (C:\Users\sapan\Desktop\React Native\demo\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:118:25)
    at Object.runServer [as func] (C:\Users\sapan\Desktop\React Native\demo\node_modules\@react-native-community\cli\build\commands\server\runServer.js:82:58)
    at Command.handleAction (C:\Users\sapan\Desktop\React Native\demo\node_modules\@react-native-community\cli\build\index.js:164:23)
    at Command.listener (C:\Users\sapan\Desktop\React Native\demo\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:210:5)

    at Command.parseArgs (C:\Users\sapan\Desktop\React Native\demo\node_modules\commander\index.js:651:12)


................................................................................................................................

Solutions -


\node_modules\metro-config\src\defaults\blacklist.js



// var sharedBlacklist = [
//   /node_modules[/\\]react[/\\]dist[/\\].*/,
//   /website\/node_modules\/.*/,
//   /heapCapture\/bundle\.js/,
//   /.*\/__tests__\/.*/
// ];


var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/

];
keep learning :)
............................................................................................................................

Example : #2
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: - react-native-firebase (to unlink run: "react-native unlink react-native-firebase"

solutions -

Create a react-native.config.js file in the root of your project.

Update it to something like this:
// react-native.config.js
module.exports = {
  dependencies: {
    '<dependency>': {
      platforms: {
        android: null, // disable Android platform, other platforms will still autolink
      },
    },
  },
};


in my case is look like below

module.exports = {
    dependencies: {
    'react-native-firebase': {
    platforms: {
    android: null,
    },
    },
    },
    };
    

keep learning :)
....................................................................................................

node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 169

:ReactNative:Cannot run program "npx": CreateProcess error=2, ═х єфрхЄё  эрщЄш єърчрээ√щ Їрщы

:ReactNative:Automatic import of native modules failed.

FAILURE: Build failed with an exception.

* Where:

* Where:

Script 'C:\Users\sapan\Desktop\React Native\myapp\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 169

* What went wrong:

A problem occurred evaluating script.

> Cannot invoke method getErrorStream() on null object

Solutions
Go to -->
node_modules\@react-native-community\cli-platform-android\native_modules.gradle

"npx --quiet react-native config" to "npx.cmd --quiet react-native config" 

FORMIK

FORMIK

install two lib
yarn add formik yup

...................................................................................................................................................................................................................................
Step: #1
import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

const loginSchema = Yup.object().shape({
    email: Yup.string()
        .email('Invalid Email')
        .required('The email is required.'),
    password: Yup.string().required('The password is required.')

})

Step: #1.1
<Formik
                initialValues={{
                    email: '',
                    password: ''
                }}
                validationSchema={loginSchema}
                onSubmit={(values, { setSubmitting }) => {
                    console.log(values)
                }}
            >
</Formik>




Step: #1.2
             <Form>
                        <Field type="email" name='email' />
                        <ErrorMessage name='email' />

                        <Field type="password" name='password' />
                        <ErrorMessage name='password' />
                        <button type='submit'>Submit</button>
                    </Form>


....................................................................................................................................................................................................................................
Step: #2 [FINAL CODE]

import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

const loginSchema = Yup.object().shape({
    email: Yup.string()
        .email('Invalid Email')
        .required('The email is required.'),
    password: Yup.string().required('The password is required.')

})
const Login = () => {
    return (
        <div>
            <Formik
                initialValues={{
                    email: '',
                    password: ''
                }}
                validationSchema={loginSchema}
                onSubmit={(values, { setSubmitting }) => {
                    console.log(values)
                }}
            >
                {({ isSubmitting, isValid }) => (
                    <Form>
                        <Field type="email" name='email' />
                        <ErrorMessage name='email' />

                        <Field type="password" name='password' />
                        <ErrorMessage name='password' />
                        <button type='submit'>Submit</button>
                    </Form>
                )}
            </Formik>
        </div>
    )
}

const App = () => {
    return (
        <>
            <Login />
        </>
    )
}

export default App
...................................................................................................................................................................................................................................
Example: #3   [ CONFIRM PASSWORD]
import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import * as Yup from 'yup'

const loginSchema = Yup.object().shape({
    firstName: Yup.string()
        .required('Your First name is required!')
        .min(3, 'Too short')
        .max(257, 'Too long'),

    email: Yup.string()
        .email('Invalid Email')
        .required('The email is required!.'),

    password: Yup.string().required('The password is required!.'),

    confirmPassword:Yup.string()
        .oneOf([Yup.ref('password'), null], `password doesn't match`)
        .required('you need to confirm your password')

})
const Input = ({ field, form: { touched, errors }, ...props }) => {
    return <input {...field} {...props} />
}

const Login = () => {
    return (
        <div>
            <Formik
                initialValues={{
                    firstName: '',
                    email: '',
                    password: ''
                }}
                validationSchema={loginSchema}
                onSubmit={(values, { setSubmitting }) => {
                    console.log(values)
                }}
            >
                {({ isSubmitting, isValid }) => (
                    <Form>
                        <Field type="text" name='firstName'
                            component={Input} />
                        <ErrorMessage name='firstName' />

                        <Field type="email" name='email'
                            component={Input} />
                        <ErrorMessage name='email' />

                        <Field type="password" name='password'
                            component={Input} />
                        <ErrorMessage name='password' />

                        <Field type="password" name='confirmPassword'
                            component={Input} />
                        <ErrorMessage name='confirmPassword' />

                        <button type='submit'>Submit</button>
                    </Form>
                )}
            </Formik>

        </div>
    )
}
const App = () => {
    return (
        <>
            <Login />
        </>
    )
}
export default App


...................................................................................................................................................................................................................................
Step: #4


...................................................................................................................................................................................................................................
Step: #5