Stream of Reading (Prepare to be Forwarded) – An Archive of What I'm Reading
I removed the section where I called out the creator of Babel by name. Honestly I overlooked the statement as a personal attack. I apologized to him publicly and hope to talk to him more in the future. — Drew PostCSS People actually use this thing. Can a library actually do shit out of the box anymore?…
Thanks for posting this. I was disappointed to see it disappear, but I can only imagine the kinds of abuse you had to put up with. Collectively, we spend a huge amount of time working with frameworks, or trying to understand code written using a framework we’ve never used. Your post helped me put together…
I’ve been using React.js for about 6 months now. In the grand scheme of things that’s not very long at all, but in the ever-churning world of JavaScript frameworks, that just about qualifies you as a bearded elder! I’ve helped out a few people lately with React starter tips, so I thought it would be…
Communicate Between Components For parent-child communication, simply pass props. For child-parent communication: Say your GroceryList component has a list of items generated through an array. When a list item is clicked, you want to display its name: var GroceryList = React.createClass({ handleClick: function(i) { console.log(‘You clicked: ‘ + this.props.items[i]); }, render: function() { return (…
Expose Component Functions There’s another (uncommon) way of communicating between components: simply expose a method on the child component for the parent to call. Say a list of todos, which upon clicking get removed. If there’s only one unfinished todo left, animate it: var Todo = React.createClass({ render: function() { return {this.props.title}; }, //this component…
You’ve already learned how to display data with React. Now let’s look at how to make our UIs interactive. A Simple Example # var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? ‘like’ : ‘haven’t liked’; return ( You…
When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire. Prop Validation # As…
How JavaScript Event Delegation Works content One of the hot methodologies in the JavaScript world is event delegation, and for good reason. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child…
Angular 2 has reached Beta and appears poised to become the hot new framework of 2016. It’s time for a showdown. Let’s see how it stacks up against 2015’s darling: React. Disclaimer: I enjoyed working in Angular 1 but switched to React in 2015. I just published a Pluralsight course on React and Flux (free trial). So yes, I’m biased. But…
Facebook has recently presented a new way to compose applications, an application architecture they named Flux. They reported that as modern web applications grow in complexity, this model eases the maintenance and the cognitive load required to develop them. I jumped in excitement (it’s true!) as I immediately saw the beauty of the model. But…