background preloader

React.js

Facebook Twitter

Getting Started. JSFiddle # The easiest way to start hacking on React is using the following JSFiddle Hello World examples: Using React from npm # We recommend using React with a CommonJS module system like browserify or webpack.

Getting Started

Use the react and react-dom npm packages. // main.jsvar React = require('react');var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world! To install React DOM and build your bundle with browserify: $ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js To install React DOM and build your bundle with webpack: $ npm install --save react react-dom babel-preset-react $ webpack Note: If you are using ES2015, you will want to also use the babel-preset-es2015 package.

Note: by default, React will be in development mode, which is slower, and not advised for production. Quick Start Without npm # In the root directory of the starter kit, create a helloworld.html with the following contents. <! <! Application Architecture for Building User Interfaces. Flux is the application architecture that Facebook uses for building client-side web applications.

Application Architecture for Building User Interfaces

It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code. Flux applications have three major parts: the dispatcher, the stores, and the views (React components). These should not be confused with Model-View-Controller. Controllers do exist in a Flux application, but they are controller-views — views often found at the top of the hierarchy that retrieve data from the stores and pass this data down to their children. Flux eschews MVC in favor of a unidirectional data flow.

We originally set out to deal correctly with derived data: for example, we wanted to show an unread count for message threads while another view showed a list of threads, with the unread ones highlighted. Learning React.js: Getting Started and Concepts. # Introduction Today we are going to kick off the first installment in a new series of tutorials, Learning React, that will focus on becoming proficient and effective with Facebook’s React library.

Learning React.js: Getting Started and Concepts

Before we start building anything meaningful, its important that we cover some base concepts first, so lets get this party started. What is React? React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React. 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. It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes.

How does the Virtual DOM work? Imagine you had an object that you modeled around a person. A JavaScript library for building user interfaces. A Simple Component React components implement a render() method that takes input data and returns what to display.

A JavaScript library for building user interfaces

This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props. JSX is optional and not required to use React. Tutorial. We'll be building a simple but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.

Tutorial

We'll provide: A view of all of the commentsA form to submit a commentHooks for you to provide a custom backend It'll also have a few neat features: Optimistic commenting: comments appear in the list before they're saved on the server so it feels fast.Live updates: other users' comments are popped into the comment view in real time.Markdown formatting: users can use Markdown to format their text. Want to skip all this and just see the source? Plunker.