<commit_before><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>React.js, Cloact, Om jne</title>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
                  <h1> React.js </h1>
                  <p>A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES</p>
                  <a href="http://http://facebook.github.io/react/">Home</a>
				</section>
				<section>
                   <ul>
                   	 <li>Javascript kirjasto käyttöliittymien tekemiseen</li>
                   	 <li class="fragment">Facebook tiimin kehittämä ja laajalti käytössä (esim chat)</li>
                   	 <li class="fragment">Myös instagram kuvapalvelussa käytössä</li>
                   </ul>
				</section>
				<section>
					<p> Hello World käyttäen JSX:ää
					<pre>
					<code data-trim>
/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
React.renderComponent(&lt;HelloMessage name="John" /&gt;,
    document.getElementById("container"));  
					</code>
				</pre>
				</section>
				<section>
					<p>JSX ??..</p>
				</section>
				<section>
					<ul>
						<li>XML:n kaltainen kieli joka kääntyy javascriptiksi</li>
						<li class="fragment">Ei ole pakollista käyttää, mutta usein kompaktimpaa kuin Javascript</li>
						<li class="fragment">Ei ole suoraan verrattavissa perus-HTML:n</li>
					</ul>
				</section>
				<section>
					<p>JSX</p>
					<pre>
					 <code data-trim>
/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
					</code>
				   </pre>
				   <p>Javascript</p>
				   <pre>
				   	<code data-trim>
var HelloMessage = React.createClass({  
  render: function() {
    return React.DOM.div(null, "Hello ", this.props.name);
  }
});
				   	</code>
				</section>
				<section>
					<p>Miksi JSX? Miksi kömpelö Javascript DOM API? Miksei Handlebars sun muut viiksinotaatiot?</p>
					<ul>
						<li class="fragment">React toteuttaa oman virtuaalisen DOM:n</li>
						<li class="fragment">Mahdollistaa HTML:n generoinnin optimoidusti</li>
						<li class="fragment">Virtuaalinen DOM tunnistaa muutokset ja generoi vain muuttuneet nodet koko HTML:n sijaan</li> 
					</ul>	
				</section>
				<section>
					<p> Virtuaali-DOM esimerkki </p>
					<pre>
				   	    <code data-trim>
				   	    </code>
				   	</pre> 
				</section>
			</div>
		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script><commit_msg>lissee<commit_after><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>React.js, Cloact, Om jne</title>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
                  <h1> React.js </h1>
                  <p>A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES</p>
                  <a href="http://http://facebook.github.io/react/">Home</a>
				</section>
				<section>
                   <ul>
                   	 <li>Javascript kirjasto käyttöliittymien tekemiseen</li>
                   	 <li class="fragment">Facebook tiimin kehittämä ja laajalti käytössä (esim chat)</li>
                   	 <li class="fragment">Myös instagram kuvapalvelussa käytössä</li>
                   </ul>
				</section>
				<section>
					<p> Hello World käyttäen JSX:ää
					<pre>
					<code data-trim>
/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
React.renderComponent(&lt;HelloMessage name="John" /&gt;,
    document.getElementById("container"));  
					</code>
				</pre>
				</section>
				<section>
					<p>JSX ??..</p>
				</section>
				<section>
					<ul>
						<li>XML:n kaltainen kieli joka kääntyy javascriptiksi</li>
						<li class="fragment">Ei ole pakollista käyttää, mutta usein kompaktimpaa kuin Javascript</li>
						<li class="fragment">Ei ole suoraan verrattavissa perus-HTML:n</li>
					</ul>
				</section>
				<section>
					<p>JSX</p>
					<pre>
					 <code data-trim>
/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
					</code>
				   </pre>
				   <p>Javascript</p>
				   <pre>
				   	<code data-trim>
var HelloMessage = React.createClass({  
  render: function() {
    return React.DOM.div(null, "Hello ", this.props.name);
  }
});
				   	</code>
				</section>
				<section>
					<p>Miksi JSX? Miksi kömpelö Javascript DOM API? Miksei Handlebars sun muut viiksinotaatiot?</p>
					<ul>
						<li class="fragment">React toteuttaa oman virtuaalisen DOM:n</li>
						<li class="fragment">Mahdollistaa HTML:n generoinnin optimoidusti</li>
						<li class="fragment">Virtuaalinen DOM tunnistaa muutokset ja generoi vain muuttuneet nodet koko HTML:n sijaan</li> 
					</ul>	
				</section>
				<section>
					<p> Virtuaali-DOM esimerkki </p>
					<pre>
				   	    <code data-trim>
var MyComponent = React.createClass({
  render: function() {
    if (this.props.first) {
      return <div className="first"><span>A Span</span></div>;
    } else {
      return <div className="second"><p>A Paragraph</p></div>;
    }
  }
});
				   	    </code>
				   	</pre>
				   	<p>Tyhjästä tilanteeseen jossa "first" arvo asetettu</p>
				   	<ul>
				   		<li>
				   			Luodaan DOM node: 
				   			<pre>&lt;div className="first"&gt;&lt;span&gt;A Span&lt;/span&gt;&lt;/div&gt;</pre>
				   		</li> 
				   	</ul> 
				</section>
				<section>
					<p> Virtuaali-DOM esimerkki </p>
					<pre>
				   	    <code data-trim>
var MyComponent = React.createClass({
  render: function() {
    if (this.props.first) {
      return <div className="first"><span>A Span</span></div>;
    } else {
      return <div className="second"><p>A Paragraph</p></div>;
    }
  }
});
				   	    </code>
				   	</pre>
				   	<p>Tilanteesta "first" tilanteeseen "second" -vaiheet</p>
				   	<ul>
				   		<li class="fragment">
				   			Korvataan <code>className="first"</code> <code>className="second"</code> 
				   		</li> 
				   		<li class="fragment">
				   		</li>
				   	</ul> 
				</section>
			</div>
		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>
{'fraction_non_alphanumeric': 0.1710187568959176, 'fraction_numerical': 0.002206693637366679, 'mean_word_length': 2.568678915135608, 'pattern_counts': {'":': 0, '<': 265, '<?xml version=': 0, '>': 265, 'https://': 0, 'lorem ipsum': 0, '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': '41439', 'n_tokens_mistral': 3522, 'n_tokens_neox': 2893, 'n_words': 606}