book management application - good link

 https://www.freecodecamp.org/news/react-crud-app-how-to-create-a-book-management-app-from-scratch/

code link ::

https://github.com/myogeshchavan97/react-book-management-app/tree/master/src

Note ::yeh bahut acha blog hai isko poora samjho and poora ka poora karo isko aap

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

Imp Note ::

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

Note 01 :: localStorage  :::::::::     localStorage.setItem(key, value)

Point To Be Noted :: 

Both the key and value have to be a string. But we can store the JSON object also by using the JSON.stringify method.

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

Step 01:: Add Header.js  inside components folder

Step 02:: BookList.js   inside components folder

Step 03:: AllBooks.js   inside components folder

Step 04::  BookForm.js   inside components folder

Step 05::  AppRouter.js   inside router folder

Step 06::  create the file useLocalStorage.js  inside the hooks folder 

In this method  We know ::

First ::  How to perform CRUD Operations

Second ::  How to sue React routes for navigation between Routes ::

Third :: How to use React context Api to pass across routes ::

Fourth :: How to create a Custom Hook in React 

Fifth :: How to store data in local Storage to persist it even after Page Refresh 

Six :: How to manage data store in localStorage using custom Hook

Work by Starting ::

Step 01 :: Create the Application ::

npx create-react-app book-management-app

Step 02 :: Delete Files and their import accessories ::

Delete files in src folder :: index.js , styles.scss

Step 02 :: Create Files and their import accessories ::

Create folers in src foler ::   components , context, hooks , router 

Step 03 :: Install the necessary dependencies :: I Install them directly through Terminal 

yarn add bootstrap@4.6.0 lodash@4.17.21 react-bootstrap@1.5.2 node-sass@4.14.1 react-router-dom@5.2.0 uuid@8.3.2

Step 04 :: Create the first file Header.js inside the Components ::

Description ::  Add Two Navlinks of  BooksList  - Two see a list of all books and  AddBook - Two Add the Books   inside the Header Component   

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

Step 05 :: Create the second file BookList.js inside the Components ::

To show List of books , we will edit it afterwards

Step 06 ::   Create the third file AddBook.js inside the Components ::

To add book we will make a function AddBook and in that make the handleOnSubmit button ,we will also import BookForm.js in that.

Step 7 ::   Create the third file BookForm.js inside the Components ::

Understand One by one Each functionality of this ::

A :: Define the state object using the useState hook ::

const [book, setBook] = useState({

bookname: props.book ? props.book.bookname : '',

author: props.book ? props.book.author : 

''quantity: props.book ? props.book.quantity : 

''price: props.book ? props.book.price : 

'',date: props.book ? props.book.date : ''

});

Description :: First we have set the state in this functional compnents using the useState Hook 

second we will check that the - book prop is passed or not ::  if props is passed then we will set it to the passed value otherwise an empty string :  

B :: Add the state for displaying an error message ::

const [errorMsg, setErrorMsg] = useState('');

C :: Add the state for displaying an error message ::

const [errorMsg, setErrorMsg] = useState('');

D :: onChange method inside handleChange method ::

we will make onChange handler which calls the handleInputChange method , we added a switch statement to change the value of the state on which input field is changed.

E : Make quantity without input field event.target.name method :: decimal not allowed

if we type anything in the quantity input field - event.target.name will be quantity - so the first swtitch case will be match ,inside that switch case we are checking to see  if the entered value is an integer without a decimal point 

if (value === '' " || parseInt(value) === +value){

 setBook ()

}

 E : Make quantity without input field event.target.name method :: only two digits with the decimal number ::

value.match(/^\d{1,}(\.\d{0,2})?$/).

 F : Can check the entered value

       value === ''

G :Without check can not deleted value

H : Check that if user has entered all the details using the every array method::  Use  every array method

const allFieldFilled = values.every((field)=>{

 const value = '$ {filed}'.trim();

return value !== ' ' && value!==  '0';  

});

I : handleOnSubmit method -  passed as a prop from the AddBook component