Thinking in Navigation. Thinking in React is a featured post on Facebook's React website.
Step by step, it takes you through the thought process of building a searchable product data table in React. It's a great post but the thought process is flawed. I'll explain the flaw and how you can use the Navigation router to correct it. The flaw appears in step 3 when the author identifies what data belongs in React state. To make the identification he asks three questions of each piece of data: Is it passed in from a parent via props? From these questions he concludes that the search text and the checkbox make up the React state. Is it part of the URL? The addition of that one question results in quite a different conclusion to step 3: Intro to Meteor with React.
In this tutorial, we’re going to build a Todo app using Meteor and 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. So finally, our state is: