We can also visualize the component structure like this: --App-----SearchBox-----Results-------ResultItem Step 1: Download the template You’ll find the template for the app at this GitHub repo, in the index.html file. This is how it looks: Step 2: Adding State Step 3: Add Ajax Step 4: Passing the results down as props Great. Intro to Meteor with React. In this tutorial, we’re going to build a Todo app using Meteor and React. We'll be taking a somewhat different approach from the official Meteor React tutorial and adding a few more bells and whistles along the way.
Getting caught up using git branches. Clone the tutorial: git clone into the tutorial project: cd intro-to-meteor-reactPull down all branches: git pull --allView available branches: git branch -a Now, you should be all set to get caught up to a tutorial step if needed. Additional Reading/Resources. Introduction. 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?
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 document, we'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. And That's It # Thinking in react. We build a sample app in the Facebook view library, following along with their 'Thinking in React' guide Hendrik Swanepoel Hendrik lives in Cape Town, South Africa. He likes coding, designing, teaching and learning. @hendrikswan Setting up the environment We create a new folder and cd into it terminal $ mkdir ttreact && cd $_ We install react and bootstrap with bower $ bower install react $ bower install bootstrap Now start up a little web server $ python -m SimpleHTTPServer Lastly we create a new file in this folder called index.html Step 0 of 'Thinking in React' We introduce some static HTML that we would like to work to using React index.html <!
This gets us to this point: Step 1 of 'Thinking in React' - Break the UI into a component hierarchy We have a look at the UI and identify the following components: EpisodeRow EpisodeTable SearchBar FilterableEpisodeTable - contains the other components Step 2: Build a static version in React Step 3: Identify the minimal (but complete) representation of UI state. Thinking-in-react-meteor-example/product_row.cjsx at master · chemuto/thinking-in-react-meteor-example.