React :

Install NPM package for working with QueryString

npm install query-string@6.1.0

or

app$    npm i query-string@6.1.0

 

Install NPM package for working with Validation library

app$    npm i joy-browser@13.4

 

for importing

import Joy from ‘joy-browser’;

++++++++++++++++++++++++++++++++++

React can use other library to fetch HTTP request

+++++++++++++++++++++++++++++++++++

These library are

1. Fetch API

2. Jquery Ajax

3. Axios

 

Command to install Axios libracy

app$    npm i axios@0.18

 

+++++++++++++++

Axios

+++++++++++++++

async componentDidMount() {
// promise is object which will promise to fullill after (in some delay)
constpromise=axios(‘https://jsonplaceholder.typicode.com/posts’);
//console.log(promise);
//promise.then() is similar functionality which will
// await is constaint which will get actual result after successful async completed
const response=await promise;
console.log(response);
};

+++++++++++++++

Axios

+++++++++++++++

same as above..

const  response= await  axios(‘https://jsonplaceholder.typicode.com/posts’);

+++++++++++++++

Axios (Get Data with out de-structuring)

+++++++++++++++

/** Object desctructuring */
//the respose will return these all object before destructing the object
// {data:posts} desctructing will return only data to renamed const posts
/*
config: {adapter: ƒ, transformRequest: {…},
data: (100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
headers: {pragma: “no-cache”, content-type: “application/json; charset=utf-8”,
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false,
status: 200
statusText: “”
__proto__: Object

+++++++++++++++

Axios (Get Data with Object de-structuring)

+++++++++++++++

*/
const {data:posts} =awaitaxios(‘https://jsonplaceholder.typicode.com/posts’);
console.log(posts);
/*
now output will be
0: {userId: 1, id: 1, title: “sunt aut facere “, body: “quia et suscipit↵susc
1: {userId: 1, id: 2, title: “qui est esse”, body: “est rerum tempore vi
2: {userId: 1, id: 3, title: “ea molestias quasi exercitationem repell
3: {userId: 1, id: 4, title: “eum et est occaecati”, body:
*/

++++++++++++++++++++++++++++++++++

Send Request to the server by Axios

==================================

SAVE

+++++++++++++++++++++++++++++++++++

handleAdd = async() => {
/* New object which are get from the Form element */
constobj_new= {‘title’:’a’,’body’:’b’};
const {data:post} =await axios.post(‘https://jsonplaceholder.typicode.com/photos’,obj_new);
/** Add recent added obect to older state posts objects */
constadded_post= [obj_new,…this.state.posts];
/** Finally add update our posts value by new added post */
this.setState({‘posts’:added_post});
console.log(this.state.posts);
};

++++++++++++++++++++++++++++++++++

Update Request to the server by Axios

==================================

Update

+++++++++++++++++++++++++++++++++++

handleUpdate = async post => {
post.title=”New title… “;
post.body=”New body… “;
const {data:post_return} =awaitaxios.put(‘https://jsonplaceholder.typicode.com/posts/’+post.id,post);
//const {data:post} = await axios.patch(‘https://jsonplaceholder.typicode.com/posts/’+post,{title:post.title});
/*
axios.put is used to update all properties
or axios.patch is used to update one or more properties
*/
console.log(“Update”, post_return);
/** Copy the posts from older state of posts */
constposts= […this.state.posts];
/** Know the index of this post in posts object */
constindex=posts.indexOf(post);
/** Copy the object post in to posts[index] which had got by above*/
posts[index] = {…post};
this.setState({posts});
};

 

 

 

++++++++++++++++++++++++++++++++++

Delete Request to the server by Axios

==================================

Delete

+++++++++++++++++++++++++++++++++++

handleDelete = async post => {
awaitaxios.delete(‘https://jsonplaceholder.typicode.com/posts/’+post.id);
/* filter all post expect this post.id  */

 constposts=this.state.posts.filter(p=>p.id!==post.id);

this.setState({posts});
};

++++++++++++++++++++++++++++++++++

Delete Request to the server by Axios

==================================

Delete :: Pessimistic delete

+++++++++++++++++++++++++++++++++++

handleDelete=asyncpost=> {
/** copy the real object to recover incase of failure result */
constoriginalPosts=this.state.posts;
/** This is optimistic delete
* In this scenirio we can delte from state brofe the server delete
* after that we confirm based on the server result
* we can rollback if incase server returns failed result
*/
constposts=this.state.posts.filter(p=>p.id!==post.id);
this.setState({posts});
try {
awaitaxios.delete(‘https://jsonplaceholder.typicode.com/posts/’+post.id);
thrownewError(“”);
}catch(ex){
alert(“something failed to delete the result”);
/** this is implementation for undo the changes, the posts will be replaced by original posts */
this.setState({posts:originalPosts});
}
+++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++
Interceptor in Axios
+++++++++++++++++++++++++++++++++

React Learning for beginners

How to make project in react?
$create-react-app <project-name>

Start (Run) project?
$npm start

How to install bookstrap in the react app?
$npm i bootstrap@4.1.1

importing this bookstrap to project
import ‘bookstrap/dist/css/bootstrap.css’;

 

#######################################

Deleting State Value

############################

Removing State

Filter method to get all the counter except given id function used to delete operation.

forexample we need to remove column id value 2 from our counter state.
class App extends Component {
state= {
counters: [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};

}

We can do this by the function like this.

handleDelete=counterId=> {
const new_counters = this.state.counters.filter(older_counter => older_counter.id !== counterId);
 this.setState({ new_counters });
};
Where,
counterId  —> is parameter of calling handleDelete function calling.
<button onClick={() =>this.props.onDelete(this.props.counter.id)>Delete</button>
this.state.counters.filter —> this is filter function
older_counter —> is also calling function with parameter older_counter into the filter function.
this.setState({ counters = new_counters })  —> this function has set the state value updated .
++++++++++++++++++++++++++++++++++++++++
<NavBar
totalCounters={this.state.counters.filter(c=>c.value > 0).length}
/>
+++++++++++++++++++++++++++++++++++++++++
Description
in above example the NarBar component have send the parameter totalCounters.

this.state.counters.filter(c=>c.value > 0).length}

In above code the current state counter filters with its parameter counters.value > 0

where the counters.value is greater than 0 and

it counts the length of above condition.