background preloader

Thinking React

Facebook Twitter

Thinking in Navigation. Thinking in React is a featured post on Facebook's React website.

Thinking in Navigation

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.

Intro to Meteor with 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. Prerequisites Basic knowledge of HTML, JavaScript, and use of a command line terminal.A laptop with a code editor of your choice. We’ll be using Sublime Text.Be sure to install Meteor. We’ll be using Mac OSX. Getting Started. Building Your Second React.js App — Learning New Stuff. Building Your Second React.js App Getting into more advanced features This is the second post in a series of tutorials on React.js.

Building Your Second React.js App — Learning New Stuff

The first one took you through building a very simple profile page with the popular Javascript library: This time we’ll introduce some more basic concepts: StateEvent handlersComponent life cyclesReact & API’s Looking at the project You’ll build an app which searches the iTunes API based on user inputs and displays the results on the page. If we break the UI into components it’ll look something like this: The red component App is the main wrapper for all the other components. The Results component also has its own children called ResultItem (yellow). We can also visualize the component structure like this: --App-----SearchBox-----Results-------ResultItem Step 1: Download the template. Building Your First React.js App — Learning New Stuff.

Building Your First React.js App The easiest way to get started with the popular Javascript library This article will take you through every step of building the simplest React app possible.

Building Your First React.js App — Learning New Stuff

Even simpler than a to-do list. Why so simple? Because I’ve found that when I’m trying to learn a new technology, even the simplest features can add unnecessary complexity. If you’ve never tried React before, this tutorial is for you. There are no pre-requisites other than basic Javascript and HTML skills. Looking at the final project To claim you’ll be building an app is actually an exaggeration. Step 1: Splitting the page into components React is built around components; everything you see on the page is a part of a component. The main component — which wrap all other components — is marked in red. 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.

Thinking in react

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: Introduction. Thinking-in-react-meteor-example/product_row.cjsx at master · chemuto/thinking-in-react-meteor-example. Thinking in React. 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. So finally, our state is: