background preloader

ReactJS

Facebook Twitter

Flux For Stupid People. TL;DR As a stupid person, this is what I wish someone had told me when I struggled learning Flux.

Flux For Stupid People

It's not straightforward, not well documented, and has many moving parts. This is a follow-up to ReactJS For Stupid People. Should I Use Flux? If your application deals with dynamic data then yes, you should probably use Flux. If your application is just static views that don't share state, and you never save nor update data, then no, Flux won't give you any benefit. Why Flux? Humor me for a moment, because Flux is a moderately complicated idea. 90% of iOS applications are data in a table view. On the Front End™ (HTML, Javascript, CSS), we don't even have that. What is Flux? Flux is a word made up to describe "one way" data flow with very specific events and listeners. The official documentation is written like someone's stream of conciousness, and is a bad place to start.

ReactJS For Stupid People. TL;DR I struggled for a long time trying to understand what React is and how it fits in the application architecture.

ReactJS For Stupid People

This post is what I wish someone had told me. What is React? How does React compare to Angular, Ember, Backbone, et al? How do you handle data? How do you contact the server? How to Structure a React Project? – ReactJS News. Editor’s Note: Please check out the React Indie Bundle.

How to Structure a React Project? – ReactJS News

Juho and many other members of the React community help put it together. All of the proceeds go towards awesome people in our community. Programming is a bit like gardening. While trying to keep the bugs out, we prefer to keep everything neat and organized lest we want to end up in the jungle. A poor structure just slows us down and makes it easier for bugs to crawl into the system. There are multiple ways to structure your project. Everything in One File The simplest of projects can fit into a single file. Reconciliation. Edit on GitHub React's key design decision is to make the API seem like it re-renders the whole app on every update.

Reconciliation

This makes writing applications a lot easier but is also an incredible challenge to make it tractable. This article explains how with powerful heuristics we managed to turn a O(n3) problem into a O(n) one. Motivation # Generating the minimum number of operations to transform one tree into another is a complex and well-studied problem. This means that displaying 1000 nodes would require in the order of one billion comparisons. Since an optimal algorithm is not tractable, we implement a non-optimal O(n) algorithm using heuristics based on two assumptions: Two components of the same class will generate similar trees and two components of different classes will generate different trees.It is possible to provide a unique key for elements that is stable across different renders.

In practice, these assumptions are ridiculously fast for almost all practical use cases. Pair-wise diff # Thinking in React. Edit on GitHub by Pete Hunt React is, in my opinion, the premier way to build big, fast Web apps with JavaScript.

Thinking in React

It has scaled very well for us at Facebook and Instagram. One of the many great parts of React is how it makes you think about apps as you build them. In this post, I'll walk you through the thought process of building a searchable product data table using React. Start with a mock # Imagine that we already have a JSON API and a mock from our designer. Our JSON API returns some data that looks like this: Step 1: Break the UI into a component hierarchy # The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names.

But how do you know what should be its own component? Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. You'll see here that we have five components in our simple app. JSX in Depth. Edit on GitHub JSX is a JavaScript syntax extension that looks similar to XML.

JSX in Depth

You can use a simple JSX syntactic transform with React. Why JSX? # You don't have to use JSX with React. It's more familiar for casual developers such as designers. XML has the benefit of balanced opening and closing tags. It doesn't alter the semantics of JavaScript. HTML Tags vs. React can either render HTML tags (strings) or React components (classes). To render an HTML tag, just use lower-case tag names in JSX: var myDivElement = <div className="foo" />;ReactDOM.render(myDivElement, document.getElementById('example')); To render a React Component, just create a local variable that starts with an upper-case letter: var MyComponent = React.createClass({/*...*/});var myElement = <MyComponent someProperty={true} />;ReactDOM.render(myElement, document.getElementById('example'));

Reactive programming.