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

 

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

Reactjs Kickstart

Things to cover for beginners:

JSX – Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.

Virtual DOM  – A JavaScript representation of the actual DOM.

React.createClass – The way in which you create a new component.

render (method) – What we would like our HTML Template to look like.

React.render – Renders a React component to a DOM node.

state – The internal data store (object) of a component.

getInitialState – The way in which you set the initial state of a component.

setState – A helper method for altering the state of a component.

props – The data which is passed to the child component from the parent component.

propTypes – Allows you to control the presence, or types of certain props passed to the child component.

getDefaultProps – Allows you to set default props for your component.

Component LifeCycle

componentWillMount – Fired before the component will mount

componentDidMount – Fired after the component mounted

componentWillReceiveProps – Fired whenever there is a change to props

componentWillUnmount – Fired before the component will unmount

Events

onClick

onSubmit

onChange

I have covered all these concepts in my lessons here

Reactjs Basics

https://scotch.io/tutorials/learning-react-getting-started-and-concepts

https://scotch.io/tutorials/build-a-real-time-twitter-stream-with-node-and-react-js

https://scotch.io/courses/getting-started-with-facebooks-react-js

https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture

https://scotch.io/tutorials/creating-a-simple-shopping-cart-with-react-js-and-flux

https://scotch.io/tutorials/make-a-mobile-app-with-reactjs-in-30-minutes

Videos

Basics: https://www.youtube.com/playlist?list=PLX7ZnQs0Gb1rA7wXTGNCzvpc0wEyjC6Mt

Pro lessons: https://www.youtube.com/playlist?list=PLX7ZnQs0Gb1rNCtHKGPcr6XjdzXWwz9EX

shopping card eg: https://www.youtube.com/playlist?list=PLX7ZnQs0Gb1oj9qcsKzznOJEbPdppOac9

Lifecycle methods :

http://bigbinary.com/videos/keep-up-with-reactjs/react-life-cycle-methods-in-depth

 

I worked on all basics of react components and updated that code in github. Please follow the below url to get sample lessons that taught by egghead.

https://github.com/sathyalog/react-lessons

React JS – A Javascript library from Facebook

I came to know about this new framework by facebook when i was exploring web. Will this can be useful anyways to our CI?? If yes, we can make a document and share it…
A brief note to know about React JS:
React, sometimes styled React.js or ReactJS, is an open-source JavaScript library for creating user interfaces that aims to address challenges encountered in developing single-page applications. It is maintained by Facebook, Instagram and a community of individual developers and corporations.
React is intended to help developers build large applications that use data that changes over time. Its goal is to be simple, declarative and composable. It is considered to only be the view in the model–view–controller (MVC) software pattern, and can be used in conjunction with other Javascript libraries or larger MVC frameworks such as AngularJS.
New Features:
React maintains a virtual DOM of its own, rather than relying solely on the browser’s DOM. This allows the library to determine which parts of the DOM have changed by diffing the new version with the stored virtual DOM, and using the result to determine how to efficiently update the browser’s DOM.
One of it’s unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.
React Supports .net too. Hence there is a separate framework for .net. Its http://reactjs.net/http://reactjs.net/
For More Details: