<commit_before><!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>Lesson 2</title>
      <link rel="stylesheet" href="../assets/css/base.css" />
  </head>
  <body>
    <h1>Lesson 2</h1>
    <div id="container">
        <p>In the next few lessons we're going to build a live Markdown preview generator (kind of like <a href="http://dillinger.io">dillinger.io</a>). In order to do that we're going to need at least two React components - a Markdown input form + renderer - and a way to communicate Markdown input changes to the renderer. This where Flux comes in. Flux will manage user interactions and communicate the necessary data between React components.</p>

        <h2>What is Flux?</h2>

        <p>Flux is an application architecture that Facebook has developed to complement React. It is not a framework in and of itself, but rather a set of architectural concepts. There are already a few implementations of the Flux architecture that developers can use, all with their own interpretations of the Flux's principles.</p>

        <p>The main principle behind the Flux architecture is a "Unidirectional data flow" and the architecture is made up of "actions", "dispatchers", "stores" and "views". In this architecture, React is the view layer. See the <a href="https://facebook.github.io/flux/docs/overview.html">Flux documentation</a> for a more detailed overview.</p>

        <p>As we mentioned above, Flux is a set of architectural concepts and not a framework and already has several implmentations. (See <a href="https://reactjsnews.com/the-state-of-flux/">this article</a> for a comparison of available implementations.) For our tutorial we are going to use <a href="http://fluxxor.com/">Fluxxor</a> as our Flux implementation, since it preserves the main principles of Flux.</p>

        <h2>Exercise</h2>

        <p>Now that we know a little bit about Flux, let's put that knowledge to work. In this lesson we're going to start with our Markdown input component. This component will also have a "Generate Text" button that fetches some Lorem Ipsum from an API and adds that to the Markdown input. Add your code to lesson_2/src/example.js as we walk through the steps.</p>

        <p>Let's start with a React component that has a basic textfield and a "Generate Lorem Ipsum" button.</p>

        <pre><code>var MarkdownInput = React.createClass({
  render: function() {
    return (
      &lt;div&gt;
        &lt;textarea rows="10" cols="50" /&gt;
        &lt;button&gt;Get Lorem Ipsum!&lt;/button&gt;
      &lt;div&gt;
    );
  }
});</code></pre>



        <p>As we have it now, our component doesn't do anything. So let's add some console logging whenever the button is pushed. First we need to define a callback in the React component for the button click.</p>

        <pre><code>var MarkdownInput = React.createClass({
  render: function() {
    // code from previous step
  },

  handleLoremIpsumClick: function() {
    console.log('Generating lorem ipsum...');
  }<commit_msg>Fix closing div tag in Lesson 2 lesson.html<commit_after><!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>Lesson 2</title>
      <link rel="stylesheet" href="../assets/css/base.css" />
  </head>
  <body>
    <h1>Lesson 2</h1>
    <div id="container">
        <p>In the next few lessons we're going to build a live Markdown preview generator (kind of like <a href="http://dillinger.io">dillinger.io</a>). In order to do that we're going to need at least two React components - a Markdown input form + renderer - and a way to communicate Markdown input changes to the renderer. This where Flux comes in. Flux will manage user interactions and communicate the necessary data between React components.</p>

        <h2>What is Flux?</h2>

        <p>Flux is an application architecture that Facebook has developed to complement React. It is not a framework in and of itself, but rather a set of architectural concepts. There are already a few implementations of the Flux architecture that developers can use, all with their own interpretations of the Flux's principles.</p>

        <p>The main principle behind the Flux architecture is a "Unidirectional data flow" and the architecture is made up of "actions", "dispatchers", "stores" and "views". In this architecture, React is the view layer. See the <a href="https://facebook.github.io/flux/docs/overview.html">Flux documentation</a> for a more detailed overview.</p>

        <p>As we mentioned above, Flux is a set of architectural concepts and not a framework and already has several implmentations. (See <a href="https://reactjsnews.com/the-state-of-flux/">this article</a> for a comparison of available implementations.) For our tutorial we are going to use <a href="http://fluxxor.com/">Fluxxor</a> as our Flux implementation, since it preserves the main principles of Flux.</p>

        <h2>Exercise</h2>

        <p>Now that we know a little bit about Flux, let's put that knowledge to work. In this lesson we're going to start with our Markdown input component. This component will also have a "Generate Text" button that fetches some Lorem Ipsum from an API and adds that to the Markdown input. Add your code to lesson_2/src/example.js as we walk through the steps.</p>

        <p>Let's start with a React component that has a basic textfield and a "Generate Lorem Ipsum" button.</p>

        <pre><code>var MarkdownInput = React.createClass({
  render: function() {
    return (
      &lt;div&gt;
        &lt;textarea rows="10" cols="50" /&gt;
        &lt;button&gt;Get Lorem Ipsum!&lt;/button&gt;
      &lt;/div&gt;
    );
  }
});</code></pre>



        <p>As we have it now, our component doesn't do anything. So let's add some console logging whenever the button is pushed. First we need to define a callback in the React component for the button click.</p>

        <pre><code>var MarkdownInput = React.createClass({
  render: function() {
    // code from previous step
  },

  handleLoremIpsumClick: function() {
    console.log('Generating lorem ipsum...');
  }
{'fraction_non_alphanumeric': 0.10124939153009897, 'fraction_numerical': 0.004705500567905241, 'mean_word_length': 3.5794947994056465, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 91, 'https://': 4, 'lorem ipsum': 2, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2807656', 'n_tokens_mistral': 1790, 'n_tokens_neox': 1699, 'n_words': 767}