JavaScript for Line of Business Applications

Integrate React.js with Ruby on Rails to build web apps

Summarizing, the application will behave as follows:

• When the user creates a new record through the horizontal form, it will be appended to the records table
• The user will be able to inline-edit any existing record
• Clicking on any Delete button will remove the associated record from the table
• Adding, editing or removing an existing record will update the amount boxes at the top of the page

This article will give you an overview of how to build JavaScript applications with the Flux pattern. It's the minimal amount of material to get you familiar with the core Flux concepts. You should follow along with the accompanying starter kit. You'll need a basic understanding of React and preferably some experience building components. 

One of the biggest and most common problems in front-end web development is state management. A developer is constantly focused on keeping the state object in sync with its view and the DOM representation. Users can interact with the application in many ways and it's a big task to provide a clean transition from one view state to another.

We will see how using React JavaScript library can help us reduce application complexity and off-load UI transitions from our application.

This tutorial helps to jump in React.js with ES6 for newcomers and cover the basics like: components, virtual DOM, JSX, testing, Webpack and Babel....

In this three-part blog series React.js tutorial I am going to explain these concepts and give a recommendation on what to use and how. We will cover ideas and technologies like:

• ES6 React
• virtual DOM
• Component-driven development
• Immutability
• Top-down rendering
• Rendering path and optimization
• Common tools/libs for bundling, ES6, request making, debugging, routing, etc.
• Isomorphic React

This post explains the construction of a simple React web application. The app we want to design is basically a React clone of the email client in Ember‘s home page. It won’t send email, or communicate with a backend to pull a list of emails, it’s just a bit of static data with some Bootstrap styling.

Each component is, as always, a visible, semantic element on the screen. We have components to represent an email, a list of emails, the list of mailboxes, and a general component for when no email or mailbox has been selected.

This article will give you a quick overview of how to build user interfaces in React JS. There's just enough to get yourself started and nothing more. Code along with this starter kit (instructions in the repo) or just read along.

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.

The way React works, rather than taking the real person and rebuilding them from the ground up, it would only change the face and the arms. This means that if you had text in an input and a render took place, as long as the input’s parent node wasn’t scheduled for reconciliation, the text would stay undisturbed.

React in a way, resembles Angular directives but that’s all there is: these directives. In React, they’re called “Components”. When creating a component, certian methods are run (if available). The main one is render which uses data that React exposes (like state, props, etc. more on that later) and uses it to build a fake DOM using “JSX”.

The beauty of ReactJS is its one-way flow which is easier to follow and understand. There is no $digest nor any way to setup $watch. But let’s look at all the cool things about React first:...

In our fast-changing world, technology is rapidly taking giant leaps forward. For the people who are just beginning to take part in this new “gold rush” of web development, it is sometimes inevitable to feel a sense of desperation of not being able to keep up with the evolution. In this article, I will attempt to give a brief overview of one of the most-adored features of Facebook’s Reactframework—isomorphism(a.k.a. server side rendering).

This is the first blog post of the series “Flux in Depth”. Is this “yet the another flux tutorial”? What I have seen so far, while researching flux, were mostly “how-to” tutorials (usually with todo applications), which describe the main components of given flux application and the data flow between them. This is definitely useful for getting a high-level overview of how everything works but in reality there are plenty of other things, which should be taken under consideration. In this series of posts I will try to wire theory with practice and state my own solutions of problem I face on daily basis. Since these solutions might not be perfect, I’d really appreciate giving your opinion in the comments section below.

If you’ve ever used AngularJS, you’ll know that it has a pretty cool built-in testing setup - Karma for unit testing, and Protractor for end-to-end testing. I love Protractor, but recently ran into issues when trying to use it for a non-Angular project. Here’s how to get it working.

If you’ve not encountered end-to-end testing before, you’re in for a treat. Unlike unit testing, which is designed to validate very small components, an end-to-end test can be used to simulate how a user will actually interact with your website. We can make it go to a page, click a link, check the right page gets loaded, give it some input, check it displays the correct output - whatever you want, really. Used in conjunction with other forms of testing, it gives us a really useful look at how our site’s working, and is great for helping us catch any sneaky regressions.

Today we are going to put all of it together to create a basic shopping cart application. In a typical e-commerce website, the product detail page has several moving parts that rely on one another and React really helps simplify and organize the co-dependency between them.