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
+++++++++++++++++++++++++++++++++

Add value to existing array group : React Learning

const genre_with_all = [{‘name’:”All Movies”},…getGenres()];
this.setState({
movies:getMovies(),
//genre:getGenres(),
genre:genre_with_all,
})
+++++++++++++++++++++++++++
+++++++++++++++++++++++++++
export const genres = [
{ _id: “5b21ca3eeb7f6fbccd471818”, name: “Action” },
{ _id: “5b21ca3eeb7f6fbccd471814”, name: “Comedy” },
{ _id: “5b21ca3eeb7f6fbccd471820”, name: “Thriller” }
];
export function getGenres() {
return genres.filter(g=>g);
}

Installing lodash javascript

lodash javascript library for mapping the

It is used to generate the array with the range.

 

installing lodash

lodash javascript

D:\\start\vidly>npm i lodash@v4.17.10

 

importing it in to required page

import _ from ‘lodash’;

or

//import lodash from ‘lodash’;
+++++++++++++++++++++++++++++++++++++++++
Notification on error
+++++++++++++++++++++++++++++++++++++++++
 
 : npm  install react-toastify@4.1
Need to install toastify module.
import it in to top of the Component.
+++++++++++++++++++++++++++++++++++++++++
Track User/Product error message into online system
Sentry
Ravin
+++++++++++++++++++++++++++++++++++++++++
www.sentry.io is the one of the best application to save our error message.
installation
:npm i raven-js@3.26.4
install the module
+++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++
Sentry browser installation in
React
+++++++++++++++++++++++++++++++++++++++++++
or install
: npm i @sentry/browser
Initialized into the top page of application with your authorized code.
…………………………
initialized sentry

…………………………
Sentry.init({
dsn:”https://454938bc56074cadaa3e6317e9d6061e@sentry.io/1415291″
});
…………………………
To call sentry

…………………………
Sentry.captureException(error);
error is param to send error message.

React Learning :: Distructring Arguments

We can remove the object typing for all individual element.
/* Before Object Destructuring */
class Counters extends Component {
render() {
return (
<div>
<button
onClick={this.props.onReset}
className=”btn btn-primary btn-sm m-2″
>
Reset
</button>
{this.props.counters.map(counter=> (
<Counter
key={counter.id}
onDelete={this.props.onDelete}
onIncrement={this.props.onIncrement}
onDecrement={this.props.onDecrement}
counter={counter}
/>
))}
</div>
);
}
}
/* After Object Destructuring */
class Counters extends Component {
const {onReset,onDelete,onIncrement,onDecrement} = this.props;
render() {
return (

<div>
<button
onClick={onReset}
className=”btn btn-primary btn-sm m-2″
>
Reset
</button>
{counters.map(counter => (
<Counter
key={counter.id}
onDelete={onDelete}
onIncrement={onIncrement}
onDecrement={onDecrement}
counter={counter}
/>
))}
</div>

);
}
}

Laravel commad used to create Model,Controller and Migration file at once

We can create Model, Controller and Migration file at a time by this command.

 

php artisan make:model Test -crm or
php artisan make:model --migration --controller --resource Test

if we need the Model class  inside the <Model folder> we need slide change on command.

php artisan make:model --migration --controller --resource Model/Test