title: React.js Dataflow Paradigm - how are data.props, state, and JSX beneficial?
body: <p>I'm new to React.  I've gone through a couple tutorials, and created a small page that has 4 components (React classes, what is the preferred term?  I'll call them components in this post): </p>
  
  <p><strong>Component Breakdown</strong></p>
  
  <ul>
  <li>a parent "App" component that includes and manages the other components</li>
  <li>a "Form" component that lets the user interact with the page</li>
  <li>a "String View" component that displays the input from the form as text</li>
  <li>a "Visual View" (I know, bad name...) component that interprets the string view and performs actions to adjust the visual.</li>
  </ul>
  
  <hr>
  
  <p><strong>Dataflow</strong></p>
  
  <p>The communication of these components using states and props is as follows: </p>
  
  <ol>
  <li>The Form has onChange handlers that pass the new state to the App</li>
  <li>The App funnels the state data to the String View</li>
  <li>The String View updates and passes the updated state to the App</li>
  <li>The App funnels the new state data to the Visual View</li>
  <li>Finally, the Visual View now updates based on the new state.</li>
  </ol>
  
  <hr>
  
  <p><strong>Sample Code</strong></p>
  
  <pre><code>var App = React.createClass({
    handleFormChange: function(formData) {
      this.setState({formData:formData});
    },  
    handleStringChange: function(stringData) {
      this.setState({stringData:stringData});
    },
    render: function() {
      return (
        &lt;div className="app"&gt;
          &lt;FormView onFormChange={this.handleFormChange}/&gt;
          &lt;StringView formData={this.state.formData} onStringChange={this.handleStringChange}/&gt;
          &lt;VisualView stringData={this.state.stringData}/&gt;
        &lt;/div&gt;
      );
    }
  });
  
  var FormView = React.createClass({
    handleFormChange: function(e) {
      this.props.onFormChange(e.target.value);
    }
    render: function() {
      return(
        &lt;div className="formView"&gt;
          &lt;select onChange={this.handleFormChange}&gt;
            &lt;option value="1"&gt;Option 1&lt;/option&gt;
            &lt;option value="2"&gt;Option 2&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      );
    }
  });
  
  var StringView = React.createClass({
    componentDidUpdate: function() {
      this.props.onStringChange({newString:'newStringState'});
    },
    render: function() {
      this.props.formData;
      // process formData and update state
      return (
        &lt;div className="stringView"&gt;
          {this.props.formData}
        &lt;/div&gt;
      );
    }
  });
  
  var VisualView = React.createClass({
    render: function() {
      var selection = this.props.stringData,
          output = '';
      if (selection === 1) {
        output = 'Hooray, 1!';
      } else {
        output = 'Yes! 2!';
      }
      return (
        &lt;div className="stringView"&gt;
          {output}
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <hr>
  
  <p><strong>Questions</strong></p>
  
  <p>Here's where I get to my actual question(s):</p>
  
  <ol>
  <li>Is this the correct dataflow paradigm that React is trying to enforce (components only talk to parents, not siblings)?</li>
  <li>Compared to how I would have written this in just regular JavaScript, this seems terribly constrained.  Am I missing the big picture? Is this dataflow paradigm designed to prevent future problems (if so, which ones? Any that can't be solved with disciplined regular JavaScript?), or is there some other purpose that I'm missing?</li>
  <li>I'm getting a lot of repeat function names (handleFormChange for example, it's used in App and Form View), is there a good way to make these distinguishable? Or, are repeated function names across components desirable?</li>
  <li>When the components actually build, the JSX stuff gets transpiled down into real JavaScript. Is there an advantage to using JSX?  Would writing components in the already transpiled JavaScript have an advantage?</li>
  </ol>
  
  <hr>
  
  <p>Thanks in advanced, I know that was kind of a wall of text.  I just want to make sure I get my foundation correct.</p>