nurmdrafi

usePagination.js

export const usePagination = ({
  totalCount,
  pageSize,
  siblingCount = 1,
  currentPage
}) => {
  const paginationRange = useMemo(() => {
    const totalPageCount = Math.ceil(totalCount / pageSize);

nurmdrafi

import React, { useState } from 'react';
import {Form, Row, Col, Input, Button, Switch, } from 'antd'
const { TextArea } = Input;
const DynamicCheckbox = () => {

    // States
    const [form] = Form.useForm()
    const [selectedBox, setSelectedBox] = useState(null)
    const PaymentInfo = Form.useWatch('payment_information', form);

nurmdrafi

Index

nurmdrafi

Index

Centered Form

// Import Components
import { Form, Input, Button, Row, Col, Spin, Checkbox } from 'antd'

const Login () => {

    // On Submit
    const _onSubmit = (values) => {

nurmdrafi

Index

• Introduction
• Create Next App
  • Why use Create Next App?
• Folder Structure
• Basic Setup
  • .env.local
  • App.config.js
• _app.tsx

nurmdrafi

Introduction

1. TypeScript is a superset of JavaScript. But it doesnot add more feature in JavaScript. It just allow us to write JavaScript as a precise manner so that code get less error at runtime.

2. TypeScript is all about type safety

3. TypeScript only job is Static Checking which means it checks type on runtime and shows error while we are writing code

4. TypeScript transpile code into JavaScript

nurmdrafi

Action

import { createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

// Import API's
import { API } from "../../App.config";

// Token & Headers
const token = localStorage.getItem('token')

nurmdrafi

Benefits

[*] Good for SEO
[*] Super Fast
[*] Future of React

Diff

[*] Next.js provides Server Side Rendering (S.S.R)
[*] React only provides Client Side Rendering

_app vs _document

nurmdrafi

ParentComponent.js

import React, { useEffect, useState } from "react";
import Highlighter from "react-highlight-words";

// Import Icons
import { SearchOutlined } from "@ant-design/icons";

// Import Components
import { Button, Input, Row, Space, Tag, Col } from "antd";

nurmdrafi

store.js

import { configureStore } from "@reduxjs/toolkit";
import postsReducer from "./reducers/postsReducer";

export const store = configureStore({
  reducer: {
    posts: postsReducer,
  },
});