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"> <section class="content wrap">
<p><section class="light home-section"> <p><section class="light home-section">
<div class="marketing-row"> <!--<div class="marketing-row">-->
<div class="marketing-col"> <!--<div class="marketing-col">-->
<h3>Just the UI</h3> <!--<h3>Just the UI</h3>-->
<p> <!--<p>-->
Lots of people use React as the V in MVC. <!--Lots of people use React as the V in MVC.-->
Since React makes no assumptions about the rest of your technology stack, <!--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. <!--it&apos;s easy to try it out on a small feature in an existing project.-->
</p> <!--</p>-->
</div> <!--</div>-->
<div class="marketing-col"> <!--<div class="marketing-col">-->
<h3>Virtual DOM</h3> <!--<h3>Virtual DOM</h3>-->
<p> <!--<p>-->
React uses a <i>virtual DOM</i> diff implementation for ultra-high performance. It can also <!--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. <!--render on the server using Node.js &mdash; no heavy browser DOM required.-->
</p> <!--</p>-->
</div> <!--</div>-->
<div class="marketing-col"> <!--<div class="marketing-col">-->
<h3>Data flow</h3> <!--<h3>Data flow</h3>-->
<p> <!--<p>-->
React implements one-way reactive data flow which reduces boilerplate and is <!--React implements one-way reactive data flow which reduces boilerplate and is-->
easier to reason about than traditional data binding. <!--easier to reason about than traditional data binding.-->
</p> <!--</p>-->
</div> <!--</div>-->
</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> </section>
<hr class="home-divider" /> <hr class="home-divider" />
<section id="home-section" class="home-section"> <section id="home-section" class="home-section">

3
playground/examples.rt
View File

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

4
playground/main.js
View File

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