Just 4 Learn

Hi guys, I've been working with React lately and I found it very interesting, but, what's the right way to use React? Well, I read a lot of blogs, posts, tweets, etc. and I decided to share with you my experience. But first, we need to understand React, its lifecycle, the best architectural pattern to use, etc. Understand the theory first: If you have any question or concern, please let me know :) See you guys ^_^/

//English Hi Guys, today I'm going to expose hot to make Ajax requests with React, It's pretty straight forward...(At the end you will see the link to my plunker, to see it working...) Basically you just create your Class: var ReactAjax = React.createClass({ getInitialState : function(){ return { plunks : [] } }, render : function(){ var plunks = this.state.plunks; return ( <div id="container"> <div className="row"> <div className="col-xs-4 col-xs-offset-4"> <button onClick={this.fetchPlunks} className="btn btn-default">Get My(brion25) Plunks</button> </div> </div> <PlunksList plunks={plunks} /> </div> ); } }); And on the event, it could be either a click, change, etc. you just make the requests: fetchPlunks : function(){ var self = this; jQuery.ajax({ ...

//English Hi guys, today I'm going to talk about ReactJS, the facebook's framework for Front End Development. <!-- Virtual DOM --> Basically React works with something called: "Virtual DOM", what exactly is it? Well, React try to answer the questions: When should I re-render? What should I re-render? If you have worked with angular, you know that angular works with a queue, and when you need to update or interact with the DOM, let's say something like this: <div> <input ng-model= "myModel" /> </div> Angular will update your model each time this model change! I mean, imagine you press the letter 's' 3353453345534 times, angular will fetch those actions and it will add those changes to the queue in order to update the model, this would be easy for angular to interact with the DOM, I mean you are typing in a normal input field, but what happened if you have something like this: <div> ...