Getting Started | React
Tutorial | React
Thinking in React | React

Why We Moved From Angular to React
Why are we using React.js in our projects? - React Kung Fu

0.14 release

React v0.14 | React
Upgrading to React 0.14 in practice - React Kung Fu

Introduction

React Tutorials and Courses - Thinkster
Getting Started with React - Thinkster

Baby’s First Reaction — JavaScript Scene — Medium
The React Quick Start Guide
ReactJS For Stupid People
Josh Haberman: React Demystified
The React.js Way: Getting Started Tutorial
ifandelse/ReactJS-Rethinking-Web-UI
ES2015 (ES6) Features Commonly Used with Functional Style React - BEKK Open
Introduction | React 入门教程
JavaScript and Node.js Video Training Courses
React vs. Ember - Alex Matchneer - EmberNYC meetup - Google Slides
Performance Calendar » React’s diff algorithm

Interacting with the DOM in React.js, By Example
Removing User Interface Complexity, or Why React is Awesome
Learn React.js: Ridiculously Simple Forms
React JS Todo 2 - JSFiddle

christianalfoni

React JS and a browserify workflow - christianalfoni WebApp Enthusiast
christianalfoni - Choosing the correct packaging tool for React js
christianalfoni - Webpack and react is awesome

dan_abramov

Mixins Are Dead. Long Live Composition — Medium higher-order component vs mixin
Smart and Dumb Components — Medium
Two React Tips — Medium

  • Beware of multiple React instances
  • Always put a root <div> into <body> and mount React to it.

Resources

ReactJS - Building Web Apps w/JavaScript
Home - React Kung Fu

reactjs/react-future
arkency/reactjs_koans
enaqx/awesome-react

The React Way by Andrew Clark - YouTube

Tools

Complementary Tools · facebook/react Wiki
A Guide to React.js Tools and Libraries | Toptal
style-guides/react.md at master · Khan/style-guides
Development workflow with rackt-cli - revolunet blog

Tips

React.js cheatsheet

Properly define keys for React to diff the virtual DOM:
React.js and Dynamic Children - Why the Keys are Important - Arkency Blog
React.js loses input focus on typing - React Kung Fu
Common React.js mistakes: Unneeded state - React Kung Fu
State is an antipattern : reactjs

Approaches to testing React components - an overview - React Kung Fu

folder-structure.md

Mixins

Simble Studios : React Mixins By Example

Using class

Syntax for defining React Component:
React on ES6+ · Babel
What React component class syntax should I use? - React Kung Fu
It is explained here (with reference to JS’s function calling and ES6 syntax)
How to Use Classes and Sleep at Night — Medium

ES6 syntax with minimal usage of class:

import { Component } from 'react';

class Button extends Component {
constructor(props) {
super(props);
this.state = { };
this.onClicked = this.onClicked.bind(this);
}
componentDidMount() {
console.log('hey');
}
onClicked(event) {
console.log(`clicked: ${this.props.color}`);
}
render() {
return (
<div className={this.props.color}>
<button onclick={this.onClicked}>I am button</button>
</div>
);

}
}

class RedButton extends Component {
componentDidMount() {
console.log('ho');
}
render() {
return (
<Button color='red'>
I am red
</Button>
);

}
}

stampit-org/react-stamp using stampit, a library for prototypal inheritance

Non-UI Components

gaearon/react-document-title
gaearon/react-side-effect
ericclemmons/react-resolver
chenglou/react-motion

Router

tildeio/router.js
glassresistor/i40
bevacqua/ruta3
rackt-react-router · GitHub
react-router-component :: viewdocs.io
React Router Mega Demo
router5 | HTML5 router for reactive applications
leeluolee/stateman
Routie | Javascript hash router

React and pushState: You’re doing it wrong

UI frameworks

Material UI - Material Design React Components
React Bootstrap
React Materialize
Wildhoney-Maple.js · GitHub
TouchstoneJS • ReactJS powered UI framework for developing beautiful hybrid mobile apps

plaxdan/react-topcoat plaxdan/react-topcoat-demo
React Widgets

Materialize has Modal and a great Accordion (that Material UI lacks). We can port them to React with elierotenberg/react-animate (tutorial/code, tutorial/code) or integrate the jQuery plugin in React as seen in here/here.

UI widgets

Boron (modal)
JedWatson-react-hammerjs · GitHub
Lapple-react-transitive-number · GitHub
React Color
rackt/react-tabs

Date picker:
arqex/react-datetime
quri/react-bootstrap-datetimepicker

Layout:
wmira/react-panel (portal panels)
react-burger-menu
ReactFitText Test Page

Accordion:
daviferreira/react-sanfona
React Tabbordion Component Demo

Form:
twisty-formsy-react-components · GitHub (form)

Select/Multiselect:
CanopyTax/cpr-multiselect
CanopyTax/cpr-select

Table:
Griddle - React Grid Component
STRML-react-grid-layout · GitHub

RxMarbles: Interactive diagrams of Rx Observables

Repo

React Components
react-component · GitHub
Latest ReactJS Examples

CSS

ReactCSS
Radium - A React Component Styling Library
icodeforlove/react-rcs
js-next/react-style
petehunt/jsxstyle
MicheleBertoli/css-in-js
gajus/react-css-modules

Styling React Components in Sass
Vjeux » React: CSS in JS – NationJS

Tutorial

Component Specs and Lifecycle | React

Using ReactJS and KendoUI Together

d-Threeact: How the Sift Science Console Team Made d3 and React the Best of Friends — Sift Science Blog
D3 and React - the future of charting components? - Binary Consulting
React-d3 · Eric S. Bullington
React: Integrating 3rd-party visual components

Isomorphic JS

StrongLoop | How to Implement Node + React Isomorphic JavaScript & Why it Matters
paypal/react-engine
aickin/react-dom-stream

JSX: curse or blessing

JSX in Depth | React
JSX Looks Like An Abomination — JavaScript Scene — Medium
How I learned to stop worrying and love React
React’s JSX: The Other Side of the Coin — Medium

af/JSnoX

JSX must return a single element (use div to wrap list).

/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return <div>{'Hello ' + this.props.name}</div>;
}
});

React.renderComponent(<HelloMessage name="John" />, mountNode);
var HelloMessage = React.createClass({
render: function() {
return React.DOM.div(
{className: 'mystyle'},
'Hello ' + this.props.name
);
}
});

React.renderComponent(HelloMessage({name:"John"}), mountNode);

JSX don’t have loop.

var PostComment = require('component/post-comment');

var Posts = React.createClass({
render: function() {
// need to create commnets array here
var comments = this.props.post.comments.map(comment -> {
return <PostComment key={comment.id}>{comment.body}</PostComment>
});
return (
<div>
<h1 class="post-title">this.props.post.title</h1>
<p>this.props.post.body</p>
<ul class="post-comments">
{comments}
</ul>
</div>;

);
}
});

Testing

Easily testing React components with react-test-tree — Qubit Engineering — Medium
Unit testing a React component using Jasmine and Webpack - React Video Tutorial #free @eggheadio
Unit testing React components without a DOM – simonsmith.io
Approaches to testing React components - an overview - React Kung Fu
Testing in React - BrandonOkert.com

babel/babel-jest

Comments