koistya

'use strict';

var AppDispatcher = require('../AppDispatcher');

var TodoActions = {
  ActionTypes: {
    TODO_CREATE: 'TODO_CREATE'
  },
  
  create: function(text) {

koistya

/**
 * Page layout, reused across multiple Page components
 * @jsx React.DOM
 */

var React = require('react');
var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
var Navigation = require('../components/Navigation.jsx');

var DefaultLayout = React.createClass({

koistya

var React = require('react');

var Counter = React.createClass({
  statics: {
    ticks: 0
  },
  render() {
    return <span>{Counter.ticks++}</span>;
 }

koistya

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:

     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>

koistya

Files

The basic structure of a React+Flux application (see other examples)

 - /src/actions/AppActions.js     - Action creators (Flux)
 - /src/components/Application.js - The top-level React component
 - /src/constants/ActionTypes.js  - Action types (Flux)
 - /src/core/Dispatcher.js        - Dispatcher (Flux)
 - /src/stores/AppStore.js        - The main store (Flux)

koistya

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <appSettings>
    <add key="kpm-package-path" value="..\approot\packages" />
    <add key="bootstrapper-version" value="1.0.0-beta1" />
    <add key="kre-package-path" value="..\approot\packages" />
    <add key="kre-version" value="1.0.0-beta1" />
    <add key="kre-clr" value="CoreCLR" />
    <add key="kre-app-base" value="..\approot\packages\App\1.0.0\root" />
  </appSettings>

koistya

export class ComponentA {

  render() {
    return <form onSubmit={this.handleSubmit}>...</form>;
  },
  
  handleSubmit(e) {
    // TODO: handle submit
  }
}

koistya

export class ComponentA {
 
  render() {
    return <form onSubmit={this.handleSubmit}>...</form>;
  },
  
  handleSubmit(e) {
    // TODO: handle submit
  }
}

koistya

var { Promise } = require('es6-promise');

export class HttpClient {

  get(url) {
    // Return a new promise
    return new Promise((resolve, reject) => {
      // Do the usual XHR stuff
      var request = new XMLHttpRequest();
      request.open('GET', url, true);

koistya

File and folder naming convention for React.js components

Directory Layout #1

/actions/...
/components/common/Link.js
/components/common/...
/components/forms/TextBox.js
/components/forms/TextBox.res/style.css