Using the Effect Hook. What is the Effect Hook?

Ref: https://reactjs.org/docs/hooks-effect.html

1. Hooks are a new addition to React 16.8.
   
   
2. They let you use state and other React features without writing a class.
   
   
3. What does useEffect do? By using this Hook, you tell React that your component needs to do something after render.
   
   
4. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.
   
   
5. Hooks only works in the functional components. so if you want to use useEffect or any other hook you have to use functional components.
   
   
6. use effect keeps calling itself if you specifically do not specify an empty array at the end of the useEffect.

Eg:

useEffect( () => {

    

}, []); // empty array specified

Read More

How to setup a New node project?

1. Go to your /server directory.
2. create index.js ( Our server will run here. )
3. You can install dependencies like express, body-parser, Mysql, nodemon

Setup a Nodemon.

1. Add these 2 lines under the script tag

    "start":"node index.js",

    "devStart":"nodemon index.js",

1. npm run devStart

Nodemon will refresh automatically when it receives any changes.

Read More

How to upload the existing folder on GitHub Or GitLab?

These are the steps to upload the existing folder on GitHub Or GitLab.

Whenever you want to push your existing folder to git or GitHub you must:-

1. Initialize your folder with git init.
2. You must have to add origin to push or pull.
   ( git remote add origin https://github.com/more03625/chat-app-frontend.git )

3. git branch -M main ( Create branch on git )
   

4. git add .

5. git push origin main

Error

1. error: failed to push some refs to 'https://github.com/more03625/react-bootstrap-crud-app.git'
• The branch is not present on GitHub or on local
2. error: failed to push some refs to 'https://github.com/more03625/dsa-cracker.git' Make sure you are pushing to the right branch or is there any typo. check out your current working branch name with this command.

Few Git Commands

*) To Check your current account information

        git config --global user.email

        git config --global user.name

       

 *) Set New account information

       

        git config --global user.email yournew@email.com

        git config --global user.name yournewgoodname

Read More

Create Login Form with React in Hindi | Handling Basic Form with React Hook

Basic form in React js. User can enter mail id and password and Onclick on submit button I am getting values from the input fields and showing back to the user.

Also you can use the React Developer Tools extension to see the data in hooks.

import React, {useState} from 'react';

const Basicform = () => {

    // creating state value's

    const [email, setEmail] = useState("");

    const [password, setPassword] = useState("");

    const [allEntry, setAllEntry] = useState([]);

     const submitForm = (e) => {

         e.preventDefault();

         const newEntry = {email:email, password:password};

         setAllEntry([...allEntry, newEntry]);

     }

    return (

        <>

            <form action="post" onSubmit={submitForm}>

                <div>

                    <label htmlFor="email">Email</label>

                    <input type="email" name="email" id="email" 

                        value={email} 

                        onChange={(e) => setEmail(e.target.value)} 

                        autocomplete="off"/>

                </div>

                <div>

                    <label htmlFor="password">Password</label>

                    <input type="password" name="password" 

                        id="password" value={password} 

                        onChange={(e) => 

                        setPassword(e.target.value)}/>

                </div>

                <div>

                    <button type="submit" name="loginBtn">Login</button>

                </div>

            </form>

            

            <div>

                {allEntry.map( (currentElemet) => {

                    return (

                        <>

                            <div>

                                <p>{currentElemet.email}</p>

                                <p>{currentElemet.password}</p>

                            </div>

                        </>

                    )

                })}

            </div>

        </>

    )

}

export default Basicform

Read More

Difference between Class components & Functional Components in react.js

We are going to create 2 components

    class component 

    functional component

Ref: https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react

ref2: https://www.youtube.com/watch?v=uGgPINlKqBs

The main & the key difference is 

 1) When we use Functional components we have to use props. BUT inside the class component, we automatically have that property & we can access that using `this.prop.age`

You can pass props in both components. But in functional components, you have to use the `props` keyword & in-class component you automatically have the refernece

Userclass.js

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <Userfunction>RAHUL</Userfunction>

                <Userfunction>MORE</Userfunction>

                <Userfunction>YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

Userfunction.js

import React from 'react';

const Userfunction = (props) => {

    return (<div>{props.children} ( Userfunction )</div>);

}

export default Userfunction;

We are passing data from the User class component to the User function component & we are using props here. if you don't write the props keyword in `User function  = (props)` data will not be rendered. you will get an empty screen.

We have to use the `props` keyword only in the functional component ONLY. in class components you will have reference automatically. and you can use that using `this.props.title`

Index.js We passed title like this

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App.js';

import Users from './users/Usersclass';

ReactDOM.render(<Users title="this is commig from index.js"/>, 

document.getElementById('root'));

Userclass.js

And we are accessing like this as I mentioned above.

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <h1>{this.props.title}</h1>

                <Userfunction>RAHUL</Userfunction>

                <Userfunction>MORE</Userfunction>

                <Userfunction>YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

You can pass props to both functional and class components 

import React, { Component }from 'react';

import Userfunction from './Userfunction';

class Usersclass extends Component {

    render(){

        return (

            <div>

                <h1>{this.props.title}</h1>

                <Userfunction age="30">RAHUL</Userfunction>

                <Userfunction age="30">MORE</Userfunction>

                <Userfunction age="30">YOGESH</Userfunction>

            </div>

        )

    }

}

export default Usersclass

1) In the class component you have to import component from React lib (TOP line)

2) In functional components you don't have to import.

1) Class component: There is a render method in class comp.

2) Fun comp: there is no render method.

1) Class comp: Props is automatically available. & we use that like this `this.props.title`

2) Fun comp: we have to pass prop as an argument and then we can use that props.

1.             props.children
2.             props.age

1) Whenever you want to maintain the state you must use Classcomponenet. The state can be only used in the class components.

2) Use functional components as much as you can.

Read More

How to test Newly Created website?

You should check these points on the newly created website before updating your seniors. this is from my experience. you can add your test cases OR points in a comment. I will add that points in this post.

1) Check the Mobile version of your website. All the menus, Header, Footers

2) Check-in Desktop version.

3) Truncate all the tables and then visit your website.

    this is to check if your database doesn't contain any data then also the website should work properly. you should handle all the cases/conditions at the first time only. this comes from practice only.

Read More

React.js Completed Videos

 9) Understanding React Fragment in React JS in Hindi in 2020 #8

10) JSX challenge completed

11) JavaScript Expressions in JSX in ReactJs in Hindi in 2020 #10

12) ES6 Template Literals in JSX in ReactJS in Hindi #11

13) React JS Challenge #2: Display Current Date and Time in JSX in React JS in Hindi #12

14) HTML Attributes vs. JSX Attributes 

15) CSS Styling & Importing CSS Files in React JS | Class Vs ClassName in React JS in Hindi in 2020 #14 ( ClassName introduced )

16) How to use Google fonts in React JS Application in Hindi in 2020 #15

17) Internal CSS & Inline CSS Styling In React JS in Hindi in 2020 #16 (Why inline styling);

18) React Components in Hindi | Functional Component in React JS Hindi in 2020 #18

19) React JS Practice #4: Rewrite our React Project into Components in React JS in Hindi in 2020 #19

•     We write all the code in App.js & just export App.js in add the app component in Index.js.
•     Index.js will be clean code.

20) ES6 Modules Import Export in React JS in Hindi #20

21) React JS Challenge #5: Create Simple Calculator App in React JS in Hindi #21

22) #22: Props in React Js in Hindi | React JS Project Netflix App Part #1 in Hindi in 2020

23) JavaScript Tutorial in Hindi #12: Array in JavaScript in Hindi

24) #23: Arrays in React JS in Hindi | ReactJS Project Netflix App #2 in Hindi in 2020

25)#24 Completing React JS Netflix App #3 | Array Map & Fat Arrow function in React Js in Hindi in 2020

26) ReactJS JavaScript Array Map Method in Hindi with Example

Read More