bobwen-dev
/
react-templates
mirror of https://github.com/bobwen-dev/react-templates
1
0
Fork 0
Code Issues Releases Wiki Activity

edit texts and links for home

This commit is contained in:
ido 2014-12-02 17:32:26 +02:00
parent 659ebc8d7c
commit c5d3ef203c
3 changed files with 42 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
home.html
View File

@ -82,30 +82,45 @@
<section class="content wrap">
<p><section class="light home-section">
<div class="marketing-row">
<div class="marketing-col">
<h3>Just the UI</h3>
<p>
Lots of people use React as the V in MVC.
Since React makes no assumptions about the rest of your technology stack,
it&apos;s easy to try it out on a small feature in an existing project.
</p>
</div>
<div class="marketing-col">
<h3>Virtual DOM</h3>
<p>
React uses a <i>virtual DOM</i> diff implementation for ultra-high performance. It can also
render on the server using Node.js &mdash; no heavy browser DOM required.
</p>
</div>
<div class="marketing-col">
<h3>Data flow</h3>
<p>
React implements one-way reactive data flow which reduces boilerplate and is
easier to reason about than traditional data binding.
</p>
</div>
</div>
<!--<div class="marketing-row">-->
<!--<div class="marketing-col">-->
<!--<h3>Just the UI</h3>-->
<!--<p>-->
<!--Lots of people use React as the V in MVC.-->
<!--Since React makes no assumptions about the rest of your technology stack,-->
<!--it&apos;s easy to try it out on a small feature in an existing project.-->
<!--</p>-->
<!--</div>-->
<!--<div class="marketing-col">-->
<!--<h3>Virtual DOM</h3>-->
<!--<p>-->
<!--React uses a <i>virtual DOM</i> diff implementation for ultra-high performance. It can also-->
<!--render on the server using Node.js &mdash; no heavy browser DOM required.-->
<!--</p>-->
<!--</div>-->
<!--<div class="marketing-col">-->
<!--<h3>Data flow</h3>-->
<!--<p>-->
<!--React implements one-way reactive data flow which reduces boilerplate and is-->
<!--easier to reason about than traditional data binding.-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
<h3>Reasons that we love it:</h3>
<ul>
<li>No runtime libraries. No magic. Just simple pre-compilation to a clear React code</li>
<li>Super easy to write panels. By panels we mean components that have a lot of HTML code and non-reusable logic</li>
<li>Very good separation of presentation and logic. Almost no HTML within the component file</li>
<li>Declarative coding for presentation. HTML that you write and inspect look similar</li>
<li>Easy syntax. Similar to HTML. All IDEs recognize this format</li>
</ul>
</section>
<hr class="home-divider" />
<section id="home-section" class="home-section">

3
playground/examples.rt
View File

@ -25,6 +25,7 @@
updated by re-invoking <code>render()</code>.
</p>
<div id="timerExample"></div>
<playground direction="horizontal" style="display: block"></playground>
</div>
<div class="example">
<h3>An Application</h3>
@ -36,6 +37,7 @@
delegation.
</p>
<div id="todoExample"></div>
<playground direction="horizontal" style="display: block"></playground>
</div>
<div class="example">
<h3>A Component Using External Plugins</h3>
@ -45,5 +47,6 @@
Markdown library, to convert the textarea&#39;s value in real-time.
</p>
<div id="markdownExample"></div>
<playground direction="horizontal" style="display: block"></playground>
</div>
</div>

4
playground/main.js
View File

@ -13,10 +13,6 @@ var res = reactTemplates.convertTemplateToReact(html.trim());
var Playground = require('./playground.js');
window.playground = React.render(Playground({"direction":'vertical'}), document.getElementById('playground'));
//var Examples = require('./examples.js');
//React.render(Examples(), document.getElementById('home-section'));
/*
function generateRandomId() {
var d = new Date().getTime();