JavaScript & React functions / Hooks

Very Important Javascript functions. You must know these functions in order to call yourself a JS Developer.

1. JSON.parse
2. Stringify
3. Convert Object to an array
4. Object Keys
5. Object Values
6. Object Assign
7. Array map, reduce, indexOf

Read More

LifeCycle Methods

 LifeCycle Methods in Class components

1. componentDidMount
2. componentWillMount

useEffect, useState hooks are replacing above mentioned life cycle methods.

Hooks Vs Functional components.

1. https://www.twilio.com/blog/react-choose-functional-components ( Best )

Read More

React CRUD App.

1. Routes in react js. (react-router-dom)
   
   
2. Avoid page reloading here if you clicked on other options (Home, About, Contact)
1. Use <Link> Component instead of  `a` tag
2. To change the active tabs use <NavLink> instead of <Link> and use `exact ` attribue.
1. <NavLink className="nav-link" exact to="/">Home</NavLink>
   
   
3. 404 Page
1. <Route component={Notfound} />
   
   
4. Fake Json Server. 
1. npm i json-server
2. Create db.json file with dummy data from JSON placeholder.
   
   
5. Run Server & React with single npm install
1. Run 2 scripts at once. ( concurrently )
   
   
6. Async functions
   
   
7. In React if you want to use variables from .env you must use the `REACT_APP_` prefix Like this `REACT_APP_DB_SERVER_URL`.
1. And you must restart the server.
   
   
8. useHistoy Hook.
   
   
9. Edit particular user in react.
1. http://localhost:3000/users/edit/1
2. You can use `useParams` Hooks to get values from the URL.

Read More

Custom Hooks

1. Custom hooks are javascript functions. whose name starts with `use`
2. Custom hooks can also call other hooks if required.

Why Custom Hooks?

1. To share logic between 2 or more components.

Read More

Notes On WhatsApp Clone App

 1) We don't need these files in our to react app

1. App.css
2. App.test.js
3. index.css
4. logo.svg
5. service worker
6. setUptest.js

2) Install Bootstrap in our React project.

Questions

1. Project structure of React. Need deep underStanding.
2. What is react-bootstrap bootstrap?
3. Why we have to import with curly braces? ( import {Container} from 'react-bootstrap; )
4. UUID
5. Hooks. Custom Hook.
6. useEffect
7. pass data from one component to another component.

Read More

Important Topics in React js

1. Javascript map function
2. State, Hooks
3. What is Super() in React js?
4. What is the Difference Between the build version & the dev version of the React js?
5. How to Host React app on Heroku?
6. What is Axios?
7. Store UserID, token, username in LocalStorage.

2) What is a State in React js?

1. A state is a JavaScript object that stores a component’s dynamic data and it enables a component to keep track of changes between renders. 
   
   
2. Because the state is dynamic, it is reserved only for interactivity so you don’t use it for static React projects.
   
   
3. The state is managed within the component (similar to variables declared within a function)
   
   
4. The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component

5. The state object is where you store property values that belong to the component.

6. When the state object changes, the component re-renders.

7. Refer to the state object anywhere in the component by using the this.state.propertyname syntax:
   
   
8. States can only be used in Class Components.
   
   
9. A state is an observable object that is to be used to hold data that may change over time and to control the behavior after each change.

What is a hook in React js?

Examples are 

1. Hooks are a special function that allows you to connect with react features.

2. Hooks don’t work inside classes. But you can use them instead of writing class.

3. React provides a few built-in Hooks like useState, useEffect.

4. We can also create our own hook to reuse stateful behavior between different components.

5. Hooks let you use state & other react features without writing a class.

6. useState is a hook that lets you add `React state` to the function component. previously you can only use state with class components.

When would I use a Hook? If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

Must Read: https://reactjs.org/docs/hooks-state.html#declaring-a-state-variable

What is useState Hook?

1. useState hook is used to declare the state variables into the functionals component.
   
   
2. useState is a new way to use the exact same capabilities in a `function` that this.state provides in a `class`.

Difference between build version & Production version of Reactjs

1. By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app

Read More

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

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