React Concepts

LIFECYCLE METHODS

  • componentWillMount – Invoked once, on both client & server before rendering occurs.
  • componentDidMount – Invoked once, only on the client, after rendering occurs.
  • shouldComponentUpdate – Return value determines whether component should update.
  • componentWillUnmount – Invoked prior to unmounting component.

SPECS

  • getInitialState – Return value is the initial value for state.
  • getDefaultProps – Sets fallback props values if props aren’t supplied.
  • mixins – An array of objects, used to extend the current component’s functionality.

Go through this link

https://camjackson.net/post/9-things-every-reactjs-beginner-should-know

 

Advertisements

Reactjs post form data using ajax

I have used promises with swagger code generator code here as main one. You can find ajax calling in comment section as well. It worked like a charm..

var React = require(“react”);

var Promise = require(‘bluebird’);
var Store = require(“../stores/Payment.store”);
var Action = require(“../actions/Payment.Action”);
var result = {
“firstName”: ”,
“lastName”: ”,
“cardnum”: ”,
“cvv”:”
};

var mainRes,data;
var Payment = React.createClass({
statics: {
api: function (ctx, attrs) {
if (ctx.req.params) {
this.apiProps.apiParams = extendParams(ctx.req.params, this.apiProps.apiParams);
}
return ComponentAction.getProduct(ctx, this.apiProps);
},
store: function () {
return Store;
},
apiProps: {
apiEndPoint: ‘getCardData’,
apiParams: {}

}
},

getInitialState: function () {
return {pricedata: Store.getCart(),mainRes:result}
//{data: Store.getCart()}

},
handleSubmit: function(e) {

e.preventDefault();

var firstName = this.state.firstName;
var lastName = this.state.lastName;
var cardnum = this.state.cardnum;
var cvv = this.state.cvv;
var jsonFormat;
if(!firstName || !cardnum) return;

// this.setState({
// firstName: ”,
// lastName: ”,
// cardnum: ”,
// cvv:”
// });
// body:JSON.stringify({
// id: “8”,
// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// })
// I’m adding a callback to the form submit handler, so you can
// keep all the state changes in the component.
jsonFormat = {
headers:{
‘content-type’: ‘application/json’
},
data:{
id: “8”,
first_name: firstName,
last_name: lastName,
number:cardnum,
cvv2 : cvv,
}
}
this.constructor.apiProps.apiParams = jsonFormat.data;
Action.getCardData({appConfig: this.props.ctx},this.constructor.apiProps).then(function (res) {
console.log(res);
if(res.response.statusCode == 200){
alert(“Thanks for your payment”);
//this.transitionTo(“/test”);
}
},function(err){
console.log(err);
});

// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// this.onFormSubmit({
// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// url: “http://localhost:3000/api/cards/”
// }, function(data) {
// //this.setState({ message: data });

// console.log(data);
// postdata(data);

// });

// function postdata(data){
// jsonFormat= data;
// }
// this.constructor.apiProps.apiParams = jsonFormat;
},
changeFName: function(e) {
this.setState({
firstName: e.target.value
});
},

changeLName: function(e) {
this.setState({
lastName: e.target.value
});
},
changeCard: function(e) {
this.setState({
cardnum: e.target.value
});
},
changeCvv: function(e) {
this.setState({
cvv: e.target.value
});
},
// onFormSubmit: function(data, callback){

// $.ajax({
// url: data.url,
// dataType: ‘json’,
// type: ‘PUT’,
// data: data,
// success: callback,
// error: function(xhr, status, err) {

// //console.error(this.props.url, status, err.toString());

// }.bind(this)
// });
// },

render: function () {

return(

Welcome to Mini-Basket Payment Page.
Total Price: {this.state.pricedata.totalPrice}
Please complete your payment by filling your card details.

First Name
Last Name
Card Number
CVV

</form >
</div>
);
}
});

//
module.exports = Payment;

React Router

React Router:

Above video by inventor of react-router will make you to understand what it is and how good it really works..

Basically, it remembers your url each time of your navigation using transitions. Say, you are in one page where you were trying to see your friend profile. Then immediately after clicking your friend profile, it asks for login authentication. Now after logging in, it should redirect to your friend profile instead of home page. This is called transition(in simple words url memory). If you go through https://github.com/rackt/react-router code, you will understand how that works clearly

There are different states in transitions like abort etc. We will go through those things later.

We used mixins in transitions to achieve the functionality. Mixins are to Pass functionality to multiple components. Looking for more updates on that?? then watch here