mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
0.13 beta blog post
This commit is contained in:
Paul O’Shannessy
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html" class="active">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html" class="active">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html" class="active">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html" class="active">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React v0.13.0 Beta 1 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React v0.13.0 Beta 1 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html">
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/" class="active">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap blogContent">
|
||||
<div class="nav-docs nav-blog">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html" class="active">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/11/25/community-roundup-24.html">Community Round-up #24</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/11/24/react-js-conf-updates.html">React.js Conf Updates</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/10/28/react-v0.12.html">React v0.12</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/10/27/react-js-conf.html">React.js Conf</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/10/17/community-roundup-23.html">Community Round-up #23</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/10/16/react-v0.12-rc1.html">React v0.12 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>React v0.13.0 Beta 1</h1>
|
||||
<p class="meta">January 27, 2015 by Sebastian Markbåge</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>React 0.13 has a lot of nice features but there is one particular feature that I'm really excited about. I couldn't wait for React.js Conf to start tomorrow morning.</p>
|
||||
|
||||
<p>Maybe you're like me and staying up late excited about the conference, or maybe you weren't one of the lucky ones to get a ticket. Either way I figured I'd give you all something to play with until then.</p>
|
||||
|
||||
<p>We just published a beta version of React v0.13.0 to <a href="https://www.npmjs.com/package/react">npm</a>! You can install it with <code>npm install react@0.13.0-beta.1</code>. Since this is a pre-release, we don't have proper release notes ready.</p>
|
||||
|
||||
<p>So what is that one feature I'm so excited about that I just couldn't wait to share?</p>
|
||||
<h2><a class="anchor" name="plain-javascript-classes"></a>Plain JavaScript Classes!! <a class="hash-link" href="#plain-javascript-classes">#</a></h2>
|
||||
<p>JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.</p>
|
||||
|
||||
<p>We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.</p>
|
||||
|
||||
<p>In React 0.13.0 you no longer need to use <code>React.createClass</code> to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with <code>react-tools</code> by making use of the harmony option: <code>jsx --harmony</code>.</p>
|
||||
<h3><a class="anchor" name="es6-classes"></a>ES6 Classes <a class="hash-link" href="#es6-classes">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">HelloMessage</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">HelloMessage</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"Sebastian"</span> <span class="o">/></span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>The API is mostly what you would expect, which the exception for <code>getInitialState</code>. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise <code>getDefaultProps</code> and <code>propTypes</code> are really just properties on the constructor.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
|
||||
<span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">Counter</span><span class="p">.</span><span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
|
||||
<span class="nx">Counter</span><span class="p">.</span><span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
|
||||
</code></pre></div><h3><a class="anchor" name="es7-property-initializers"></a>ES7+ Property Initializers <a class="hash-link" href="#es7-property-initializers">#</a></h3>
|
||||
<p>Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Future Version</span>
|
||||
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
|
||||
<span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
|
||||
<span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span> <span class="p">};</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
|
||||
<span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This was inspired by TypeScript's property initializers.</p>
|
||||
<h3><a class="anchor" name="autobinding"></a>Autobinding <a class="hash-link" href="#autobinding">#</a></h3>
|
||||
<p><code>React.createClass</code> has a built-in magic feature that bound all methods to <code>this</code> automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.</p>
|
||||
|
||||
<p>Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kr">super</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">tick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">tick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3><a class="anchor" name="mixins"></a>Mixins <a class="hash-link" href="#mixins">#</a></h3>
|
||||
<p>Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.</p>
|
||||
|
||||
<p>There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins was dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. Us making another standard doesn't help that effort.</p>
|
||||
|
||||
<p>Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.</p>
|
||||
|
||||
<p>Luckily, if you want to keep using mixins, you can just keep using <code>React.createClass</code>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong></p>
|
||||
|
||||
<p>The classic <code>React.createClass</code> style of creating classes will continue to work just fine.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="other-languages"></a>Other Languages! <a class="hash-link" href="#other-languages">#</a></h2>
|
||||
<p>Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.</p>
|
||||
|
||||
<p>You can also use CoffeeScript classes:</p>
|
||||
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">div = </span><span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="s">'div'</span><span class="p">)</span>
|
||||
|
||||
<span class="k">class</span> <span class="nx">Counter</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span>
|
||||
<span class="vi">@propTypes =</span>
|
||||
<span class="nv">initialCount: </span><span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span>
|
||||
<span class="vi">@defaultProps =</span>
|
||||
<span class="nv">initialCount: </span><span class="mi">0</span>
|
||||
<span class="nv">constructor: </span><span class="nf">-></span>
|
||||
<span class="vi">@state =</span>
|
||||
<span class="nv">count: </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span>
|
||||
<span class="nv">tick: </span><span class="nf">=></span>
|
||||
<span class="nx">@setState</span><span class="p">(</span><span class="nv">count: </span><span class="nx">@state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-></span>
|
||||
<span class="nx">div</span><span class="p">(</span><span class="nv">onClick: </span><span class="nx">@tick</span><span class="p">,</span> <span class="s">'Clicks: '</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
</div>
|
||||
|
||||
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -61,6 +61,8 @@
|
||||
<div class="inner-content">
|
||||
<h1>All Posts</h1>
|
||||
|
||||
<p><strong><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></strong> on January 27, 2015 by Sebastian Markbåge</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></strong> on December 19, 2014 by Paul O’Shannessy</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></strong> on December 18, 2014 by Paul O’Shannessy</p>
|
||||
|
||||
+125
-123
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,129 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></h1>
|
||||
<p class="meta">January 27, 2015 by Sebastian Markbåge</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React 0.13 has a lot of nice features but there is one particular feature that I'm really excited about. I couldn't wait for React.js Conf to start tomorrow morning.</p>
|
||||
|
||||
<p>Maybe you're like me and staying up late excited about the conference, or maybe you weren't one of the lucky ones to get a ticket. Either way I figured I'd give you all something to play with until then.</p>
|
||||
|
||||
<p>We just published a beta version of React v0.13.0 to <a href="https://www.npmjs.com/package/react">npm</a>! You can install it with <code>npm install react@0.13.0-beta.1</code>. Since this is a pre-release, we don't have proper release notes ready.</p>
|
||||
|
||||
<p>So what is that one feature I'm so excited about that I just couldn't wait to share?</p>
|
||||
<h2><a class="anchor" name="plain-javascript-classes"></a>Plain JavaScript Classes!! <a class="hash-link" href="#plain-javascript-classes">#</a></h2>
|
||||
<p>JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.</p>
|
||||
|
||||
<p>We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.</p>
|
||||
|
||||
<p>In React 0.13.0 you no longer need to use <code>React.createClass</code> to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with <code>react-tools</code> by making use of the harmony option: <code>jsx --harmony</code>.</p>
|
||||
<h3><a class="anchor" name="es6-classes"></a>ES6 Classes <a class="hash-link" href="#es6-classes">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">HelloMessage</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">HelloMessage</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"Sebastian"</span> <span class="o">/></span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>The API is mostly what you would expect, which the exception for <code>getInitialState</code>. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise <code>getDefaultProps</code> and <code>propTypes</code> are really just properties on the constructor.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
|
||||
<span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">Counter</span><span class="p">.</span><span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
|
||||
<span class="nx">Counter</span><span class="p">.</span><span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
|
||||
</code></pre></div><h3><a class="anchor" name="es7-property-initializers"></a>ES7+ Property Initializers <a class="hash-link" href="#es7-property-initializers">#</a></h3>
|
||||
<p>Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Future Version</span>
|
||||
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
|
||||
<span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
|
||||
<span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span> <span class="p">};</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">></span>
|
||||
<span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This was inspired by TypeScript's property initializers.</p>
|
||||
<h3><a class="anchor" name="autobinding"></a>Autobinding <a class="hash-link" href="#autobinding">#</a></h3>
|
||||
<p><code>React.createClass</code> has a built-in magic feature that bound all methods to <code>this</code> automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.</p>
|
||||
|
||||
<p>Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kr">super</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">tick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">tick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3><a class="anchor" name="mixins"></a>Mixins <a class="hash-link" href="#mixins">#</a></h3>
|
||||
<p>Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.</p>
|
||||
|
||||
<p>There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins was dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. Us making another standard doesn't help that effort.</p>
|
||||
|
||||
<p>Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.</p>
|
||||
|
||||
<p>Luckily, if you want to keep using mixins, you can just keep using <code>React.createClass</code>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong></p>
|
||||
|
||||
<p>The classic <code>React.createClass</code> style of creating classes will continue to work just fine.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="other-languages"></a>Other Languages! <a class="hash-link" href="#other-languages">#</a></h2>
|
||||
<p>Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.</p>
|
||||
|
||||
<p>You can also use CoffeeScript classes:</p>
|
||||
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">div = </span><span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="s">'div'</span><span class="p">)</span>
|
||||
|
||||
<span class="k">class</span> <span class="nx">Counter</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span>
|
||||
<span class="vi">@propTypes =</span>
|
||||
<span class="nv">initialCount: </span><span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span>
|
||||
<span class="vi">@defaultProps =</span>
|
||||
<span class="nv">initialCount: </span><span class="mi">0</span>
|
||||
<span class="nv">constructor: </span><span class="nf">-></span>
|
||||
<span class="vi">@state =</span>
|
||||
<span class="nv">count: </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span>
|
||||
<span class="nv">tick: </span><span class="nf">=></span>
|
||||
<span class="nx">@setState</span><span class="p">(</span><span class="nv">count: </span><span class="nx">@state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-></span>
|
||||
<span class="nx">div</span><span class="p">(</span><span class="nv">onClick: </span><span class="nx">@tick</span><span class="p">,</span> <span class="s">'Clicks: '</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></h1>
|
||||
<p class="meta">December 19, 2014 by Paul O’Shannessy</p>
|
||||
@@ -297,127 +420,6 @@ until the next conference. All the talks will be recorded and put online shortly
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/10/28/react-v0.12.html">React v0.12</a></h1>
|
||||
<p class="meta">October 28, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!</p>
|
||||
|
||||
<p>We have talked a lot about some of the bigger changes in this release. <a href="/react/blog/2014/10/14/introducing-react-elements.html">We introduced new terminology</a> and changed APIs to clean up and simplify some of the concepts of React. <a href="/react/blog/2014/10/16/react-v0.12-rc1.html">We also made several changes to JSX</a> and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.</p>
|
||||
|
||||
<p>The release is available for download:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.12.0.js">http://fb.me/react-0.12.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.12.0.min.js">http://fb.me/react-0.12.0.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.12.0.js">http://fb.me/react-with-addons-0.12.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.12.0.min.js">http://fb.me/react-with-addons-0.12.0.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.12.0.js">http://fb.me/JSXTransformer-0.12.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.12.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
<h2><a class="anchor" name="new-terminology-amp-updated-apis"></a>New Terminology & Updated APIs <a class="hash-link" href="#new-terminology-amp-updated-apis">#</a></h2>
|
||||
<p>v0.12 is bringing about some new terminology. <a href="/react/blog/2014/10/14/introducing-react-elements.html">We introduced</a> this 2 weeks ago and we've also documented it in <a href="/react/docs/glossary.html">a new section of the documentation</a>. As a part of this, we also corrected many of our top-level APIs to align with the terminology. <code>Component</code> has been removed from all of our <code>React.render*</code> methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with <code>render</code> methods in your component classes, we decided to keep the top-level functions short and sweet. <code>React.renderComponent</code> is now <code>React.render</code>.</p>
|
||||
|
||||
<p>We also corrected some other misnomers. <code>React.isValidComponent</code> actually determines if the argument is a ReactElement, so it has been renamed to <code>React.isValidElement</code>. In the same vein, <code>React.PropTypes.component</code> is now <code>React.PropTypes.element</code> and <code>React.PropTypes.renderable</code> is now <code>React.PropTypes.node</code>.</p>
|
||||
|
||||
<p>The old methods will still work but will warn upon first use. They will be removed in v0.13.</p>
|
||||
<h2><a class="anchor" name="jsx-changes"></a>JSX Changes <a class="hash-link" href="#jsx-changes">#</a></h2>
|
||||
<p><a href="/react/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes">We talked more in depth about these before</a>, so here are the highlights.</p>
|
||||
|
||||
<ul>
|
||||
<li>No more <code>/** @jsx React.DOM */</code>!</li>
|
||||
<li>We no longer transform to a straight function call. <code><Component/></code> now becomes <code>React.createElement(Component)</code></li>
|
||||
<li>DOM components don't make use of <code>React.DOM</code>, instead we pass the tag name directly. <code><div/></code> becomes <code>React.createElement('div')</code></li>
|
||||
<li>We introduced spread attributes as a quick way to transfer props.</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="devtools-improvements-no-more-__internals"></a>DevTools Improvements, No More <code>__internals</code> <a class="hash-link" href="#devtools-improvements-no-more-__internals">#</a></h2>
|
||||
<p>For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!</p>
|
||||
|
||||
<p>As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. <code>React.__internals</code> is no more.</p>
|
||||
<h2><a class="anchor" name="license-change---bsd"></a>License Change - BSD <a class="hash-link" href="#license-change---bsd">#</a></h2>
|
||||
<p>We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.</p>
|
||||
|
||||
<p>You can read the full text of the <a href="https://github.com/facebook/react/blob/master/LICENSE">LICENSE</a> and <a href="https://github.com/facebook/react/blob/master/PATENTS"><code>PATENTS</code></a> files on GitHub.</p>
|
||||
|
||||
<hr>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li><code>key</code> and <code>ref</code> moved off props object, now accessible on the element directly</li>
|
||||
<li>React is now BSD licensed with accompanying Patents grant</li>
|
||||
<li>Default prop resolution has moved to Element creation time instead of mount time, making them effectively static</li>
|
||||
<li><code>React.__internals</code> is removed - it was exposed for DevTools which no longer needs access</li>
|
||||
<li>Composite Component functions can no longer be called directly - they must be wrapped with <code>React.createFactory</code> first. This is handled for you when using JSX.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Spread operator (<code>{...}</code>) introduced to deprecate <code>this.transferPropsTo</code></li>
|
||||
<li>Added support for more HTML attributes: <code>acceptCharset</code>, <code>classID</code>, <code>manifest</code></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||||
<ul>
|
||||
<li><code>React.renderComponent</code> --> <code>React.render</code></li>
|
||||
<li><code>React.renderComponentToString</code> --> <code>React.renderToString</code></li>
|
||||
<li><code>React.renderComponentToStaticMarkup</code> --> <code>React.renderToStaticMarkup</code></li>
|
||||
<li><code>React.isValidComponent</code> --> <code>React.isValidElement</code></li>
|
||||
<li><code>React.PropTypes.component</code> --> <code>React.PropTypes.element</code></li>
|
||||
<li><code>React.PropTypes.renderable</code> --> <code>React.PropTypes.node</code></li>
|
||||
<li><strong>DEPRECATED</strong> <code>React.isValidClass</code></li>
|
||||
<li><strong>DEPRECATED</strong> <code>instance.transferPropsTo</code></li>
|
||||
<li><strong>DEPRECATED</strong> Returning <code>false</code> from event handlers to preventDefault</li>
|
||||
<li><strong>DEPRECATED</strong> Convenience Constructor usage as function, instead wrap with <code>React.createFactory</code></li>
|
||||
<li><strong>DEPRECATED</strong> use of <code>key={null}</code> to assign implicit keys</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components</li>
|
||||
<li>Correctly treat <code>event.getModifierState</code> as case sensitive</li>
|
||||
<li>Improved normalization of <code>event.charCode</code></li>
|
||||
<li>Better error stacks when involving autobound methods</li>
|
||||
<li>Removed DevTools message when the DevTools are installed</li>
|
||||
<li>Correctly detect required language features across browsers</li>
|
||||
<li>Fixed support for some HTML attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>list</code> updates correctly now</li>
|
||||
<li><code>scrollLeft</code>, <code>scrollTop</code> removed, these should not be specified as props</li>
|
||||
</ul></li>
|
||||
<li>Improved error messages</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons"></a>React With Addons <a class="hash-link" href="#react-with-addons">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li><code>React.addons.batchedUpdates</code> added to API for hooking into update cycle</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li><code>React.addons.update</code> uses <code>assign</code> instead of <code>copyProperties</code> which does <code>hasOwnProperty</code> checks. Properties on prototypes will no longer be updated correctly.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Fixed some issues with CSS Transitions</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components</li>
|
||||
<li>JSX no longer transforms to simple function calls</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li><code>@jsx React.DOM</code> no longer required</li>
|
||||
<li>spread (<code>{...}</code>) operator introduced to allow easier use of props</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+64
-27
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,68 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></h1>
|
||||
<p class="meta">September 24, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>A lot has happened in the month since our last update. Here are some of the more interesting things we've found. But first, we have a couple updates before we share links.</p>
|
||||
|
||||
<p>First, we are organizing a <a href="http://reactjshack-a-thon.splashthat.com/">React Hackathon</a> in Facebook's Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!</p>
|
||||
|
||||
<p>We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on <a href="http://stackoverflow.com/questions/tagged/reactjs">StackOverflow</a> using the tag <a href="http://stackoverflow.com/questions/tagged/reactjs">[reactjs]</a>. Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.</p>
|
||||
<h2><a class="anchor" name="javascript-jabber"></a>Javascript Jabber <a class="hash-link" href="#javascript-jabber">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="https://github.com/jordwalke">Jordan Walke</a> were interviewed on <a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Javascript Jabber</a> for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><strong>PETE:</strong> So React was designed all around that. Conceptually, how you build a React app is that every time your data changes, it's like hitting the refresh button in a server-rendered app. What we do is we conceptually throw out all of the markup and event handlers that you've registered and we reset the whole page and then we redraw the entire page. If you're writing a server-rendered app, handling updates is really easy because you hit the refresh button and you're pretty much guaranteed to get what you expect.</p>
|
||||
|
||||
<p><strong>MERRICK:</strong> That's true. You don't get into these odd states.</p>
|
||||
|
||||
<p><strong>PETE:</strong> Exactly, exactly. In order to implement that, we communicate it as a fake DOM. What we'll do is rather than throw out the actual browser html and event handlers, we have an internal representation of what the page looks like and then we generate a brand new representation of what we want the page to look like. Then we perform this really, really fast diffing algorithm between those two page representations, DOM representations. Then React will compute the minimum set of DOM mutations it needs to make to bring the page up to date.</p>
|
||||
|
||||
<p>Then to finally get to answer your question, that set of DOM mutations then goes into a queue and we can plug in arbitrary flushing strategies for that. For example, when we originally launched React in open source, every setState would immediately trigger a flush to the DOM. That wasn't part of the contract of setState, but that was just our strategy and it worked pretty well. Then this totally awesome open source contributor Ben Alpert at Khan Academy built a new batching strategy which would basically queue up every single DOM update and state change that happened within an event tick and would execute them in bulk at the end of the event tick.</p>
|
||||
|
||||
<p><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Read the full conversation ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsxtransformer-trick"></a>JSXTransformer Trick <a class="hash-link" href="#jsxtransformer-trick">#</a></h2>
|
||||
<p>While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.</p>
|
||||
|
||||
<div style="margin-left: 74px;"><blockquote class="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform("/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */" + element.innerHTML).code</p>— Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
<h2><a class="anchor" name="remarkable-react"></a>Remarkable React <a class="hash-link" href="#remarkable-react">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> gave a talk at <a href="http://braziljs.com.br/">BrazilJS</a> about React and wrote an article with the content of the presentation. He goes through the difficulties of writting <em>active apps</em> using the DOM API and shows how React handles it.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.</p>
|
||||
|
||||
<p>You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And "virtual DOM" is a very big name for what is simply a JavaScript object with nested key-value pairs)</p>
|
||||
|
||||
<p>Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it's necessary. And does it all at once, in most cases in a single tick of the <code>requestAnimationFrame()</code>.</p>
|
||||
|
||||
<p>What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.</p>
|
||||
|
||||
<p>The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example <code>e.target</code> works, no need to look for the event object or checking whether it's <code>e.target</code> or <code>e.srcElement</code> (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event <code><input onChange></code> fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that "thou shall use event delegation" is also commonly given advice for making web apps snappy.</p>
|
||||
|
||||
<p>The good thing about the virtual DOM is that it's all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.</p>
|
||||
|
||||
<p><a href="http://www.phpied.com/remarkable-react/">Read More ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="markdown-in-react"></a>Markdown in React <a class="hash-link" href="#markdown-in-react">#</a></h2>
|
||||
<p><a href="http://benalpert.com/">Ben Alpert</a> converted <a href="https://github.com/chjj/marked">marked</a>, a Markdown Javascript implementation, in React: <a href="https://github.com/spicyj/marked-react">marked-react</a>. Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to <code>escape</code> will not introduce an XSS vulnerability.
|
||||
<figure><a href="https://github.com/spicyj/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="/react/img/blog/markdown_refactor.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="unite-from-bugbusters"></a>Unite from BugBusters <a class="hash-link" href="#unite-from-bugbusters">#</a></h2>
|
||||
<p><a href="https://twitter.com/renajohn">Renault John Lecoultre</a> wrote <a href="https://www.bugbuster.com/">Unite</a>, an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
|
||||
<figure><a href="https://unite.bugbuster.com/"><img src="/react/img/blog/unite.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="reactjs-irc-logs"></a>#reactjs IRC Logs <a class="hash-link" href="#reactjs-irc-logs">#</a></h2>
|
||||
<p><a href="http://blog.vjeux.com/">Vjeux</a> re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/26/community-roundup-7.html">Community Round-up #7</a></h1>
|
||||
<p class="meta">August 26, 2013 by Vjeux</p>
|
||||
@@ -323,31 +385,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></h1>
|
||||
<p class="meta">July 26, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.</p>
|
||||
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
|
||||
<ul>
|
||||
<li><code>setState</code> callbacks are now executed in the scope of your component.</li>
|
||||
<li><code>click</code> events now work on Mobile Safari.</li>
|
||||
<li>Prevent a potential error in event handling if <code>Object.prototype</code> is extended.</li>
|
||||
<li>Don't set DOM attributes to the string <code>"undefined"</code> on update when previously defined.</li>
|
||||
<li>Improved support for <code><iframe></code> attributes.</li>
|
||||
<li>Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h2>
|
||||
<ul>
|
||||
<li>Improved environment detection so it can be run in a non-browser environment.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="/react/downloads.html">Download it now!</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+27
-42
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,31 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></h1>
|
||||
<p class="meta">July 26, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.</p>
|
||||
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
|
||||
<ul>
|
||||
<li><code>setState</code> callbacks are now executed in the scope of your component.</li>
|
||||
<li><code>click</code> events now work on Mobile Safari.</li>
|
||||
<li>Prevent a potential error in event handling if <code>Object.prototype</code> is extended.</li>
|
||||
<li>Don't set DOM attributes to the string <code>"undefined"</code> on update when previously defined.</li>
|
||||
<li>Improved support for <code><iframe></code> attributes.</li>
|
||||
<li>Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h2>
|
||||
<ul>
|
||||
<li>Improved environment detection so it can be run in a non-browser environment.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="/react/downloads.html">Download it now!</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></h1>
|
||||
<p class="meta">July 23, 2013 by Vjeux</p>
|
||||
@@ -349,46 +374,6 @@ If you were using React without JSX previously, your code should still work.</li
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></h1>
|
||||
<p class="meta">July 2, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.</p>
|
||||
<h2><a class="anchor" name="what-is-react.autobind"></a>What is React.autoBind? <a class="hash-link" href="#what-is-react.autobind">#</a></h2>
|
||||
<p>If you take a look at most of our current examples, you'll see us using <code>React.autoBind</code> for event handlers. This is used in place of <code>Function.prototype.bind</code>. Remember that in JS, <a href="http://bonsaiden.github.io/JavaScript-Garden/#function.this">function calls are late-bound</a>. That means that if you simply pass a function around, the <code>this</code> used inside won't necessarily be the <code>this</code> you expect. <code>Function.prototype.bind</code> creates a new, properly bound, function so that when called, <code>this</code> is exactly what you expect it to be.</p>
|
||||
|
||||
<p>Before we launched React, we would write this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We wrote <code>React.autoBind</code> as a way to cache the function creation and save on memory usage. Since <code>render</code> can get called multiple times, if you used <code>this.onClick.bind(this)</code> you would actually create a new function on each pass. With React v0.3 you were able to write this instead:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">}),</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="whats-changing-in-v0.4"></a>What's Changing in v0.4? <a class="hash-link" href="#whats-changing-in-v0.4">#</a></h2>
|
||||
<p>After using <code>React.autoBind</code> for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within <code>React.createClass</code> will already be bound to the correct instance.</p>
|
||||
|
||||
<p>Starting with v0.4 you can just write this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>For v0.4 we will simply be making <code>React.autoBind</code> a no-op — it will just return the function you pass to it. Most likely you won't have to change your code to account for this change, though we encourage you to update. We'll publish a migration guide documenting this and other changes that come along with React v0.4.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+42
-92
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,46 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></h1>
|
||||
<p class="meta">July 2, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.</p>
|
||||
<h2><a class="anchor" name="what-is-react.autobind"></a>What is React.autoBind? <a class="hash-link" href="#what-is-react.autobind">#</a></h2>
|
||||
<p>If you take a look at most of our current examples, you'll see us using <code>React.autoBind</code> for event handlers. This is used in place of <code>Function.prototype.bind</code>. Remember that in JS, <a href="http://bonsaiden.github.io/JavaScript-Garden/#function.this">function calls are late-bound</a>. That means that if you simply pass a function around, the <code>this</code> used inside won't necessarily be the <code>this</code> you expect. <code>Function.prototype.bind</code> creates a new, properly bound, function so that when called, <code>this</code> is exactly what you expect it to be.</p>
|
||||
|
||||
<p>Before we launched React, we would write this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We wrote <code>React.autoBind</code> as a way to cache the function creation and save on memory usage. Since <code>render</code> can get called multiple times, if you used <code>this.onClick.bind(this)</code> you would actually create a new function on each pass. With React v0.3 you were able to write this instead:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">}),</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="whats-changing-in-v0.4"></a>What's Changing in v0.4? <a class="hash-link" href="#whats-changing-in-v0.4">#</a></h2>
|
||||
<p>After using <code>React.autoBind</code> for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within <code>React.createClass</code> will already be bound to the correct instance.</p>
|
||||
|
||||
<p>Starting with v0.4 you can just write this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>For v0.4 we will simply be making <code>React.autoBind</code> a no-op — it will just return the function you pass to it. Most likely you won't have to change your code to account for this change, though we encourage you to update. We'll publish a migration guide documenting this and other changes that come along with React v0.4.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></h1>
|
||||
<p class="meta">June 27, 2013 by Vjeux</p>
|
||||
@@ -322,96 +362,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></h1>
|
||||
<p class="meta">June 5, 2013 by Pete Hunt</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>There are a lot of JavaScript MVC frameworks out there. Why did we build React
|
||||
and why would you want to use it?</p>
|
||||
<h2><a class="anchor" name="react-isnt-an-mvc-framework."></a>React isn't an MVC framework. <a class="hash-link" href="#react-isnt-an-mvc-framework.">#</a></h2>
|
||||
<p>React is a library for building composable user interfaces. It encourages
|
||||
the creation of reusable UI components which present data that changes over
|
||||
time.</p>
|
||||
<h2><a class="anchor" name="react-doesnt-use-templates."></a>React doesn't use templates. <a class="hash-link" href="#react-doesnt-use-templates.">#</a></h2>
|
||||
<p>Traditionally, web application UIs are built using templates or HTML directives.
|
||||
These templates dictate the full set of abstractions that you are allowed to use
|
||||
to build your UI.</p>
|
||||
|
||||
<p>React approaches building user interfaces differently by breaking them into
|
||||
<strong>components</strong>. This means React uses a real, full featured programming language
|
||||
to render views, which we see as an advantage over templates for a few reasons:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>JavaScript is a flexible, powerful programming language</strong> with the ability
|
||||
to build abstractions. This is incredibly important in large applications.</li>
|
||||
<li>By unifying your markup with its corresponding view logic, React can actually
|
||||
make views <strong>easier to extend and maintain</strong>.</li>
|
||||
<li>By baking an understanding of markup and content into JavaScript, there's
|
||||
<strong>no manual string concatenation</strong> and therefore less surface area for XSS
|
||||
vulnerabilities.</li>
|
||||
</ul>
|
||||
|
||||
<p>We've also created <a href="/react/docs/jsx-in-depth.html">JSX</a>, an optional syntax
|
||||
extension, in case you prefer the readability of HTML to raw JavaScript.</p>
|
||||
<h2><a class="anchor" name="reactive-updates-are-dead-simple."></a>Reactive updates are dead simple. <a class="hash-link" href="#reactive-updates-are-dead-simple.">#</a></h2>
|
||||
<p>React really shines when your data changes over time.</p>
|
||||
|
||||
<p>In a traditional JavaScript application, you need to look at what data changed
|
||||
and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
|
||||
which provides a declarative interface via directives and data binding <a href="http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation">requires
|
||||
a linking function to manually update DOM nodes</a>.</p>
|
||||
|
||||
<p>React takes a different approach.</p>
|
||||
|
||||
<p>When your component is first initialized, the <code>render</code> method is called,
|
||||
generating a lightweight representation of your view. From that representation,
|
||||
a string of markup is produced, and injected into the document. When your data
|
||||
changes, the <code>render</code> method is called again. In order to perform updates as
|
||||
efficiently as possible, we diff the return value from the previous call to
|
||||
<code>render</code> with the new one, and generate a minimal set of changes to be applied
|
||||
to the DOM.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The data returned from <code>render</code> is neither a string nor a DOM node -- it's a
|
||||
lightweight description of what the DOM should look like.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>We call this process <strong>reconciliation</strong>. Check out
|
||||
<a href="http://jsfiddle.net/fv6RD/3/">this jsFiddle</a> to see an example of
|
||||
reconciliation in action.</p>
|
||||
|
||||
<p>Because this re-render is so fast (around 1ms for TodoMVC), the developer
|
||||
doesn't need to explicitly specify data bindings. We've found this approach
|
||||
makes it easier to build apps.</p>
|
||||
<h2><a class="anchor" name="html-is-just-the-beginning."></a>HTML is just the beginning. <a class="hash-link" href="#html-is-just-the-beginning.">#</a></h2>
|
||||
<p>Because React has its own lightweight representation of the document, we can do
|
||||
some pretty cool things with it:</p>
|
||||
|
||||
<ul>
|
||||
<li>Facebook has dynamic charts that render to <code><canvas></code> instead of HTML.</li>
|
||||
<li>Instagram is a "single page" web app built entirely with React and
|
||||
<code>Backbone.Router</code>. Designers regularly contribute React code with JSX.</li>
|
||||
<li>We've built internal prototypes that run React apps in a web worker and use
|
||||
React to drive <strong>native iOS views</strong> via an Objective-C bridge.</li>
|
||||
<li>You can run React
|
||||
<a href="http://github.com/petehunt/react-server-rendering-example">on the server</a>
|
||||
for SEO, performance, code sharing and overall flexibility.</li>
|
||||
<li>Events behave in a consistent, standards-compliant way in all browsers
|
||||
(including IE8) and automatically use
|
||||
<a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Head on over to <a href="/react">facebook.github.io/react</a> to check out what we have
|
||||
built. Our documentation is geared towards building apps with the framework,
|
||||
but if you are interested in the nuts and bolts
|
||||
<a href="/react/support.html">get in touch</a> with us!</p>
|
||||
|
||||
<p>Thanks for reading!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+92
-2
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,96 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></h1>
|
||||
<p class="meta">June 5, 2013 by Pete Hunt</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>There are a lot of JavaScript MVC frameworks out there. Why did we build React
|
||||
and why would you want to use it?</p>
|
||||
<h2><a class="anchor" name="react-isnt-an-mvc-framework."></a>React isn't an MVC framework. <a class="hash-link" href="#react-isnt-an-mvc-framework.">#</a></h2>
|
||||
<p>React is a library for building composable user interfaces. It encourages
|
||||
the creation of reusable UI components which present data that changes over
|
||||
time.</p>
|
||||
<h2><a class="anchor" name="react-doesnt-use-templates."></a>React doesn't use templates. <a class="hash-link" href="#react-doesnt-use-templates.">#</a></h2>
|
||||
<p>Traditionally, web application UIs are built using templates or HTML directives.
|
||||
These templates dictate the full set of abstractions that you are allowed to use
|
||||
to build your UI.</p>
|
||||
|
||||
<p>React approaches building user interfaces differently by breaking them into
|
||||
<strong>components</strong>. This means React uses a real, full featured programming language
|
||||
to render views, which we see as an advantage over templates for a few reasons:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>JavaScript is a flexible, powerful programming language</strong> with the ability
|
||||
to build abstractions. This is incredibly important in large applications.</li>
|
||||
<li>By unifying your markup with its corresponding view logic, React can actually
|
||||
make views <strong>easier to extend and maintain</strong>.</li>
|
||||
<li>By baking an understanding of markup and content into JavaScript, there's
|
||||
<strong>no manual string concatenation</strong> and therefore less surface area for XSS
|
||||
vulnerabilities.</li>
|
||||
</ul>
|
||||
|
||||
<p>We've also created <a href="/react/docs/jsx-in-depth.html">JSX</a>, an optional syntax
|
||||
extension, in case you prefer the readability of HTML to raw JavaScript.</p>
|
||||
<h2><a class="anchor" name="reactive-updates-are-dead-simple."></a>Reactive updates are dead simple. <a class="hash-link" href="#reactive-updates-are-dead-simple.">#</a></h2>
|
||||
<p>React really shines when your data changes over time.</p>
|
||||
|
||||
<p>In a traditional JavaScript application, you need to look at what data changed
|
||||
and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
|
||||
which provides a declarative interface via directives and data binding <a href="http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation">requires
|
||||
a linking function to manually update DOM nodes</a>.</p>
|
||||
|
||||
<p>React takes a different approach.</p>
|
||||
|
||||
<p>When your component is first initialized, the <code>render</code> method is called,
|
||||
generating a lightweight representation of your view. From that representation,
|
||||
a string of markup is produced, and injected into the document. When your data
|
||||
changes, the <code>render</code> method is called again. In order to perform updates as
|
||||
efficiently as possible, we diff the return value from the previous call to
|
||||
<code>render</code> with the new one, and generate a minimal set of changes to be applied
|
||||
to the DOM.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The data returned from <code>render</code> is neither a string nor a DOM node -- it's a
|
||||
lightweight description of what the DOM should look like.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>We call this process <strong>reconciliation</strong>. Check out
|
||||
<a href="http://jsfiddle.net/fv6RD/3/">this jsFiddle</a> to see an example of
|
||||
reconciliation in action.</p>
|
||||
|
||||
<p>Because this re-render is so fast (around 1ms for TodoMVC), the developer
|
||||
doesn't need to explicitly specify data bindings. We've found this approach
|
||||
makes it easier to build apps.</p>
|
||||
<h2><a class="anchor" name="html-is-just-the-beginning."></a>HTML is just the beginning. <a class="hash-link" href="#html-is-just-the-beginning.">#</a></h2>
|
||||
<p>Because React has its own lightweight representation of the document, we can do
|
||||
some pretty cool things with it:</p>
|
||||
|
||||
<ul>
|
||||
<li>Facebook has dynamic charts that render to <code><canvas></code> instead of HTML.</li>
|
||||
<li>Instagram is a "single page" web app built entirely with React and
|
||||
<code>Backbone.Router</code>. Designers regularly contribute React code with JSX.</li>
|
||||
<li>We've built internal prototypes that run React apps in a web worker and use
|
||||
React to drive <strong>native iOS views</strong> via an Objective-C bridge.</li>
|
||||
<li>You can run React
|
||||
<a href="http://github.com/petehunt/react-server-rendering-example">on the server</a>
|
||||
for SEO, performance, code sharing and overall flexibility.</li>
|
||||
<li>Events behave in a consistent, standards-compliant way in all browsers
|
||||
(including IE8) and automatically use
|
||||
<a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Head on over to <a href="/react">facebook.github.io/react</a> to check out what we have
|
||||
built. Our documentation is geared towards building apps with the framework,
|
||||
but if you are interested in the nuts and bolts
|
||||
<a href="/react/support.html">get in touch</a> with us!</p>
|
||||
|
||||
<p>Thanks for reading!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></h1>
|
||||
<p class="meta">June 2, 2013 by Christopher Chedeau</p>
|
||||
|
||||
+123
-274
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,127 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/10/28/react-v0.12.html">React v0.12</a></h1>
|
||||
<p class="meta">October 28, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!</p>
|
||||
|
||||
<p>We have talked a lot about some of the bigger changes in this release. <a href="/react/blog/2014/10/14/introducing-react-elements.html">We introduced new terminology</a> and changed APIs to clean up and simplify some of the concepts of React. <a href="/react/blog/2014/10/16/react-v0.12-rc1.html">We also made several changes to JSX</a> and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.</p>
|
||||
|
||||
<p>The release is available for download:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.12.0.js">http://fb.me/react-0.12.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.12.0.min.js">http://fb.me/react-0.12.0.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.12.0.js">http://fb.me/react-with-addons-0.12.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.12.0.min.js">http://fb.me/react-with-addons-0.12.0.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.12.0.js">http://fb.me/JSXTransformer-0.12.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.12.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
<h2><a class="anchor" name="new-terminology-amp-updated-apis"></a>New Terminology & Updated APIs <a class="hash-link" href="#new-terminology-amp-updated-apis">#</a></h2>
|
||||
<p>v0.12 is bringing about some new terminology. <a href="/react/blog/2014/10/14/introducing-react-elements.html">We introduced</a> this 2 weeks ago and we've also documented it in <a href="/react/docs/glossary.html">a new section of the documentation</a>. As a part of this, we also corrected many of our top-level APIs to align with the terminology. <code>Component</code> has been removed from all of our <code>React.render*</code> methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with <code>render</code> methods in your component classes, we decided to keep the top-level functions short and sweet. <code>React.renderComponent</code> is now <code>React.render</code>.</p>
|
||||
|
||||
<p>We also corrected some other misnomers. <code>React.isValidComponent</code> actually determines if the argument is a ReactElement, so it has been renamed to <code>React.isValidElement</code>. In the same vein, <code>React.PropTypes.component</code> is now <code>React.PropTypes.element</code> and <code>React.PropTypes.renderable</code> is now <code>React.PropTypes.node</code>.</p>
|
||||
|
||||
<p>The old methods will still work but will warn upon first use. They will be removed in v0.13.</p>
|
||||
<h2><a class="anchor" name="jsx-changes"></a>JSX Changes <a class="hash-link" href="#jsx-changes">#</a></h2>
|
||||
<p><a href="/react/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes">We talked more in depth about these before</a>, so here are the highlights.</p>
|
||||
|
||||
<ul>
|
||||
<li>No more <code>/** @jsx React.DOM */</code>!</li>
|
||||
<li>We no longer transform to a straight function call. <code><Component/></code> now becomes <code>React.createElement(Component)</code></li>
|
||||
<li>DOM components don't make use of <code>React.DOM</code>, instead we pass the tag name directly. <code><div/></code> becomes <code>React.createElement('div')</code></li>
|
||||
<li>We introduced spread attributes as a quick way to transfer props.</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="devtools-improvements-no-more-__internals"></a>DevTools Improvements, No More <code>__internals</code> <a class="hash-link" href="#devtools-improvements-no-more-__internals">#</a></h2>
|
||||
<p>For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!</p>
|
||||
|
||||
<p>As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. <code>React.__internals</code> is no more.</p>
|
||||
<h2><a class="anchor" name="license-change---bsd"></a>License Change - BSD <a class="hash-link" href="#license-change---bsd">#</a></h2>
|
||||
<p>We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.</p>
|
||||
|
||||
<p>You can read the full text of the <a href="https://github.com/facebook/react/blob/master/LICENSE">LICENSE</a> and <a href="https://github.com/facebook/react/blob/master/PATENTS"><code>PATENTS</code></a> files on GitHub.</p>
|
||||
|
||||
<hr>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li><code>key</code> and <code>ref</code> moved off props object, now accessible on the element directly</li>
|
||||
<li>React is now BSD licensed with accompanying Patents grant</li>
|
||||
<li>Default prop resolution has moved to Element creation time instead of mount time, making them effectively static</li>
|
||||
<li><code>React.__internals</code> is removed - it was exposed for DevTools which no longer needs access</li>
|
||||
<li>Composite Component functions can no longer be called directly - they must be wrapped with <code>React.createFactory</code> first. This is handled for you when using JSX.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Spread operator (<code>{...}</code>) introduced to deprecate <code>this.transferPropsTo</code></li>
|
||||
<li>Added support for more HTML attributes: <code>acceptCharset</code>, <code>classID</code>, <code>manifest</code></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||||
<ul>
|
||||
<li><code>React.renderComponent</code> --> <code>React.render</code></li>
|
||||
<li><code>React.renderComponentToString</code> --> <code>React.renderToString</code></li>
|
||||
<li><code>React.renderComponentToStaticMarkup</code> --> <code>React.renderToStaticMarkup</code></li>
|
||||
<li><code>React.isValidComponent</code> --> <code>React.isValidElement</code></li>
|
||||
<li><code>React.PropTypes.component</code> --> <code>React.PropTypes.element</code></li>
|
||||
<li><code>React.PropTypes.renderable</code> --> <code>React.PropTypes.node</code></li>
|
||||
<li><strong>DEPRECATED</strong> <code>React.isValidClass</code></li>
|
||||
<li><strong>DEPRECATED</strong> <code>instance.transferPropsTo</code></li>
|
||||
<li><strong>DEPRECATED</strong> Returning <code>false</code> from event handlers to preventDefault</li>
|
||||
<li><strong>DEPRECATED</strong> Convenience Constructor usage as function, instead wrap with <code>React.createFactory</code></li>
|
||||
<li><strong>DEPRECATED</strong> use of <code>key={null}</code> to assign implicit keys</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components</li>
|
||||
<li>Correctly treat <code>event.getModifierState</code> as case sensitive</li>
|
||||
<li>Improved normalization of <code>event.charCode</code></li>
|
||||
<li>Better error stacks when involving autobound methods</li>
|
||||
<li>Removed DevTools message when the DevTools are installed</li>
|
||||
<li>Correctly detect required language features across browsers</li>
|
||||
<li>Fixed support for some HTML attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>list</code> updates correctly now</li>
|
||||
<li><code>scrollLeft</code>, <code>scrollTop</code> removed, these should not be specified as props</li>
|
||||
</ul></li>
|
||||
<li>Improved error messages</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons"></a>React With Addons <a class="hash-link" href="#react-with-addons">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li><code>React.addons.batchedUpdates</code> added to API for hooking into update cycle</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li><code>React.addons.update</code> uses <code>assign</code> instead of <code>copyProperties</code> which does <code>hasOwnProperty</code> checks. Properties on prototypes will no longer be updated correctly.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Fixed some issues with CSS Transitions</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components</li>
|
||||
<li>JSX no longer transforms to simple function calls</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li><code>@jsx React.DOM</code> no longer required</li>
|
||||
<li>spread (<code>{...}</code>) operator introduced to allow easier use of props</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/10/27/react-js-conf.html">React.js Conf</a></h1>
|
||||
<p class="meta">October 27, 2014 by Vjeux</p>
|
||||
@@ -491,278 +612,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.12.0-rc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></h1>
|
||||
<p class="meta">September 24, 2014 by Bill Fisher</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p><a href="http://facebook.github.io/flux/">Flux</a> is the application architecture that Facebook uses to build web applications with <a href="http://facebook.github.io/react/">React</a>. It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the <a href="http://facebook.github.io/flux/docs/overview.html">basic structure and data flow</a>, more closely examined the <a href="http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html">dispatcher and action creators</a>, and shown how to put it all together with a <a href="http://facebook.github.io/flux/docs/todo-list.html">tutorial</a>. Now let's look at how to do formal unit testing of Flux applications with <a href="http://facebook.github.io/jest/">Jest</a>, Facebook's auto-mocking testing framework.</p>
|
||||
<h2><a class="anchor" name="testing-with-jest"></a>Testing with Jest <a class="hash-link" href="#testing-with-jest">#</a></h2>
|
||||
<p>For a unit test to operate on a truly isolated <em>unit</em> of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc">example TodoMVC application</a>.</p>
|
||||
|
||||
<p>The first steps toward working with Jest are as follows:</p>
|
||||
|
||||
<ol>
|
||||
<li>Get the module dependencies for the application installed by running <code>npm install</code>.</li>
|
||||
<li>Create a directory <code>__tests__/</code> with a test file, in this case TodoStore-test.js</li>
|
||||
<li>Run <code>npm install jest-cli —save-dev</code></li>
|
||||
<li>Add the following to your package.json</li>
|
||||
</ol>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="s2">"scripts"</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s2">"test"</span><span class="o">:</span> <span class="s2">"jest"</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Now you're ready to run your tests from the command line with <code>npm test</code>.</p>
|
||||
|
||||
<p>By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest's <code>dontMock()</code> method.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">'TodoStore'</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.</p>
|
||||
<h2><a class="anchor" name="testing-stores"></a>Testing Stores <a class="hash-link" href="#testing-stores">#</a></h2>
|
||||
<p>At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it's not entirely obvious how to test them.</p>
|
||||
|
||||
<p>By design, stores can't be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher.</p>
|
||||
|
||||
<p>We therefore need to simulate the Flux data flow with this <em>one weird trick</em>.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">mockRegister</span> <span class="o">=</span> <span class="nx">MyDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">mockRegisterInfo</span> <span class="o">=</span> <span class="nx">mockRegister</span><span class="p">.</span><span class="nx">mock</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">callsToRegister</span> <span class="o">=</span> <span class="nx">mockRegisterInfo</span><span class="p">.</span><span class="nx">calls</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">firstCall</span> <span class="o">=</span> <span class="nx">callsToRegister</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">firstArgument</span> <span class="o">=</span> <span class="nx">firstCall</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">callback</span> <span class="o">=</span> <span class="nx">firstArgument</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>We now have the store's registered callback, the sole mechanism by which data can enter the store.</p>
|
||||
|
||||
<p>For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let's look at each part of it a bit more closely. We start out by looking at the <code>register()</code> method of our application's dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the <code>register()</code> method just as we would normally refer to that method in our production code. But we can get additional information about that method with the <code>mock</code> <em>property</em> of that method. We don't often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to <code>register()</code> is available with the <code>calls</code> property of <code>mock</code>, and each of these calls has a list of the arguments that were used in each method call.</p>
|
||||
|
||||
<p>So in this code, we are really saying, "Give me a reference to the first argument of the first call to MyDispatcher's <code>register()</code> method." That first argument is the store's callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">callback</span> <span class="o">=</span> <span class="nx">MyDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
|
||||
</code></pre></div>
|
||||
<p>We can invoke that callback whenever we like, independent of our application's dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we'll create directly in our test.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">payload</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_CREATE</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">'foo'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">payload</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]].</span><span class="nx">text</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="putting-it-all-together"></a>Putting it All Together <a class="hash-link" href="#putting-it-all-together">#</a></h2>
|
||||
<p>The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let's look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store's registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">'../TodoStore'</span><span class="p">);</span>
|
||||
<span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">'react/lib/merge'</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">describe</span><span class="p">(</span><span class="s1">'TodoStore'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TodoConstants</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../../constants/TodoConstants'</span><span class="p">);</span>
|
||||
|
||||
<span class="c1">// mock actions inside dispatch payloads</span>
|
||||
<span class="kd">var</span> <span class="nx">actionTodoCreate</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_CREATE</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">'foo'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">actionTodoDestroy</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_DESTROY</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'replace me in test'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">AppDispatcher</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">TodoStore</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">callback</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">beforeEach</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">AppDispatcher</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../../dispatcher/AppDispatcher'</span><span class="p">);</span>
|
||||
<span class="nx">TodoStore</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../TodoStore'</span><span class="p">);</span>
|
||||
<span class="nx">callback</span> <span class="o">=</span> <span class="nx">AppDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">'registers a callback with the dispatcher'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">AppDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">'initializes with no to-do items'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({});</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">'creates a to-do item'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoCreate</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">keys</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]].</span><span class="nx">text</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">'destroys a to-do item'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoCreate</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">keys</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="nx">actionTodoDestroy</span><span class="p">.</span><span class="nx">action</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoDestroy</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]]).</span><span class="nx">toBeUndefined</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>You can take a look at all this code in the <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js">TodoStore's tests on GitHub</a> as well. </p>
|
||||
<h2><a class="anchor" name="mocking-data-derived-from-other-stores"></a>Mocking Data Derived from Other Stores <a class="hash-link" href="#mocking-data-derived-from-other-stores">#</a></h2>
|
||||
<p>Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we'll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyOtherStore</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../MyOtherStore'</span><span class="p">);</span>
|
||||
<span class="nx">MyOtherStore</span><span class="p">.</span><span class="nx">getState</span><span class="p">.</span><span class="nx">mockReturnValue</span><span class="p">({</span>
|
||||
<span class="s1">'123'</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'123'</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">'foo'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s1">'456'</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'456'</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">'bar'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store's registered callback.</p>
|
||||
|
||||
<p>A brief example of this technique is up on GitHub within the Flux Chat example's <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js">UnreadThreadStore-test.js</a>.</p>
|
||||
|
||||
<p>For more information about the <code>mock</code> property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on <a href="http://facebook.github.io/jest/docs/mock-functions.html">mock functions</a>.</p>
|
||||
<h2><a class="anchor" name="moving-logic-from-react-to-stores"></a>Moving Logic from React to Stores <a class="hash-link" href="#moving-logic-from-react-to-stores">#</a></h2>
|
||||
<p>What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application's behavior, and when application logic slips into our view layer, this becomes more difficult.</p>
|
||||
|
||||
<p>For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the "Mark all as complete" checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection's <code>render()</code> method:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">allTodos</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">allTodos</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">allChecked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="nx">allTodos</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">allTodos</span><span class="p">[</span><span class="nx">id</span><span class="p">].</span><span class="nx">complete</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">allChecked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">break</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">section</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"main"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">id</span><span class="o">=</span><span class="s2">"toggle-all"</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="nx">allChecked</span> <span class="o">?</span> <span class="s1">'checked'</span> <span class="o">:</span> <span class="s1">''</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">...</span>
|
||||
<span class="o"><</span><span class="err">/section></span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can't be described in our spec-style TodoStore test. Let's take that logic and move it to the store. First, we'll create a public method on the store that will encapsulate that logic:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">areAllComplete</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="nx">_todos</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_todos</span><span class="p">[</span><span class="nx">id</span><span class="p">].</span><span class="nx">complete</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>Now we have the application logic where it belongs, and we can write the following test:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">it</span><span class="p">(</span><span class="s1">'determines whether all to-do items are complete'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">3</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">mockTodoCreate</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">all</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">({</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_COMPLETE</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="nx">key</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">callback</span><span class="p">({</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_UNDO_COMPLETE</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="nx">key</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Finally, we revise our view layer. We'll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">getTodoState</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">allTodos</span><span class="o">:</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">(),</span>
|
||||
<span class="nx">areAllComplete</span><span class="o">:</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TodoApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="cm">/**</span>
|
||||
<span class="cm"> * @return {object}</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="p">...</span>
|
||||
<span class="o"><</span><span class="nx">MainSection</span>
|
||||
<span class="nx">allTodos</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">allTodos</span><span class="p">}</span>
|
||||
<span class="nx">areAllComplete</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="cm">/**</span>
|
||||
<span class="cm"> * Event handler for 'change' events coming from the TodoStore</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="nx">_onChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">getTodoState</span><span class="p">());</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>And then we'll utilize that property for the rendering of the checkbox.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">section</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"main"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">id</span><span class="o">=</span><span class="s2">"toggle-all"</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">areAllComplete</span> <span class="o">?</span> <span class="s1">'checked'</span> <span class="o">:</span> <span class="s1">''</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">...</span>
|
||||
<span class="o"><</span><span class="err">/section></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>To learn how to test React components themselves, check out the <a href="http://facebook.github.io/jest/docs/tutorial-react.html">Jest tutorial for React</a> and the <a href="http://facebook.github.io/react/docs/test-utils.html">ReactTestUtils documentation</a>.</p>
|
||||
<h2><a class="anchor" name="further-reading"></a>Further Reading <a class="hash-link" href="#further-reading">#</a></h2>
|
||||
<ul>
|
||||
<li><a href="http://martinfowler.com/articles/mocksArentStubs.html">Mocks Aren't Stubs</a> by Martin Fowler</li>
|
||||
<li><a href="http://facebook.github.io/jest/docs/api.html">Jest API Reference</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+274
-36
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,278 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></h1>
|
||||
<p class="meta">September 24, 2014 by Bill Fisher</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p><a href="http://facebook.github.io/flux/">Flux</a> is the application architecture that Facebook uses to build web applications with <a href="http://facebook.github.io/react/">React</a>. It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the <a href="http://facebook.github.io/flux/docs/overview.html">basic structure and data flow</a>, more closely examined the <a href="http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html">dispatcher and action creators</a>, and shown how to put it all together with a <a href="http://facebook.github.io/flux/docs/todo-list.html">tutorial</a>. Now let's look at how to do formal unit testing of Flux applications with <a href="http://facebook.github.io/jest/">Jest</a>, Facebook's auto-mocking testing framework.</p>
|
||||
<h2><a class="anchor" name="testing-with-jest"></a>Testing with Jest <a class="hash-link" href="#testing-with-jest">#</a></h2>
|
||||
<p>For a unit test to operate on a truly isolated <em>unit</em> of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc">example TodoMVC application</a>.</p>
|
||||
|
||||
<p>The first steps toward working with Jest are as follows:</p>
|
||||
|
||||
<ol>
|
||||
<li>Get the module dependencies for the application installed by running <code>npm install</code>.</li>
|
||||
<li>Create a directory <code>__tests__/</code> with a test file, in this case TodoStore-test.js</li>
|
||||
<li>Run <code>npm install jest-cli —save-dev</code></li>
|
||||
<li>Add the following to your package.json</li>
|
||||
</ol>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="s2">"scripts"</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s2">"test"</span><span class="o">:</span> <span class="s2">"jest"</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Now you're ready to run your tests from the command line with <code>npm test</code>.</p>
|
||||
|
||||
<p>By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest's <code>dontMock()</code> method.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">'TodoStore'</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.</p>
|
||||
<h2><a class="anchor" name="testing-stores"></a>Testing Stores <a class="hash-link" href="#testing-stores">#</a></h2>
|
||||
<p>At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it's not entirely obvious how to test them.</p>
|
||||
|
||||
<p>By design, stores can't be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher.</p>
|
||||
|
||||
<p>We therefore need to simulate the Flux data flow with this <em>one weird trick</em>.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">mockRegister</span> <span class="o">=</span> <span class="nx">MyDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">mockRegisterInfo</span> <span class="o">=</span> <span class="nx">mockRegister</span><span class="p">.</span><span class="nx">mock</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">callsToRegister</span> <span class="o">=</span> <span class="nx">mockRegisterInfo</span><span class="p">.</span><span class="nx">calls</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">firstCall</span> <span class="o">=</span> <span class="nx">callsToRegister</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">firstArgument</span> <span class="o">=</span> <span class="nx">firstCall</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">callback</span> <span class="o">=</span> <span class="nx">firstArgument</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>We now have the store's registered callback, the sole mechanism by which data can enter the store.</p>
|
||||
|
||||
<p>For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let's look at each part of it a bit more closely. We start out by looking at the <code>register()</code> method of our application's dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the <code>register()</code> method just as we would normally refer to that method in our production code. But we can get additional information about that method with the <code>mock</code> <em>property</em> of that method. We don't often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to <code>register()</code> is available with the <code>calls</code> property of <code>mock</code>, and each of these calls has a list of the arguments that were used in each method call.</p>
|
||||
|
||||
<p>So in this code, we are really saying, "Give me a reference to the first argument of the first call to MyDispatcher's <code>register()</code> method." That first argument is the store's callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">callback</span> <span class="o">=</span> <span class="nx">MyDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
|
||||
</code></pre></div>
|
||||
<p>We can invoke that callback whenever we like, independent of our application's dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we'll create directly in our test.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">payload</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_CREATE</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">'foo'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">payload</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]].</span><span class="nx">text</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="putting-it-all-together"></a>Putting it All Together <a class="hash-link" href="#putting-it-all-together">#</a></h2>
|
||||
<p>The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let's look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store's registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">'../TodoStore'</span><span class="p">);</span>
|
||||
<span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">'react/lib/merge'</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">describe</span><span class="p">(</span><span class="s1">'TodoStore'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TodoConstants</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../../constants/TodoConstants'</span><span class="p">);</span>
|
||||
|
||||
<span class="c1">// mock actions inside dispatch payloads</span>
|
||||
<span class="kd">var</span> <span class="nx">actionTodoCreate</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_CREATE</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">'foo'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">actionTodoDestroy</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_DESTROY</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'replace me in test'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">AppDispatcher</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">TodoStore</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">callback</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">beforeEach</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">AppDispatcher</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../../dispatcher/AppDispatcher'</span><span class="p">);</span>
|
||||
<span class="nx">TodoStore</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../TodoStore'</span><span class="p">);</span>
|
||||
<span class="nx">callback</span> <span class="o">=</span> <span class="nx">AppDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">'registers a callback with the dispatcher'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">AppDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">'initializes with no to-do items'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({});</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">'creates a to-do item'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoCreate</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">keys</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]].</span><span class="nx">text</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">'destroys a to-do item'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoCreate</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">keys</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="nx">actionTodoDestroy</span><span class="p">.</span><span class="nx">action</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoDestroy</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]]).</span><span class="nx">toBeUndefined</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>You can take a look at all this code in the <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js">TodoStore's tests on GitHub</a> as well. </p>
|
||||
<h2><a class="anchor" name="mocking-data-derived-from-other-stores"></a>Mocking Data Derived from Other Stores <a class="hash-link" href="#mocking-data-derived-from-other-stores">#</a></h2>
|
||||
<p>Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we'll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyOtherStore</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'../MyOtherStore'</span><span class="p">);</span>
|
||||
<span class="nx">MyOtherStore</span><span class="p">.</span><span class="nx">getState</span><span class="p">.</span><span class="nx">mockReturnValue</span><span class="p">({</span>
|
||||
<span class="s1">'123'</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'123'</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">'foo'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s1">'456'</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'456'</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">'bar'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store's registered callback.</p>
|
||||
|
||||
<p>A brief example of this technique is up on GitHub within the Flux Chat example's <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js">UnreadThreadStore-test.js</a>.</p>
|
||||
|
||||
<p>For more information about the <code>mock</code> property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on <a href="http://facebook.github.io/jest/docs/mock-functions.html">mock functions</a>.</p>
|
||||
<h2><a class="anchor" name="moving-logic-from-react-to-stores"></a>Moving Logic from React to Stores <a class="hash-link" href="#moving-logic-from-react-to-stores">#</a></h2>
|
||||
<p>What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application's behavior, and when application logic slips into our view layer, this becomes more difficult.</p>
|
||||
|
||||
<p>For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the "Mark all as complete" checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection's <code>render()</code> method:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">allTodos</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">allTodos</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">allChecked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="nx">allTodos</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">allTodos</span><span class="p">[</span><span class="nx">id</span><span class="p">].</span><span class="nx">complete</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">allChecked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">break</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">section</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"main"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">id</span><span class="o">=</span><span class="s2">"toggle-all"</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="nx">allChecked</span> <span class="o">?</span> <span class="s1">'checked'</span> <span class="o">:</span> <span class="s1">''</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">...</span>
|
||||
<span class="o"><</span><span class="err">/section></span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can't be described in our spec-style TodoStore test. Let's take that logic and move it to the store. First, we'll create a public method on the store that will encapsulate that logic:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">areAllComplete</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="nx">_todos</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_todos</span><span class="p">[</span><span class="nx">id</span><span class="p">].</span><span class="nx">complete</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>Now we have the application logic where it belongs, and we can write the following test:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">it</span><span class="p">(</span><span class="s1">'determines whether all to-do items are complete'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">3</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">mockTodoCreate</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">all</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">({</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_COMPLETE</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="nx">key</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">callback</span><span class="p">({</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">'VIEW_ACTION'</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_UNDO_COMPLETE</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="nx">key</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Finally, we revise our view layer. We'll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">getTodoState</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">allTodos</span><span class="o">:</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">(),</span>
|
||||
<span class="nx">areAllComplete</span><span class="o">:</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TodoApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="cm">/**</span>
|
||||
<span class="cm"> * @return {object}</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="p">...</span>
|
||||
<span class="o"><</span><span class="nx">MainSection</span>
|
||||
<span class="nx">allTodos</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">allTodos</span><span class="p">}</span>
|
||||
<span class="nx">areAllComplete</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="cm">/**</span>
|
||||
<span class="cm"> * Event handler for 'change' events coming from the TodoStore</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="nx">_onChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">getTodoState</span><span class="p">());</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>And then we'll utilize that property for the rendering of the checkbox.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">section</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"main"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">id</span><span class="o">=</span><span class="s2">"toggle-all"</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"checkbox"</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">areAllComplete</span> <span class="o">?</span> <span class="s1">'checked'</span> <span class="o">:</span> <span class="s1">''</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="p">...</span>
|
||||
<span class="o"><</span><span class="err">/section></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>To learn how to test React components themselves, check out the <a href="http://facebook.github.io/jest/docs/tutorial-react.html">Jest tutorial for React</a> and the <a href="http://facebook.github.io/react/docs/test-utils.html">ReactTestUtils documentation</a>.</p>
|
||||
<h2><a class="anchor" name="further-reading"></a>Further Reading <a class="hash-link" href="#further-reading">#</a></h2>
|
||||
<ul>
|
||||
<li><a href="http://martinfowler.com/articles/mocksArentStubs.html">Mocks Aren't Stubs</a> by Martin Fowler</li>
|
||||
<li><a href="http://facebook.github.io/jest/docs/api.html">Jest API Reference</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/09/16/react-v0.11.2.html">React v0.11.2</a></h1>
|
||||
<p class="meta">September 16, 2014 by Paul O’Shannessy</p>
|
||||
@@ -339,40 +611,6 @@ This is not the intended way to use React but can be useful as last resort if yo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html">Flux: Actions and the Dispatcher</a></h1>
|
||||
<p class="meta">July 30, 2014 by Bill Fisher</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. <a href="http://youtu.be/nYkdrAPrdcw?t=10m20s">Jing Chen presented Flux</a> at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an <a href="http://facebook.github.io/flux/docs/overview.html">overview of Flux</a> and a <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/">TodoMVC example</a>, with an accompanying <a href="http://facebook.github.io/flux/docs/todo-list.html">tutorial</a>.</p>
|
||||
|
||||
<p>Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new <a href="https://github.com/facebook/flux">Flux code repository</a> and <a href="http://facebook.github.io/flux/">Flux website</a>, we've now open sourced the same <a href="http://facebook.github.io/flux/docs/dispatcher.html">dispatcher</a> we use in our production applications.</p>
|
||||
<h2><a class="anchor" name="where-the-dispatcher-fits-in-the-flux-data-flow"></a>Where the Dispatcher Fits in the Flux Data Flow <a class="hash-link" href="#where-the-dispatcher-fits-in-the-flux-data-flow">#</a></h2>
|
||||
<p>The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each <em>store</em> registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.</p>
|
||||
<h2><a class="anchor" name="actions-and-actioncreators"></a>Actions and ActionCreators <a class="hash-link" href="#actions-and-actioncreators">#</a></h2>
|
||||
<p>When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an <em>action</em> — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.</p>
|
||||
|
||||
<p>Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.</p>
|
||||
|
||||
<p>Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the <a href="http://en.wikipedia.org/wiki/Law_of_Demeter">Law of Demeter</a>, the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.</p>
|
||||
|
||||
<p><img src="/react/img/blog/flux-diagram.png" style="width: 100%;" /></p>
|
||||
<h2><a class="anchor" name="why-we-need-a-dispatcher"></a>Why We Need a Dispatcher <a class="hash-link" href="#why-we-need-a-dispatcher">#</a></h2>
|
||||
<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.</p>
|
||||
|
||||
<p>The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.</p>
|
||||
|
||||
<p>Further, the waitFor() method may be used in different ways for different actions, within the same store's callback. In one case, Store A might need to wait for Store B. But in another case, it might need to wait for Store C. Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.</p>
|
||||
|
||||
<p>Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.</p>
|
||||
<h2><a class="anchor" name="example-chat-app"></a>Example Chat App <a class="hash-link" href="#example-chat-app">#</a></h2>
|
||||
<p>Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat">chat app</a>, slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.</p>
|
||||
|
||||
<p>We're hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+36
-53
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,40 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html">Flux: Actions and the Dispatcher</a></h1>
|
||||
<p class="meta">July 30, 2014 by Bill Fisher</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. <a href="http://youtu.be/nYkdrAPrdcw?t=10m20s">Jing Chen presented Flux</a> at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an <a href="http://facebook.github.io/flux/docs/overview.html">overview of Flux</a> and a <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/">TodoMVC example</a>, with an accompanying <a href="http://facebook.github.io/flux/docs/todo-list.html">tutorial</a>.</p>
|
||||
|
||||
<p>Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new <a href="https://github.com/facebook/flux">Flux code repository</a> and <a href="http://facebook.github.io/flux/">Flux website</a>, we've now open sourced the same <a href="http://facebook.github.io/flux/docs/dispatcher.html">dispatcher</a> we use in our production applications.</p>
|
||||
<h2><a class="anchor" name="where-the-dispatcher-fits-in-the-flux-data-flow"></a>Where the Dispatcher Fits in the Flux Data Flow <a class="hash-link" href="#where-the-dispatcher-fits-in-the-flux-data-flow">#</a></h2>
|
||||
<p>The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each <em>store</em> registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.</p>
|
||||
<h2><a class="anchor" name="actions-and-actioncreators"></a>Actions and ActionCreators <a class="hash-link" href="#actions-and-actioncreators">#</a></h2>
|
||||
<p>When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an <em>action</em> — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.</p>
|
||||
|
||||
<p>Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.</p>
|
||||
|
||||
<p>Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the <a href="http://en.wikipedia.org/wiki/Law_of_Demeter">Law of Demeter</a>, the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.</p>
|
||||
|
||||
<p><img src="/react/img/blog/flux-diagram.png" style="width: 100%;" /></p>
|
||||
<h2><a class="anchor" name="why-we-need-a-dispatcher"></a>Why We Need a Dispatcher <a class="hash-link" href="#why-we-need-a-dispatcher">#</a></h2>
|
||||
<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.</p>
|
||||
|
||||
<p>The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.</p>
|
||||
|
||||
<p>Further, the waitFor() method may be used in different ways for different actions, within the same store's callback. In one case, Store A might need to wait for Store B. But in another case, it might need to wait for Store C. Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.</p>
|
||||
|
||||
<p>Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.</p>
|
||||
<h2><a class="anchor" name="example-chat-app"></a>Example Chat App <a class="hash-link" href="#example-chat-app">#</a></h2>
|
||||
<p>Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat">chat app</a>, slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.</p>
|
||||
|
||||
<p>We're hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/28/community-roundup-20.html">Community Round-up #20</a></h1>
|
||||
<p class="meta">July 28, 2014 by Lou Husson</p>
|
||||
@@ -509,57 +543,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/06/27/community-roundup-19.html">Community Round-up #19</a></h1>
|
||||
<p class="meta">June 27, 2014 by Cheng Lou</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<h2><a class="anchor" name="react-meetups"></a>React Meetups! <a class="hash-link" href="#react-meetups">#</a></h2>
|
||||
<p>Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in <a href="http://www.meetup.com/ReactJS-San-Francisco/">San Francisco</a> (courtesy of <a href="http://www.telmate.com">Telmate</a>), and one in <a href="http://www.meetup.com/London-React-User-Group/">London</a> (courtesy of <a href="http://www.meetup.com/London-React-User-Group/members/105837542/">Stuart Harris</a>, <a href="http://www.meetup.com/London-React-User-Group/members/15509971/">Cain Ullah</a> and <a href="http://www.meetup.com/London-React-User-Group/members/137058242/">Zoe Merchant</a>). These two events have been big successes; a second one in London is <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">already planned</a>.</p>
|
||||
|
||||
<p>If you don't live near San Francisco or London, why not start one in your community?</p>
|
||||
<h2><a class="anchor" name="complementary-tools"></a>Complementary Tools <a class="hash-link" href="#complementary-tools">#</a></h2>
|
||||
<p>In case you haven't seen it, we've consolidated the tooling solution around React on <a href="https://github.com/facebook/react/wiki/Complementary-Tools">this wiki page</a>. Some of the notable recent entries include:</p>
|
||||
|
||||
<ul>
|
||||
<li><p><a href="https://github.com/rpflorence">Ryan Florence</a> and <a href="https://github.com/mjackson">Michael Jackson</a>'s <a href="https://github.com/rpflorence/react-nested-router">react-nested-router</a>, which is a translation of the Ember router API to React.</p></li>
|
||||
<li><p><a href="https://github.com/stevoland">Stephen J. Collings</a>'s <a href="https://github.com/react-bootstrap/react-bootstrap">react-bootstrap</a>, which wraps the popular framework with a bit of React goodness. The <a href="http://react-bootstrap.github.io/components.html">website</a> features live-editable demos.</p></li>
|
||||
<li><p><a href="https://github.com/andreypopp">Andrey Popp</a>'s <a href="https://github.com/andreypopp/react-quickstart">react-quickstart</a>, which gives you a quick template for server-side rendering and routing, among other features.</p></li>
|
||||
</ul>
|
||||
|
||||
<p>These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!</p>
|
||||
<h2><a class="anchor" name="react-in-interesting-places"></a>React in Interesting Places <a class="hash-link" href="#react-in-interesting-places">#</a></h2>
|
||||
<p>The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn't have imagined something like <a href="http://rigsomelight.com">Bruce Hauman</a>'s <a href="http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html">Flappy Bird ClojureScript port</a>, whose interactive programming has been made possible through React:</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<p>And don't forget <a href="https://github.com/petehunt">Pete Hunt</a>'s Wolfenstein 3D rendering engine in React (<a href="https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183">source code</a>). While it's nearly a year old, it's still a nice demo.</p>
|
||||
|
||||
<p><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/react/img/blog/wolfenstein_react.png" alt=""></a></p>
|
||||
|
||||
<p>Give us a shoutout on IRC or <a href="https://groups.google.com/forum/#!forum/reactjs">React Google Groups</a> if you've used React in some Interesting places.</p>
|
||||
<h2><a class="anchor" name="even-more-people-using-react"></a>Even More People Using React <a class="hash-link" href="#even-more-people-using-react">#</a></h2><h3><a class="anchor" name="prismatic"></a>Prismatic <a class="hash-link" href="#prismatic">#</a></h3>
|
||||
<p><a href="http://getprismatic.com/home">Prismatic</a> recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, <a href="https://github.com/swannodette/om">Om</a>. They detailed their very positive experience <a href="http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/">here</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="adobe-brackets"></a>Adobe Brackets <a class="hash-link" href="#adobe-brackets">#</a></h3>
|
||||
<p><a href="http://www.kevindangoor.com">Kevin Dangoor</a> works on <a href="http://brackets.io/?lang=en">Brackets</a>, the open-source code editor. After writing <a href="http://www.kevindangoor.com/2014/05/simplifying-code-with-react/">his first impression on React</a>, he followed up with another insightful <a href="http://www.kevindangoor.com/2014/05/react-in-brackets/">article</a> on how to gradually make the code transition, how to preserve the editor's good parts, and how to tune Brackets' tooling around JSX.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="storehouse"></a>Storehouse <a class="hash-link" href="#storehouse">#</a></h3>
|
||||
<p><a href="https://www.storehouse.co">Storehouse</a> (Apple Design Award 2014)'s web presence is build with React. Here's <a href="https://www.storehouse.co/stories/y2ad-mexico-city-clouds">an example story</a>. Congratulations on the award!</p>
|
||||
<h3><a class="anchor" name="vim-awesome"></a>Vim Awesome <a class="hash-link" href="#vim-awesome">#</a></h3>
|
||||
<p><a href="http://vimawesome.com">Vim Awesome</a>, an open-source Vim plugins directory built on React, was just launched. Be sure to <a href="https://github.com/divad12/vim-awesome">check out the source code</a> if you're curious to see an example of how to build a small single-page React app.</p>
|
||||
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Spent 12 hours so far with <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we've been doing JS frameworks wrong until now. React makes me happy.</p>— Paul Irwin (@paulirwin) <a href="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+53
-76
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,57 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/06/27/community-roundup-19.html">Community Round-up #19</a></h1>
|
||||
<p class="meta">June 27, 2014 by Cheng Lou</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<h2><a class="anchor" name="react-meetups"></a>React Meetups! <a class="hash-link" href="#react-meetups">#</a></h2>
|
||||
<p>Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in <a href="http://www.meetup.com/ReactJS-San-Francisco/">San Francisco</a> (courtesy of <a href="http://www.telmate.com">Telmate</a>), and one in <a href="http://www.meetup.com/London-React-User-Group/">London</a> (courtesy of <a href="http://www.meetup.com/London-React-User-Group/members/105837542/">Stuart Harris</a>, <a href="http://www.meetup.com/London-React-User-Group/members/15509971/">Cain Ullah</a> and <a href="http://www.meetup.com/London-React-User-Group/members/137058242/">Zoe Merchant</a>). These two events have been big successes; a second one in London is <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">already planned</a>.</p>
|
||||
|
||||
<p>If you don't live near San Francisco or London, why not start one in your community?</p>
|
||||
<h2><a class="anchor" name="complementary-tools"></a>Complementary Tools <a class="hash-link" href="#complementary-tools">#</a></h2>
|
||||
<p>In case you haven't seen it, we've consolidated the tooling solution around React on <a href="https://github.com/facebook/react/wiki/Complementary-Tools">this wiki page</a>. Some of the notable recent entries include:</p>
|
||||
|
||||
<ul>
|
||||
<li><p><a href="https://github.com/rpflorence">Ryan Florence</a> and <a href="https://github.com/mjackson">Michael Jackson</a>'s <a href="https://github.com/rpflorence/react-nested-router">react-nested-router</a>, which is a translation of the Ember router API to React.</p></li>
|
||||
<li><p><a href="https://github.com/stevoland">Stephen J. Collings</a>'s <a href="https://github.com/react-bootstrap/react-bootstrap">react-bootstrap</a>, which wraps the popular framework with a bit of React goodness. The <a href="http://react-bootstrap.github.io/components.html">website</a> features live-editable demos.</p></li>
|
||||
<li><p><a href="https://github.com/andreypopp">Andrey Popp</a>'s <a href="https://github.com/andreypopp/react-quickstart">react-quickstart</a>, which gives you a quick template for server-side rendering and routing, among other features.</p></li>
|
||||
</ul>
|
||||
|
||||
<p>These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!</p>
|
||||
<h2><a class="anchor" name="react-in-interesting-places"></a>React in Interesting Places <a class="hash-link" href="#react-in-interesting-places">#</a></h2>
|
||||
<p>The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn't have imagined something like <a href="http://rigsomelight.com">Bruce Hauman</a>'s <a href="http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html">Flappy Bird ClojureScript port</a>, whose interactive programming has been made possible through React:</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<p>And don't forget <a href="https://github.com/petehunt">Pete Hunt</a>'s Wolfenstein 3D rendering engine in React (<a href="https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183">source code</a>). While it's nearly a year old, it's still a nice demo.</p>
|
||||
|
||||
<p><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/react/img/blog/wolfenstein_react.png" alt=""></a></p>
|
||||
|
||||
<p>Give us a shoutout on IRC or <a href="https://groups.google.com/forum/#!forum/reactjs">React Google Groups</a> if you've used React in some Interesting places.</p>
|
||||
<h2><a class="anchor" name="even-more-people-using-react"></a>Even More People Using React <a class="hash-link" href="#even-more-people-using-react">#</a></h2><h3><a class="anchor" name="prismatic"></a>Prismatic <a class="hash-link" href="#prismatic">#</a></h3>
|
||||
<p><a href="http://getprismatic.com/home">Prismatic</a> recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, <a href="https://github.com/swannodette/om">Om</a>. They detailed their very positive experience <a href="http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/">here</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="adobe-brackets"></a>Adobe Brackets <a class="hash-link" href="#adobe-brackets">#</a></h3>
|
||||
<p><a href="http://www.kevindangoor.com">Kevin Dangoor</a> works on <a href="http://brackets.io/?lang=en">Brackets</a>, the open-source code editor. After writing <a href="http://www.kevindangoor.com/2014/05/simplifying-code-with-react/">his first impression on React</a>, he followed up with another insightful <a href="http://www.kevindangoor.com/2014/05/react-in-brackets/">article</a> on how to gradually make the code transition, how to preserve the editor's good parts, and how to tune Brackets' tooling around JSX.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="storehouse"></a>Storehouse <a class="hash-link" href="#storehouse">#</a></h3>
|
||||
<p><a href="https://www.storehouse.co">Storehouse</a> (Apple Design Award 2014)'s web presence is build with React. Here's <a href="https://www.storehouse.co/stories/y2ad-mexico-city-clouds">an example story</a>. Congratulations on the award!</p>
|
||||
<h3><a class="anchor" name="vim-awesome"></a>Vim Awesome <a class="hash-link" href="#vim-awesome">#</a></h3>
|
||||
<p><a href="http://vimawesome.com">Vim Awesome</a>, an open-source Vim plugins directory built on React, was just launched. Be sure to <a href="https://github.com/divad12/vim-awesome">check out the source code</a> if you're curious to see an example of how to build a small single-page React app.</p>
|
||||
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Spent 12 hours so far with <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we've been doing JS frameworks wrong until now. React makes me happy.</p>— Paul Irwin (@paulirwin) <a href="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/05/29/one-year-of-open-source-react.html">One Year of Open-Source React</a></h1>
|
||||
<p class="meta">May 29, 2014 by Cheng Lou</p>
|
||||
@@ -206,80 +257,6 @@ report bugs <a href="https://github.com/reactjs/React.NET">on GitHub</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></h1>
|
||||
<p class="meta">March 21, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Hot on the heels of the <a href="/react/blog/2014/03/19/react-v0.10-rc1.html">release candidate earlier this week</a>, we're ready to call v0.10 done. The only major issue we discovered had to do with the <code>react-tools</code> package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.</p>
|
||||
|
||||
<p>The release is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.10.0.js">http://fb.me/react-0.10.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.10.0.min.js">http://fb.me/react-0.10.0.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0.js">http://fb.me/react-with-addons-0.10.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0.min.js">http://fb.me/react-with-addons-0.10.0.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.10.0.js">http://fb.me/JSXTransformer-0.10.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.10.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h2><a class="anchor" name="clone-on-mount"></a>Clone On Mount <a class="hash-link" href="#clone-on-mount">#</a></h2>
|
||||
<p>The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (<code>React.DOM.div()</code>, <code>MyComponent()</code>) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.</p>
|
||||
|
||||
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
|
||||
|
||||
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
|
||||
<span class="c1">// "descriptor", not necessarily the mounted instance.</span>
|
||||
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
|
||||
|
||||
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
|
||||
<span class="c1">// the mounted instance.</span>
|
||||
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">)</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
|
||||
</code></pre></div>
|
||||
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
|
||||
|
||||
<p>The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Added warnings to help migrate towards descriptors</li>
|
||||
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>srcSet</code> for <code><img></code> to specify images at different pixel ratios</li>
|
||||
<li><code>textAnchor</code> for SVG</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
|
||||
<li>Ensure <code>className={false}</code> behaves consistently</li>
|
||||
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+76
-128
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,80 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></h1>
|
||||
<p class="meta">March 21, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Hot on the heels of the <a href="/react/blog/2014/03/19/react-v0.10-rc1.html">release candidate earlier this week</a>, we're ready to call v0.10 done. The only major issue we discovered had to do with the <code>react-tools</code> package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.</p>
|
||||
|
||||
<p>The release is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.10.0.js">http://fb.me/react-0.10.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.10.0.min.js">http://fb.me/react-0.10.0.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0.js">http://fb.me/react-with-addons-0.10.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0.min.js">http://fb.me/react-with-addons-0.10.0.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.10.0.js">http://fb.me/JSXTransformer-0.10.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.10.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h2><a class="anchor" name="clone-on-mount"></a>Clone On Mount <a class="hash-link" href="#clone-on-mount">#</a></h2>
|
||||
<p>The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (<code>React.DOM.div()</code>, <code>MyComponent()</code>) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.</p>
|
||||
|
||||
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
|
||||
|
||||
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
|
||||
<span class="c1">// "descriptor", not necessarily the mounted instance.</span>
|
||||
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
|
||||
|
||||
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
|
||||
<span class="c1">// the mounted instance.</span>
|
||||
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">)</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
|
||||
</code></pre></div>
|
||||
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
|
||||
|
||||
<p>The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Added warnings to help migrate towards descriptors</li>
|
||||
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>srcSet</code> for <code><img></code> to specify images at different pixel ratios</li>
|
||||
<li><code>textAnchor</code> for SVG</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
|
||||
<li>Ensure <code>className={false}</code> behaves consistently</li>
|
||||
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></h1>
|
||||
<p class="meta">March 19, 2014 by Paul O’Shannessy</p>
|
||||
@@ -437,132 +511,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></h1>
|
||||
<p class="meta">February 16, 2014 by Ben Alpert</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.</p>
|
||||
|
||||
<p>The release candidate is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.9.0-rc1.js">http://fb.me/react-0.9.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.9.0-rc1.min.js">http://fb.me/react-0.9.0-rc1.min.js</a></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0-rc1.js">http://fb.me/react-with-addons-0.9.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1.min.js">http://fb.me/react-with-addons-0.9.0-rc1.min.js</a></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.9.0-rc1.js">http://fb.me/JSXTransformer-0.9.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.9.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h2><a class="anchor" name="upgrade-notes"></a>Upgrade Notes <a class="hash-link" href="#upgrade-notes">#</a></h2>
|
||||
<p>In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div></span>
|
||||
Monkeys:
|
||||
{listOfMonkeys} {submitButton}
|
||||
<span class="nt"></div></span>
|
||||
</code></pre></div>
|
||||
<p>In v0.8 and below, it was transformed to the following:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="s2">" Monkeys: "</span><span class="p">,</span>
|
||||
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>In v0.9, it will be transformed to this JS instead:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="hll"> <span class="s2">"Monkeys:"</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">" "</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
|
||||
|
||||
<p>In cases where you want to preserve the space adjacent to a newline, you can write a JS string like <code>{"Monkeys: "}</code> in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
|
||||
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
|
||||
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
|
||||
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
|
||||
<li>Full-page rendering (that is, rendering the <code><html></code> tag using React) is now supported only when starting with server-rendered markup</li>
|
||||
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
|
||||
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)</li>
|
||||
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
|
||||
<li><code>this.context</code> on components is now reserved for internal use by React</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly</li>
|
||||
<li>Added a new tool for profiling React components and identifying places where defining <code>shouldComponentUpdate</code> can give performance improvements</li>
|
||||
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
|
||||
<li><code>property</code> for Open Graph <code><meta></code> tags</li>
|
||||
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code><iframe></code> tags</li>
|
||||
<li><code>scope</code> for screen readers</li>
|
||||
<li><code>span</code> for <code><colgroup></code> tags</li>
|
||||
</ul></li>
|
||||
<li>Added support for defining <code>propTypes</code> in mixins</li>
|
||||
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
|
||||
<li>Added support for <code>statics</code> on component spec for static component methods</li>
|
||||
<li>On all events, <code>.currentTarget</code> is now properly set</li>
|
||||
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
|
||||
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
|
||||
<li>On drag events, <code>.dataTransfer</code> is now present</li>
|
||||
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
|
||||
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code><img></code> elements</li>
|
||||
<li>Added support for <code>onReset</code> on <code><form></code> elements</li>
|
||||
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>React no longer adds an <code>__owner__</code> property to each component's <code>props</code> object; passed-in props are now never mutated</li>
|
||||
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
|
||||
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
|
||||
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
|
||||
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
|
||||
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
|
||||
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
|
||||
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
|
||||
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
|
||||
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
|
||||
<li><code>key</code> values containing <code>.</code> are now supported</li>
|
||||
<li>Shortened <code>data-reactid</code> values for performance</li>
|
||||
<li>Components now always remount when the <code>key</code> property changes</li>
|
||||
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
|
||||
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
|
||||
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
|
||||
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
|
||||
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
|
||||
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
|
||||
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
|
||||
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
|
||||
<li>Performance optimizations for CSSTransitionGroup</li>
|
||||
<li>On checkbox <code><input></code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
|
||||
<ul>
|
||||
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
|
||||
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
|
||||
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
|
||||
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
|
||||
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
|
||||
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+128
-99
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,132 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></h1>
|
||||
<p class="meta">February 16, 2014 by Ben Alpert</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.</p>
|
||||
|
||||
<p>The release candidate is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.9.0-rc1.js">http://fb.me/react-0.9.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.9.0-rc1.min.js">http://fb.me/react-0.9.0-rc1.min.js</a></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0-rc1.js">http://fb.me/react-with-addons-0.9.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1.min.js">http://fb.me/react-with-addons-0.9.0-rc1.min.js</a></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.9.0-rc1.js">http://fb.me/JSXTransformer-0.9.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.9.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h2><a class="anchor" name="upgrade-notes"></a>Upgrade Notes <a class="hash-link" href="#upgrade-notes">#</a></h2>
|
||||
<p>In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div></span>
|
||||
Monkeys:
|
||||
{listOfMonkeys} {submitButton}
|
||||
<span class="nt"></div></span>
|
||||
</code></pre></div>
|
||||
<p>In v0.8 and below, it was transformed to the following:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="s2">" Monkeys: "</span><span class="p">,</span>
|
||||
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>In v0.9, it will be transformed to this JS instead:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="hll"> <span class="s2">"Monkeys:"</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">" "</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
|
||||
|
||||
<p>In cases where you want to preserve the space adjacent to a newline, you can write a JS string like <code>{"Monkeys: "}</code> in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
|
||||
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
|
||||
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
|
||||
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
|
||||
<li>Full-page rendering (that is, rendering the <code><html></code> tag using React) is now supported only when starting with server-rendered markup</li>
|
||||
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
|
||||
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)</li>
|
||||
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
|
||||
<li><code>this.context</code> on components is now reserved for internal use by React</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly</li>
|
||||
<li>Added a new tool for profiling React components and identifying places where defining <code>shouldComponentUpdate</code> can give performance improvements</li>
|
||||
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
|
||||
<li><code>property</code> for Open Graph <code><meta></code> tags</li>
|
||||
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code><iframe></code> tags</li>
|
||||
<li><code>scope</code> for screen readers</li>
|
||||
<li><code>span</code> for <code><colgroup></code> tags</li>
|
||||
</ul></li>
|
||||
<li>Added support for defining <code>propTypes</code> in mixins</li>
|
||||
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
|
||||
<li>Added support for <code>statics</code> on component spec for static component methods</li>
|
||||
<li>On all events, <code>.currentTarget</code> is now properly set</li>
|
||||
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
|
||||
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
|
||||
<li>On drag events, <code>.dataTransfer</code> is now present</li>
|
||||
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
|
||||
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code><img></code> elements</li>
|
||||
<li>Added support for <code>onReset</code> on <code><form></code> elements</li>
|
||||
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>React no longer adds an <code>__owner__</code> property to each component's <code>props</code> object; passed-in props are now never mutated</li>
|
||||
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
|
||||
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
|
||||
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
|
||||
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
|
||||
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
|
||||
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
|
||||
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
|
||||
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
|
||||
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
|
||||
<li><code>key</code> values containing <code>.</code> are now supported</li>
|
||||
<li>Shortened <code>data-reactid</code> values for performance</li>
|
||||
<li>Components now always remount when the <code>key</code> property changes</li>
|
||||
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
|
||||
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
|
||||
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
|
||||
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
|
||||
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
|
||||
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
|
||||
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
|
||||
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
|
||||
<li>Performance optimizations for CSSTransitionGroup</li>
|
||||
<li>On checkbox <code><input></code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
|
||||
<ul>
|
||||
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
|
||||
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
|
||||
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
|
||||
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
|
||||
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
|
||||
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></h1>
|
||||
<p class="meta">February 15, 2014 by Jonas Gebhardt</p>
|
||||
@@ -364,103 +490,6 @@ rails s
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></h1>
|
||||
<p class="meta">December 30, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!</p>
|
||||
<h2><a class="anchor" name="react-touch"></a>React Touch <a class="hash-link" href="#react-touch">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.</p>
|
||||
|
||||
<figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
|
||||
|
||||
<p><a href="http://petehunt.github.io/react-touch/">Try out the demos!</a></p>
|
||||
<h2><a class="anchor" name="introduction-to-react"></a>Introduction to React <a class="hash-link" href="#introduction-to-react">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.</p>
|
||||
|
||||
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="jsx-e4x-the-good-parts"></a>JSX: E4X The Good Parts <a class="hash-link" href="#jsx-e4x-the-good-parts">#</a></h2>
|
||||
<p>JSX is often compared to the now defunct E4X, <a href="http://blog.vjeux.com/">Vjeux</a> went over all the E4X features and explained how JSX is different and hopefully doesn't repeat the same mistakes.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I'm going to go over all the features of E4X and explain the design decisions behind JSX.</p>
|
||||
|
||||
<p><strong>Historical Context</strong></p>
|
||||
|
||||
<p>E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.</p>
|
||||
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html">Continue reading ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react--socket.io"></a>React + Socket.io <a class="hash-link" href="#react--socket.io">#</a></h2>
|
||||
<p><a href="http://enome.be/nl">Geert Pasteels</a> made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">changeHandler</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">)</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">===</span> <span class="nx">data</span><span class="p">.</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">=</span> <span class="nx">utils</span><span class="p">.</span><span class="nx">nodePath</span><span class="p">(</span><span class="nx">root</span><span class="p">);</span>
|
||||
<span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'component-change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">changeHandler</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillUpdate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="nx">state</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">socket</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">'component-change'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">path</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span><span class="p">,</span> <span class="nx">state</span><span class="o">:</span> <span class="nx">state</span> <span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">socket</span><span class="p">.</span><span class="nx">removeListener</span><span class="p">(</span><span class="s1">'component-change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">change</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/Enome/react.io">Check it out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="cssobjectify"></a>cssobjectify <a class="hash-link" href="#cssobjectify">#</a></h2>
|
||||
<p><a href="http://andreypopp.com/">Andrey Popp</a> implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/* style.css */</span>
|
||||
<span class="nx">MyComponent</span> <span class="p">{</span>
|
||||
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span><span class="o">:</span> <span class="mi">12</span><span class="nx">px</span><span class="p">;</span>
|
||||
<span class="nx">background</span><span class="o">-</span><span class="nx">color</span><span class="o">:</span> <span class="nx">red</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="cm">/* myapp.js */</span>
|
||||
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-tools/build/modules/React'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">Styles</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./styles.css'</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">Styles</span><span class="p">.</span><span class="nx">MyComponent</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/andreypopp/cssobjectify">Check it out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="ngreact"></a>ngReact <a class="hash-link" href="#ngreact">#</a></h2>
|
||||
<p><a href="http://davidandsuzi.com/">David Chang</a> working at <a href="http://www.hasoffers.com/">HasOffer</a> wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that's 67% faster). You'll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it's 433ms, which is more than half of the total time!
|
||||
<figure><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/"><img src="/react/img/blog/ngreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="vim-jsx"></a>vim-jsx <a class="hash-link" href="#vim-jsx">#</a></h2>
|
||||
<p><a href="https://github.com/mxw">Max Wang</a> made a vim syntax highlighting and indentation plugin for vim.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.</p>
|
||||
|
||||
<p>This bundle requires pangloss's <a href="https://github.com/pangloss/vim-javascript">vim-javascript</a> syntax highlighting.</p>
|
||||
|
||||
<p>Vim support for inline XML in JS is remarkably similar to the same for PHP.</p>
|
||||
|
||||
<p><a href="https://github.com/mxw/vim-jsx">View on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p><center><blockquote class="twitter-tweet" lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>— Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+99
-119
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,103 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></h1>
|
||||
<p class="meta">December 30, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!</p>
|
||||
<h2><a class="anchor" name="react-touch"></a>React Touch <a class="hash-link" href="#react-touch">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.</p>
|
||||
|
||||
<figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
|
||||
|
||||
<p><a href="http://petehunt.github.io/react-touch/">Try out the demos!</a></p>
|
||||
<h2><a class="anchor" name="introduction-to-react"></a>Introduction to React <a class="hash-link" href="#introduction-to-react">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.</p>
|
||||
|
||||
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="jsx-e4x-the-good-parts"></a>JSX: E4X The Good Parts <a class="hash-link" href="#jsx-e4x-the-good-parts">#</a></h2>
|
||||
<p>JSX is often compared to the now defunct E4X, <a href="http://blog.vjeux.com/">Vjeux</a> went over all the E4X features and explained how JSX is different and hopefully doesn't repeat the same mistakes.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I'm going to go over all the features of E4X and explain the design decisions behind JSX.</p>
|
||||
|
||||
<p><strong>Historical Context</strong></p>
|
||||
|
||||
<p>E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.</p>
|
||||
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html">Continue reading ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react--socket.io"></a>React + Socket.io <a class="hash-link" href="#react--socket.io">#</a></h2>
|
||||
<p><a href="http://enome.be/nl">Geert Pasteels</a> made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">changeHandler</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">)</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">===</span> <span class="nx">data</span><span class="p">.</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">=</span> <span class="nx">utils</span><span class="p">.</span><span class="nx">nodePath</span><span class="p">(</span><span class="nx">root</span><span class="p">);</span>
|
||||
<span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'component-change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">changeHandler</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillUpdate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="nx">state</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">socket</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">'component-change'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">path</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span><span class="p">,</span> <span class="nx">state</span><span class="o">:</span> <span class="nx">state</span> <span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">socket</span><span class="p">.</span><span class="nx">removeListener</span><span class="p">(</span><span class="s1">'component-change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">change</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/Enome/react.io">Check it out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="cssobjectify"></a>cssobjectify <a class="hash-link" href="#cssobjectify">#</a></h2>
|
||||
<p><a href="http://andreypopp.com/">Andrey Popp</a> implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/* style.css */</span>
|
||||
<span class="nx">MyComponent</span> <span class="p">{</span>
|
||||
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span><span class="o">:</span> <span class="mi">12</span><span class="nx">px</span><span class="p">;</span>
|
||||
<span class="nx">background</span><span class="o">-</span><span class="nx">color</span><span class="o">:</span> <span class="nx">red</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="cm">/* myapp.js */</span>
|
||||
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-tools/build/modules/React'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">Styles</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./styles.css'</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">Styles</span><span class="p">.</span><span class="nx">MyComponent</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/andreypopp/cssobjectify">Check it out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="ngreact"></a>ngReact <a class="hash-link" href="#ngreact">#</a></h2>
|
||||
<p><a href="http://davidandsuzi.com/">David Chang</a> working at <a href="http://www.hasoffers.com/">HasOffer</a> wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that's 67% faster). You'll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it's 433ms, which is more than half of the total time!
|
||||
<figure><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/"><img src="/react/img/blog/ngreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="vim-jsx"></a>vim-jsx <a class="hash-link" href="#vim-jsx">#</a></h2>
|
||||
<p><a href="https://github.com/mxw">Max Wang</a> made a vim syntax highlighting and indentation plugin for vim.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.</p>
|
||||
|
||||
<p>This bundle requires pangloss's <a href="https://github.com/pangloss/vim-javascript">vim-javascript</a> syntax highlighting.</p>
|
||||
|
||||
<p>Vim support for inline XML in JS is remarkably similar to the same for PHP.</p>
|
||||
|
||||
<p><a href="https://github.com/mxw/vim-jsx">View on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p><center><blockquote class="twitter-tweet" lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>— Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></h1>
|
||||
<p class="meta">December 23, 2013 by Vjeux</p>
|
||||
@@ -320,123 +417,6 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></h1>
|
||||
<p class="meta">November 6, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.</p>
|
||||
|
||||
<p>The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.</p>
|
||||
<h2><a class="anchor" name="khan-academy---officially-moving-to-react"></a>Khan Academy - Officially moving to React <a class="hash-link" href="#khan-academy---officially-moving-to-react">#</a></h2>
|
||||
<p><a href="http://joelburget.com/">Joel Burget</a> announced at Hack Reactor that new front-end code at Khan Academy should be written in React!</p>
|
||||
|
||||
<blockquote>
|
||||
<p>How did we get the rest of the team to adopt React? Using interns as an attack vector! Most full-time devs had already been working on their existing projects for a while and weren't looking to try something new at the time, but our class of summer interns was just arriving. For whatever reason, a lot of them decided to try React for their projects. Then mentors became exposed through code reviews or otherwise touching the new code. In this way React knowledge diffused to almost the whole team over the summer.</p>
|
||||
|
||||
<p>Since the first React checkin on June 5, we've somehow managed to accumulate 23500 lines of jsx (React-flavored js) code. Which is terrifying in a way - that's a lot of code - but also really exciting that it was picked up so quickly.</p>
|
||||
|
||||
<p>We held three meetings about how we should proceed with React. At the first two we decided to continue experimenting with React and deferred a final decision on whether to adopt it. At the third we adopted the policy that new code should be written in React.</p>
|
||||
|
||||
<p>I'm excited that we were able to start nudging code quality forward. However, we still have a lot of work to do! One of the selling points of this transition is adopting a uniform frontend style. We're trying to upgrade all the code from (really old) pure jQuery and (regular old) Backbone views / Handlebars to shiny React. At the moment all we've done is introduce more fragmentation. We won't be gratuitously updating working code (if it ain't broke, don't fix it), but are seeking out parts of the codebase where we can shoot two birds with one stone by rewriting in React while fixing bugs or adding functionality.</p>
|
||||
|
||||
<p><a href="http://joelburget.com/backbone-to-react/">Read the full article</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-rethinking-best-practices"></a>React: Rethinking best practices <a class="hash-link" href="#react-rethinking-best-practices">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a>'s talk at JSConf EU 2013 is now available in video.</p>
|
||||
|
||||
<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="server-side-react-with-php"></a>Server-side React with PHP <a class="hash-link" href="#server-side-react-with-php">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a>'s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This post is an initial hack to have React components render server-side in PHP.</p>
|
||||
|
||||
<ul>
|
||||
<li>Problem: Build web UIs</li>
|
||||
<li>Solution: React</li>
|
||||
<li>Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)</li>
|
||||
<li>Solution: <a href="https://github.com/facebook/react-page">React page</a> to render the first view</li>
|
||||
<li>Problem: Can't host node.js apps / I have tons of PHP code</li>
|
||||
<li>Solution: Use PHP then!</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="http://www.phpied.com/server-side-react-with-php/"><strong>Read part 1 ...</strong></a></p>
|
||||
|
||||
<p><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><strong>Read part 2 ...</strong></a></p>
|
||||
|
||||
<p>Rendered markup on the server:
|
||||
<figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="/react/img/blog/react-php.png" alt=""></a></figure></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="todomvc-benchmarks"></a>TodoMVC Benchmarks <a class="hash-link" href="#todomvc-benchmarks">#</a></h2>
|
||||
<p>Webkit has a <a href="https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench">TodoMVC Benchmark</a> that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>AngularJS:</strong> 4043ms</li>
|
||||
<li><strong>AngularJSPerf:</strong> 3227ms</li>
|
||||
<li><strong>BackboneJS:</strong> 1874ms</li>
|
||||
<li><strong>EmberJS:</strong> 6822ms</li>
|
||||
<li><strong>jQuery:</strong> 14628ms</li>
|
||||
<li><strong>React:</strong> 2864ms</li>
|
||||
<li><strong>VanillaJS:</strong> 5567ms</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="http://www.petehunt.net/react/tastejs/benchmark.html">Try it yourself!</a></p>
|
||||
|
||||
<p>Please don't take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn't written with performance in mind.</p>
|
||||
|
||||
<p>Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/**</span>
|
||||
<span class="cm"> * This is a completely optional performance enhancement that you can implement</span>
|
||||
<span class="cm"> * on any React component. If you were to delete this method the app would still</span>
|
||||
<span class="cm"> * work correctly (and still be very performant!), we just use it as an example</span>
|
||||
<span class="cm"> * of how little code it takes to get an order of magnitude performance improvement.</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">todo</span><span class="p">.</span><span class="nx">id</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">todo</span><span class="p">.</span><span class="nx">id</span> <span class="o">||</span>
|
||||
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">todo</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">todo</span> <span class="o">||</span>
|
||||
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">editing</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">editing</span> <span class="o">||</span>
|
||||
<span class="nx">nextState</span><span class="p">.</span><span class="nx">editText</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">editText</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>By default, React "re-renders" all the components when anything changes. This is usually fast enough that you don't need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.</p>
|
||||
|
||||
<p>The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.</p>
|
||||
<h2><a class="anchor" name="guess-the-filter"></a>Guess the filter <a class="hash-link" href="#guess-the-filter">#</a></h2>
|
||||
<p><a href="http://conr.me">Connor McSheffrey</a> implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
|
||||
<figure><a href="http://guessthefilter.com/"><img src="/react/img/blog/guess_filter.jpg" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="react-vs-fruitmachine"></a>React vs FruitMachine <a class="hash-link" href="#react-vs-fruitmachine">#</a></h2>
|
||||
<p><a href="http://trib.tv/">Andrew Betts</a>, director of the <a href="http://labs.ft.com/">Financial Times Labs</a>, posted an article comparing <a href="https://github.com/ftlabs/fruitmachine">FruitMachine</a> and React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Eerily similar, no? Maybe Facebook was inspired by Fruit Machine (after all, we got there first), but more likely, it just shows that this is a pretty decent way to solve the problem, and great minds think alike. We're graduating to a third phase in the evolution of web best practice - from intermingling of markup, style and behaviour, through a phase in which those concerns became ever more separated and encapsulated, and finally to a model where we can do that separation at a component level. Developments like Web Components show the direction the web community is moving, and frameworks like React and Fruit Machine are in fact not a lot more than polyfills for that promised behaviour to come.</p>
|
||||
|
||||
<p><a href="http://labs.ft.com/2013/10/client-side-layout-engines-react-vs-fruitmachine/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.</p>
|
||||
<h2><a class="anchor" name="react-brunch"></a>React Brunch <a class="hash-link" href="#react-brunch">#</a></h2>
|
||||
<p><a href="http://elucidata.net/">Matthew McCray</a> implemented <a href="https://npmjs.org/package/react-brunch">react-brunch</a>, a JSX compilation step for <a href="http://brunch.io/">Brunch</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Adds React support to brunch by automatically compiling <code>*.jsx</code> files.</p>
|
||||
|
||||
<p>You can configure react-brunch to automatically insert a react header (<code>/** @jsx React.DOM */</code>) into all <code>*.jsx</code> files. Disabled by default.</p>
|
||||
|
||||
<p>Install the plugin via npm with <code>npm install --save react-brunch</code>.</p>
|
||||
|
||||
<p><a href="https://npmjs.org/package/react-brunch">Read more...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p>I'm going to start adding a tweet at the end of each round-up. We'll start with this one:</p>
|
||||
|
||||
<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&src=hash">#reactjs</a></p>— Eldar Djafarov ッ (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+119
-64
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,123 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></h1>
|
||||
<p class="meta">November 6, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.</p>
|
||||
|
||||
<p>The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.</p>
|
||||
<h2><a class="anchor" name="khan-academy---officially-moving-to-react"></a>Khan Academy - Officially moving to React <a class="hash-link" href="#khan-academy---officially-moving-to-react">#</a></h2>
|
||||
<p><a href="http://joelburget.com/">Joel Burget</a> announced at Hack Reactor that new front-end code at Khan Academy should be written in React!</p>
|
||||
|
||||
<blockquote>
|
||||
<p>How did we get the rest of the team to adopt React? Using interns as an attack vector! Most full-time devs had already been working on their existing projects for a while and weren't looking to try something new at the time, but our class of summer interns was just arriving. For whatever reason, a lot of them decided to try React for their projects. Then mentors became exposed through code reviews or otherwise touching the new code. In this way React knowledge diffused to almost the whole team over the summer.</p>
|
||||
|
||||
<p>Since the first React checkin on June 5, we've somehow managed to accumulate 23500 lines of jsx (React-flavored js) code. Which is terrifying in a way - that's a lot of code - but also really exciting that it was picked up so quickly.</p>
|
||||
|
||||
<p>We held three meetings about how we should proceed with React. At the first two we decided to continue experimenting with React and deferred a final decision on whether to adopt it. At the third we adopted the policy that new code should be written in React.</p>
|
||||
|
||||
<p>I'm excited that we were able to start nudging code quality forward. However, we still have a lot of work to do! One of the selling points of this transition is adopting a uniform frontend style. We're trying to upgrade all the code from (really old) pure jQuery and (regular old) Backbone views / Handlebars to shiny React. At the moment all we've done is introduce more fragmentation. We won't be gratuitously updating working code (if it ain't broke, don't fix it), but are seeking out parts of the codebase where we can shoot two birds with one stone by rewriting in React while fixing bugs or adding functionality.</p>
|
||||
|
||||
<p><a href="http://joelburget.com/backbone-to-react/">Read the full article</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-rethinking-best-practices"></a>React: Rethinking best practices <a class="hash-link" href="#react-rethinking-best-practices">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a>'s talk at JSConf EU 2013 is now available in video.</p>
|
||||
|
||||
<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="server-side-react-with-php"></a>Server-side React with PHP <a class="hash-link" href="#server-side-react-with-php">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a>'s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This post is an initial hack to have React components render server-side in PHP.</p>
|
||||
|
||||
<ul>
|
||||
<li>Problem: Build web UIs</li>
|
||||
<li>Solution: React</li>
|
||||
<li>Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)</li>
|
||||
<li>Solution: <a href="https://github.com/facebook/react-page">React page</a> to render the first view</li>
|
||||
<li>Problem: Can't host node.js apps / I have tons of PHP code</li>
|
||||
<li>Solution: Use PHP then!</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="http://www.phpied.com/server-side-react-with-php/"><strong>Read part 1 ...</strong></a></p>
|
||||
|
||||
<p><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><strong>Read part 2 ...</strong></a></p>
|
||||
|
||||
<p>Rendered markup on the server:
|
||||
<figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="/react/img/blog/react-php.png" alt=""></a></figure></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="todomvc-benchmarks"></a>TodoMVC Benchmarks <a class="hash-link" href="#todomvc-benchmarks">#</a></h2>
|
||||
<p>Webkit has a <a href="https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench">TodoMVC Benchmark</a> that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>AngularJS:</strong> 4043ms</li>
|
||||
<li><strong>AngularJSPerf:</strong> 3227ms</li>
|
||||
<li><strong>BackboneJS:</strong> 1874ms</li>
|
||||
<li><strong>EmberJS:</strong> 6822ms</li>
|
||||
<li><strong>jQuery:</strong> 14628ms</li>
|
||||
<li><strong>React:</strong> 2864ms</li>
|
||||
<li><strong>VanillaJS:</strong> 5567ms</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="http://www.petehunt.net/react/tastejs/benchmark.html">Try it yourself!</a></p>
|
||||
|
||||
<p>Please don't take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn't written with performance in mind.</p>
|
||||
|
||||
<p>Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/**</span>
|
||||
<span class="cm"> * This is a completely optional performance enhancement that you can implement</span>
|
||||
<span class="cm"> * on any React component. If you were to delete this method the app would still</span>
|
||||
<span class="cm"> * work correctly (and still be very performant!), we just use it as an example</span>
|
||||
<span class="cm"> * of how little code it takes to get an order of magnitude performance improvement.</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">todo</span><span class="p">.</span><span class="nx">id</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">todo</span><span class="p">.</span><span class="nx">id</span> <span class="o">||</span>
|
||||
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">todo</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">todo</span> <span class="o">||</span>
|
||||
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">editing</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">editing</span> <span class="o">||</span>
|
||||
<span class="nx">nextState</span><span class="p">.</span><span class="nx">editText</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">editText</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>By default, React "re-renders" all the components when anything changes. This is usually fast enough that you don't need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.</p>
|
||||
|
||||
<p>The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.</p>
|
||||
<h2><a class="anchor" name="guess-the-filter"></a>Guess the filter <a class="hash-link" href="#guess-the-filter">#</a></h2>
|
||||
<p><a href="http://conr.me">Connor McSheffrey</a> implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
|
||||
<figure><a href="http://guessthefilter.com/"><img src="/react/img/blog/guess_filter.jpg" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="react-vs-fruitmachine"></a>React vs FruitMachine <a class="hash-link" href="#react-vs-fruitmachine">#</a></h2>
|
||||
<p><a href="http://trib.tv/">Andrew Betts</a>, director of the <a href="http://labs.ft.com/">Financial Times Labs</a>, posted an article comparing <a href="https://github.com/ftlabs/fruitmachine">FruitMachine</a> and React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Eerily similar, no? Maybe Facebook was inspired by Fruit Machine (after all, we got there first), but more likely, it just shows that this is a pretty decent way to solve the problem, and great minds think alike. We're graduating to a third phase in the evolution of web best practice - from intermingling of markup, style and behaviour, through a phase in which those concerns became ever more separated and encapsulated, and finally to a model where we can do that separation at a component level. Developments like Web Components show the direction the web community is moving, and frameworks like React and Fruit Machine are in fact not a lot more than polyfills for that promised behaviour to come.</p>
|
||||
|
||||
<p><a href="http://labs.ft.com/2013/10/client-side-layout-engines-react-vs-fruitmachine/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.</p>
|
||||
<h2><a class="anchor" name="react-brunch"></a>React Brunch <a class="hash-link" href="#react-brunch">#</a></h2>
|
||||
<p><a href="http://elucidata.net/">Matthew McCray</a> implemented <a href="https://npmjs.org/package/react-brunch">react-brunch</a>, a JSX compilation step for <a href="http://brunch.io/">Brunch</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Adds React support to brunch by automatically compiling <code>*.jsx</code> files.</p>
|
||||
|
||||
<p>You can configure react-brunch to automatically insert a react header (<code>/** @jsx React.DOM */</code>) into all <code>*.jsx</code> files. Disabled by default.</p>
|
||||
|
||||
<p>Install the plugin via npm with <code>npm install --save react-brunch</code>.</p>
|
||||
|
||||
<p><a href="https://npmjs.org/package/react-brunch">Read more...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p>I'm going to start adding a tweet at the end of each round-up. We'll start with this one:</p>
|
||||
|
||||
<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&src=hash">#reactjs</a></p>— Eldar Djafarov ッ (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></h1>
|
||||
<p class="meta">November 5, 2013 by Pete Hunt</p>
|
||||
@@ -394,68 +511,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></h1>
|
||||
<p class="meta">September 24, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>A lot has happened in the month since our last update. Here are some of the more interesting things we've found. But first, we have a couple updates before we share links.</p>
|
||||
|
||||
<p>First, we are organizing a <a href="http://reactjshack-a-thon.splashthat.com/">React Hackathon</a> in Facebook's Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!</p>
|
||||
|
||||
<p>We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on <a href="http://stackoverflow.com/questions/tagged/reactjs">StackOverflow</a> using the tag <a href="http://stackoverflow.com/questions/tagged/reactjs">[reactjs]</a>. Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.</p>
|
||||
<h2><a class="anchor" name="javascript-jabber"></a>Javascript Jabber <a class="hash-link" href="#javascript-jabber">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="https://github.com/jordwalke">Jordan Walke</a> were interviewed on <a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Javascript Jabber</a> for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><strong>PETE:</strong> So React was designed all around that. Conceptually, how you build a React app is that every time your data changes, it's like hitting the refresh button in a server-rendered app. What we do is we conceptually throw out all of the markup and event handlers that you've registered and we reset the whole page and then we redraw the entire page. If you're writing a server-rendered app, handling updates is really easy because you hit the refresh button and you're pretty much guaranteed to get what you expect.</p>
|
||||
|
||||
<p><strong>MERRICK:</strong> That's true. You don't get into these odd states.</p>
|
||||
|
||||
<p><strong>PETE:</strong> Exactly, exactly. In order to implement that, we communicate it as a fake DOM. What we'll do is rather than throw out the actual browser html and event handlers, we have an internal representation of what the page looks like and then we generate a brand new representation of what we want the page to look like. Then we perform this really, really fast diffing algorithm between those two page representations, DOM representations. Then React will compute the minimum set of DOM mutations it needs to make to bring the page up to date.</p>
|
||||
|
||||
<p>Then to finally get to answer your question, that set of DOM mutations then goes into a queue and we can plug in arbitrary flushing strategies for that. For example, when we originally launched React in open source, every setState would immediately trigger a flush to the DOM. That wasn't part of the contract of setState, but that was just our strategy and it worked pretty well. Then this totally awesome open source contributor Ben Alpert at Khan Academy built a new batching strategy which would basically queue up every single DOM update and state change that happened within an event tick and would execute them in bulk at the end of the event tick.</p>
|
||||
|
||||
<p><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Read the full conversation ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsxtransformer-trick"></a>JSXTransformer Trick <a class="hash-link" href="#jsxtransformer-trick">#</a></h2>
|
||||
<p>While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.</p>
|
||||
|
||||
<div style="margin-left: 74px;"><blockquote class="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform("/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */" + element.innerHTML).code</p>— Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
<h2><a class="anchor" name="remarkable-react"></a>Remarkable React <a class="hash-link" href="#remarkable-react">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> gave a talk at <a href="http://braziljs.com.br/">BrazilJS</a> about React and wrote an article with the content of the presentation. He goes through the difficulties of writting <em>active apps</em> using the DOM API and shows how React handles it.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.</p>
|
||||
|
||||
<p>You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And "virtual DOM" is a very big name for what is simply a JavaScript object with nested key-value pairs)</p>
|
||||
|
||||
<p>Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it's necessary. And does it all at once, in most cases in a single tick of the <code>requestAnimationFrame()</code>.</p>
|
||||
|
||||
<p>What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.</p>
|
||||
|
||||
<p>The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example <code>e.target</code> works, no need to look for the event object or checking whether it's <code>e.target</code> or <code>e.srcElement</code> (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event <code><input onChange></code> fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that "thou shall use event delegation" is also commonly given advice for making web apps snappy.</p>
|
||||
|
||||
<p>The good thing about the virtual DOM is that it's all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.</p>
|
||||
|
||||
<p><a href="http://www.phpied.com/remarkable-react/">Read More ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="markdown-in-react"></a>Markdown in React <a class="hash-link" href="#markdown-in-react">#</a></h2>
|
||||
<p><a href="http://benalpert.com/">Ben Alpert</a> converted <a href="https://github.com/chjj/marked">marked</a>, a Markdown Javascript implementation, in React: <a href="https://github.com/spicyj/marked-react">marked-react</a>. Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to <code>escape</code> will not introduce an XSS vulnerability.
|
||||
<figure><a href="https://github.com/spicyj/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="/react/img/blog/markdown_refactor.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="unite-from-bugbusters"></a>Unite from BugBusters <a class="hash-link" href="#unite-from-bugbusters">#</a></h2>
|
||||
<p><a href="https://twitter.com/renajohn">Renault John Lecoultre</a> wrote <a href="https://www.bugbuster.com/">Unite</a>, an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
|
||||
<figure><a href="https://unite.bugbuster.com/"><img src="/react/img/blog/unite.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="reactjs-irc-logs"></a>#reactjs IRC Logs <a class="hash-link" href="#reactjs-irc-logs">#</a></h2>
|
||||
<p><a href="http://blog.vjeux.com/">Vjeux</a> re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
@@ -6,6 +6,128 @@
|
||||
<link>http://facebook.github.io/react</link>
|
||||
<atom:link href="http://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
<item>
|
||||
<title>React v0.13.0 Beta 1</title>
|
||||
<description><p>React 0.13 has a lot of nice features but there is one particular feature that I&#39;m really excited about. I couldn&#39;t wait for React.js Conf to start tomorrow morning.</p>
|
||||
|
||||
<p>Maybe you&#39;re like me and staying up late excited about the conference, or maybe you weren&#39;t one of the lucky ones to get a ticket. Either way I figured I&#39;d give you all something to play with until then.</p>
|
||||
|
||||
<p>We just published a beta version of React v0.13.0 to <a href="https://www.npmjs.com/package/react">npm</a>! You can install it with <code>npm install react@0.13.0-beta.1</code>. Since this is a pre-release, we don&#39;t have proper release notes ready.</p>
|
||||
|
||||
<p>So what is that one feature I&#39;m so excited about that I just couldn&#39;t wait to share?</p>
|
||||
<h2><a class="anchor" name="plain-javascript-classes"></a>Plain JavaScript Classes!! <a class="hash-link" href="#plain-javascript-classes">#</a></h2>
|
||||
<p>JavaScript originally didn&#39;t have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.</p>
|
||||
|
||||
<p>We figured that we&#39;re not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.</p>
|
||||
|
||||
<p>In React 0.13.0 you no longer need to use <code>React.createClass</code> to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with <code>react-tools</code> by making use of the harmony option: <code>jsx --harmony</code>.</p>
|
||||
<h3><a class="anchor" name="es6-classes"></a>ES6 Classes <a class="hash-link" href="#es6-classes">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">HelloMessage</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">HelloMessage</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;Sebastian&quot;</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>The API is mostly what you would expect, which the exception for <code>getInitialState</code>. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise <code>getDefaultProps</code> and <code>propTypes</code> are really just properties on the constructor.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o">&lt;</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">&gt;</span>
|
||||
<span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
|
||||
<span class="o">&lt;</span><span class="err">/div&gt;</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">Counter</span><span class="p">.</span><span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
|
||||
<span class="nx">Counter</span><span class="p">.</span><span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
|
||||
</code></pre></div><h3><a class="anchor" name="es7-property-initializers"></a>ES7+ Property Initializers <a class="hash-link" href="#es7-property-initializers">#</a></h3>
|
||||
<p>Wait, assigning to properties seems like a very imperative way of defining classes! You&#39;re right, however, we designed it this way because it&#39;s idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Future Version</span>
|
||||
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
|
||||
<span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
|
||||
<span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span> <span class="p">};</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o">&lt;</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">&gt;</span>
|
||||
<span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
|
||||
<span class="o">&lt;</span><span class="err">/div&gt;</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This was inspired by TypeScript&#39;s property initializers.</p>
|
||||
<h3><a class="anchor" name="autobinding"></a>Autobinding <a class="hash-link" href="#autobinding">#</a></h3>
|
||||
<p><code>React.createClass</code> has a built-in magic feature that bound all methods to <code>this</code> automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.</p>
|
||||
|
||||
<p>Therefore we decided not to have this built-in into React&#39;s class model. You can still explicitly prebind methods in your constructor if you want.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kr">super</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">tick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">tick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3><a class="anchor" name="mixins"></a>Mixins <a class="hash-link" href="#mixins">#</a></h3>
|
||||
<p>Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.</p>
|
||||
|
||||
<p>There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins was dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. Us making another standard doesn&#39;t help that effort.</p>
|
||||
|
||||
<p>Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.</p>
|
||||
|
||||
<p>Luckily, if you want to keep using mixins, you can just keep using <code>React.createClass</code>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong></p>
|
||||
|
||||
<p>The classic <code>React.createClass</code> style of creating classes will continue to work just fine.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="other-languages"></a>Other Languages! <a class="hash-link" href="#other-languages">#</a></h2>
|
||||
<p>Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.</p>
|
||||
|
||||
<p>You can also use CoffeeScript classes:</p>
|
||||
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">div = </span><span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="s">&#39;div&#39;</span><span class="p">)</span>
|
||||
|
||||
<span class="k">class</span> <span class="nx">Counter</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span>
|
||||
<span class="vi">@propTypes =</span>
|
||||
<span class="nv">initialCount: </span><span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span>
|
||||
<span class="vi">@defaultProps =</span>
|
||||
<span class="nv">initialCount: </span><span class="mi">0</span>
|
||||
<span class="nv">constructor: </span><span class="nf">-&gt;</span>
|
||||
<span class="vi">@state =</span>
|
||||
<span class="nv">count: </span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span>
|
||||
<span class="nv">tick: </span><span class="nf">=&gt;</span>
|
||||
<span class="nx">@setState</span><span class="p">(</span><span class="nv">count: </span><span class="nx">@state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-&gt;</span>
|
||||
<span class="nx">div</span><span class="p">(</span><span class="nv">onClick: </span><span class="nx">@tick</span><span class="p">,</span> <span class="s">&#39;Clicks: &#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">)</span>
|
||||
</code></pre></div></description>
|
||||
<pubDate>2015-01-27T00:00:00-08:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React.js Conf Diversity Scholarship</title>
|
||||
<description><p>Today I&#39;m really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.</p>
|
||||
@@ -726,276 +848,5 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Testing Flux Applications</title>
|
||||
<description><p><a href="http://facebook.github.io/flux/">Flux</a> is the application architecture that Facebook uses to build web applications with <a href="http://facebook.github.io/react/">React</a>. It&#39;s based on a unidirectional data flow. In previous blog posts and documentation articles, we&#39;ve shown the <a href="http://facebook.github.io/flux/docs/overview.html">basic structure and data flow</a>, more closely examined the <a href="http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html">dispatcher and action creators</a>, and shown how to put it all together with a <a href="http://facebook.github.io/flux/docs/todo-list.html">tutorial</a>. Now let&#39;s look at how to do formal unit testing of Flux applications with <a href="http://facebook.github.io/jest/">Jest</a>, Facebook&#39;s auto-mocking testing framework.</p>
|
||||
<h2><a class="anchor" name="testing-with-jest"></a>Testing with Jest <a class="hash-link" href="#testing-with-jest">#</a></h2>
|
||||
<p>For a unit test to operate on a truly isolated <em>unit</em> of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we&#39;ll return to our <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc">example TodoMVC application</a>.</p>
|
||||
|
||||
<p>The first steps toward working with Jest are as follows:</p>
|
||||
|
||||
<ol>
|
||||
<li>Get the module dependencies for the application installed by running <code>npm install</code>.</li>
|
||||
<li>Create a directory <code>__tests__/</code> with a test file, in this case TodoStore-test.js</li>
|
||||
<li>Run <code>npm install jest-cli —save-dev</code></li>
|
||||
<li>Add the following to your package.json</li>
|
||||
</ol>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="s2">&quot;scripts&quot;</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s2">&quot;test&quot;</span><span class="o">:</span> <span class="s2">&quot;jest&quot;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Now you&#39;re ready to run your tests from the command line with <code>npm test</code>.</p>
|
||||
|
||||
<p>By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest&#39;s <code>dontMock()</code> method.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">&#39;TodoStore&#39;</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.</p>
|
||||
<h2><a class="anchor" name="testing-stores"></a>Testing Stores <a class="hash-link" href="#testing-stores">#</a></h2>
|
||||
<p>At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it&#39;s not entirely obvious how to test them.</p>
|
||||
|
||||
<p>By design, stores can&#39;t be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher.</p>
|
||||
|
||||
<p>We therefore need to simulate the Flux data flow with this <em>one weird trick</em>.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">mockRegister</span> <span class="o">=</span> <span class="nx">MyDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">mockRegisterInfo</span> <span class="o">=</span> <span class="nx">mockRegister</span><span class="p">.</span><span class="nx">mock</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">callsToRegister</span> <span class="o">=</span> <span class="nx">mockRegisterInfo</span><span class="p">.</span><span class="nx">calls</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">firstCall</span> <span class="o">=</span> <span class="nx">callsToRegister</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">firstArgument</span> <span class="o">=</span> <span class="nx">firstCall</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">callback</span> <span class="o">=</span> <span class="nx">firstArgument</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>We now have the store&#39;s registered callback, the sole mechanism by which data can enter the store.</p>
|
||||
|
||||
<p>For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let&#39;s look at each part of it a bit more closely. We start out by looking at the <code>register()</code> method of our application&#39;s dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the <code>register()</code> method just as we would normally refer to that method in our production code. But we can get additional information about that method with the <code>mock</code> <em>property</em> of that method. We don&#39;t often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to <code>register()</code> is available with the <code>calls</code> property of <code>mock</code>, and each of these calls has a list of the arguments that were used in each method call.</p>
|
||||
|
||||
<p>So in this code, we are really saying, &quot;Give me a reference to the first argument of the first call to MyDispatcher&#39;s <code>register()</code> method.&quot; That first argument is the store&#39;s callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">callback</span> <span class="o">=</span> <span class="nx">MyDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
|
||||
</code></pre></div>
|
||||
<p>We can invoke that callback whenever we like, independent of our application&#39;s dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we&#39;ll create directly in our test.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">payload</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_CREATE</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;foo&#39;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">payload</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]].</span><span class="nx">text</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="putting-it-all-together"></a>Putting it All Together <a class="hash-link" href="#putting-it-all-together">#</a></h2>
|
||||
<p>The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let&#39;s look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store&#39;s registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">&#39;../TodoStore&#39;</span><span class="p">);</span>
|
||||
<span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">&#39;react/lib/merge&#39;</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;TodoStore&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TodoConstants</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../constants/TodoConstants&#39;</span><span class="p">);</span>
|
||||
|
||||
<span class="c1">// mock actions inside dispatch payloads</span>
|
||||
<span class="kd">var</span> <span class="nx">actionTodoCreate</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_CREATE</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;foo&#39;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">actionTodoDestroy</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_DESTROY</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;replace me in test&#39;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">AppDispatcher</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">TodoStore</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">callback</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">beforeEach</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">AppDispatcher</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../dispatcher/AppDispatcher&#39;</span><span class="p">);</span>
|
||||
<span class="nx">TodoStore</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../TodoStore&#39;</span><span class="p">);</span>
|
||||
<span class="nx">callback</span> <span class="o">=</span> <span class="nx">AppDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">&#39;registers a callback with the dispatcher&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">AppDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">&#39;initializes with no to-do items&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({});</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">&#39;creates a to-do item&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoCreate</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">keys</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]].</span><span class="nx">text</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">it</span><span class="p">(</span><span class="s1">&#39;destroys a to-do item&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoCreate</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">keys</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="nx">actionTodoDestroy</span><span class="p">.</span><span class="nx">action</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoDestroy</span><span class="p">);</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]]).</span><span class="nx">toBeUndefined</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>You can take a look at all this code in the <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js">TodoStore&#39;s tests on GitHub</a> as well. </p>
|
||||
<h2><a class="anchor" name="mocking-data-derived-from-other-stores"></a>Mocking Data Derived from Other Stores <a class="hash-link" href="#mocking-data-derived-from-other-stores">#</a></h2>
|
||||
<p>Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we&#39;ll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyOtherStore</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../MyOtherStore&#39;</span><span class="p">);</span>
|
||||
<span class="nx">MyOtherStore</span><span class="p">.</span><span class="nx">getState</span><span class="p">.</span><span class="nx">mockReturnValue</span><span class="p">({</span>
|
||||
<span class="s1">&#39;123&#39;</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;123&#39;</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;foo&#39;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s1">&#39;456&#39;</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;456&#39;</span><span class="p">,</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store&#39;s registered callback.</p>
|
||||
|
||||
<p>A brief example of this technique is up on GitHub within the Flux Chat example&#39;s <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js">UnreadThreadStore-test.js</a>.</p>
|
||||
|
||||
<p>For more information about the <code>mock</code> property of mocked methods or Jest&#39;s ability to provide custom mock values, see Jest&#39;s documentation on <a href="http://facebook.github.io/jest/docs/mock-functions.html">mock functions</a>.</p>
|
||||
<h2><a class="anchor" name="moving-logic-from-react-to-stores"></a>Moving Logic from React to Stores <a class="hash-link" href="#moving-logic-from-react-to-stores">#</a></h2>
|
||||
<p>What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application&#39;s behavior, and when application logic slips into our view layer, this becomes more difficult.</p>
|
||||
|
||||
<p>For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the &quot;Mark all as complete&quot; checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection&#39;s <code>render()</code> method:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">allTodos</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">allTodos</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">allChecked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="nx">allTodos</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">allTodos</span><span class="p">[</span><span class="nx">id</span><span class="p">].</span><span class="nx">complete</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">allChecked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">break</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o">&lt;</span><span class="nx">section</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;main&quot;</span><span class="o">&gt;</span>
|
||||
<span class="o">&lt;</span><span class="nx">input</span>
|
||||
<span class="nx">id</span><span class="o">=</span><span class="s2">&quot;toggle-all&quot;</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="nx">allChecked</span> <span class="o">?</span> <span class="s1">&#39;checked&#39;</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span>
|
||||
<span class="o">/&gt;</span>
|
||||
<span class="p">...</span>
|
||||
<span class="o">&lt;</span><span class="err">/section&gt;</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can&#39;t be described in our spec-style TodoStore test. Let&#39;s take that logic and move it to the store. First, we&#39;ll create a public method on the store that will encapsulate that logic:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">areAllComplete</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="nx">_todos</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_todos</span><span class="p">[</span><span class="nx">id</span><span class="p">].</span><span class="nx">complete</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>Now we have the application logic where it belongs, and we can write the following test:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;determines whether all to-do items are complete&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">3</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">mockTodoCreate</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">all</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">callback</span><span class="p">({</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_COMPLETE</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="nx">key</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">callback</span><span class="p">({</span>
|
||||
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
|
||||
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_UNDO_COMPLETE</span><span class="p">,</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="nx">key</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Finally, we revise our view layer. We&#39;ll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">getTodoState</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">allTodos</span><span class="o">:</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">(),</span>
|
||||
<span class="nx">areAllComplete</span><span class="o">:</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TodoApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="cm">/**</span>
|
||||
<span class="cm"> * @return {object}</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="p">...</span>
|
||||
<span class="o">&lt;</span><span class="nx">MainSection</span>
|
||||
<span class="nx">allTodos</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">allTodos</span><span class="p">}</span>
|
||||
<span class="nx">areAllComplete</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">}</span>
|
||||
<span class="o">/&gt;</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="cm">/**</span>
|
||||
<span class="cm"> * Event handler for &#39;change&#39; events coming from the TodoStore</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="nx">_onChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">getTodoState</span><span class="p">());</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>And then we&#39;ll utilize that property for the rendering of the checkbox.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o">&lt;</span><span class="nx">section</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;main&quot;</span><span class="o">&gt;</span>
|
||||
<span class="o">&lt;</span><span class="nx">input</span>
|
||||
<span class="nx">id</span><span class="o">=</span><span class="s2">&quot;toggle-all&quot;</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span>
|
||||
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">areAllComplete</span> <span class="o">?</span> <span class="s1">&#39;checked&#39;</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span>
|
||||
<span class="o">/&gt;</span>
|
||||
<span class="p">...</span>
|
||||
<span class="o">&lt;</span><span class="err">/section&gt;</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>To learn how to test React components themselves, check out the <a href="http://facebook.github.io/jest/docs/tutorial-react.html">Jest tutorial for React</a> and the <a href="http://facebook.github.io/react/docs/test-utils.html">ReactTestUtils documentation</a>.</p>
|
||||
<h2><a class="anchor" name="further-reading"></a>Further Reading <a class="hash-link" href="#further-reading">#</a></h2>
|
||||
<ul>
|
||||
<li><a href="http://martinfowler.com/articles/mocksArentStubs.html">Mocks Aren&#39;t Stubs</a> by Martin Fowler</li>
|
||||
<li><a href="http://facebook.github.io/jest/docs/api.html">Jest API Reference</a></li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2014-09-24T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html</guid>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
||||
Reference in New Issue
Block a user