In the first part of this miniseries, we started digging into the world of React to see how we could use it, together with Node.js, to build a React Universal Blog App. In this second and last part, we’ll take our blog to the next level by learning how to add and edit content. We’ll also get into the real m...
When the topic of single page applications (SPAs) comes up, we tend to think of browsers, JavaScript, speed, and invisibility to search engines. This is because an SPA renders a page’s content using JavaScript, and since web crawlers don’t use a browser to view web pages, they can’t view and index the...
In SitePoint’s forums I stumbled across a thread entitled So Many Frameworks where Guido, confused at the sheer number of options available, was asking which JavaScript framework he should adopt to make his application more dynamic. Given what I’ve been seeing in the industry and having used it myself, I st...
JavaScript processing can be cumbersome and confusing. One of the major objections people have with React is JSX’ need to be pre-processed and packaged up for the browser. Fear not! The Webpack module builder and Babel.js were created for exactly this purpose. In this screencast we’ll setup a simple Webpac...
React is ushering a new era in front end. Published by Facebook, it has rapidly become a popular library used in production by many technology companies. In this article, we’re going to discuss a new complementary React framework called Relay. The Problem With Data Fetching In React As React has grown in popularity, ...
Today is the epic conclusion of our Building a Stopwatch mini-series. We’ll use className to add nice clean styles to our component. As a bonus, we’ll remove duplication by creating a new Button component and using a special JSX feature called Spread Attributes. Enough jabber, let’s get styling! This ...
Adding a lap-timer is no walk in the park, but what good is a stopwatch that only tracks one lap? We’ll take all we’ve learned about state, lists, and conditional rendering to add this new feature. When we’re done you’ll be running laps of joy around your computer and timing them accurately. Thi...
Today we’ll build upon last week’s Stopwatch component with conditional rendering. We’ll conditionally show the “start” and “stop” buttons based on the state of our component. Additionally, we’ll add a “reset” button so we can reset the timer. This is part 2 o...
Over the past few years, the Web community has been abuzz with “isomorphic apps”. They are apps where the markup is rendered on the server and fed to the browser as complete HTML, and the successive user interactions are handled by client side rendering. This is useful as it lead to outcomes like faster page loadin...
In this video we look at controlled inputs in React. This is unique concept to React that can be tricky to understand at first. We’ll be polishing the demo we started in the last lesson “Introduction to One-Way Data Flow.”Loading the player…jwplayer("video-5665").setup({ image: "https:...
Recent Comments