mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
roundup 25
This commit is contained in:
Christopher Chedeau
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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" class="active">React.js Conf Updates</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/11/25/community-roundup-24.html" class="active">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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html" class="active">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html" class="active">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Community Round-up #25 | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="Community Round-up #25 | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2015/03/03/community-roundup-25.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/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html" class="active">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/20/introducing-relay-and-graphql.html">Introducing Relay and GraphQL</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/18/react-conf-roundup-2015.html">React.js Conf Round-up 2015</a></li>
|
||||
|
||||
<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>
|
||||
|
||||
<li><a href="/react/blog/2014/11/25/community-roundup-24.html">Community Round-up #24</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Community Round-up #25</h1>
|
||||
<p class="meta">March 3, 2015 by Matthew Johnston</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<h2><a class="anchor" name="react-101"></a>React 101 <a class="hash-link" href="#react-101">#</a></h2>
|
||||
<p>Interest in React has been exploding recently, so it's a good time to explore some great recent tutorials and videos that cover getting started. </p>
|
||||
|
||||
<p>Ryan Clarke (<a href="https://github.com/rynclark">rynclark</a>) provides a <a href="http://ryanclark.me/getting-started-with-react/">great overview of the basics of React</a> with the goal of building a really simple dropdown nav. </p>
|
||||
|
||||
<p>Formidable Labs (<a href="https://github.com/FormidableLabs">FormidableLabs</a>) and <a href="http://www.meetup.com/seattlejs/">Seattle JS</a> recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/[Pd6Ub7Ju2RM](https://www.youtube.com/watch?v=Pd6Ub7Ju2RM)" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<p>AEFlash (<a href="https://github.com/aearly">aearly</a>) writes up <a href="http://aeflash.com/2015-02/react-tips-and-best-practices.html">some best practices and tips</a> to help you avoid potential pitfalls when developing with React. </p>
|
||||
|
||||
<p>Black Mutt Media <a href="http://blackmuttmedia.com/blog/react-tmdb-api/">takes us through their usage of React</a> and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.</p>
|
||||
|
||||
<p>Our own <a href="https://github.com/sebmarkbage">Sebastian Markbåge</a> was on the <a href="http://thewebplatform.libsyn.com/31-building-with-reactjs">Web Platform Podcast</a> to have a chat about all aspects of React.</p>
|
||||
<h2><a class="anchor" name="community-additions"></a>Community Additions <a class="hash-link" href="#community-additions">#</a></h2>
|
||||
<p>Formidable Labs (<a href="https://github.com/FormidableLabs">FormidableLabs</a>) have been busy, as they've also<a href="http://projects.formidablelabs.com/radium/"> just launched Radium</a>, a React component that provides you with the ability to use inline styles instead of CSS. They're also <a href="http://projects.formidablelabs.com/radium-bootstrap/">looking for some help</a> contributing to a Radium Bootstrap implementation. </p>
|
||||
|
||||
<p><a href="http://reactiflux.com/">Reactiflux.com</a> is a new Slack community based around (you guessed it!) React, and Flux. </p>
|
||||
|
||||
<p><a href="http://reactweek.com/">React Week</a> is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by Ryan Florence (<a href="https://github.com/ryanflorence">ryanflorence</a>). </p>
|
||||
|
||||
<p><a href="https://github.com/babel/babel-sublime">Babel-sublime</a> is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions. </p>
|
||||
|
||||
<p><a href="https://github.com/reactjs/react-meteor">react-meteor</a>, a package that replaces the default templating system of the Meteor platform with React, recently received a big update. </p>
|
||||
<h2><a class="anchor" name="rebuilding-with-react"></a>Rebuilding with React <a class="hash-link" href="#rebuilding-with-react">#</a></h2>
|
||||
<p>Rich Manalang (<a href="https://github.com/rmanalan">rmanalan</a>) from Atlassian <a href="https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/">explains why</a> they rebuilt their HipChat web client from scratch using React, and how they're already using it to rebuild their native desktop clients. </p>
|
||||
|
||||
<p><a href="https://twitter.com/andyhillel">Andrew Hillel</a> of the BBC gives <a href="http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d">an excellent and thorough breakdown</a> of the stack they used to rebuild their homepage, with React as an integral part of the front-end. </p>
|
||||
|
||||
<p>A team from New Zealand called <a href="https://atomic.io/">Atomic</a> is <a href="http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/">building web and mobile prototyping and design tools</a> entirely in-browser, and as co-founder <a href="http://twitter.com/darrylgray">Darryl Gray</a> says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.</p>
|
||||
|
||||
<p>Polarr (<a href="https://github.com/Polarrco">polarrco</a>) have rebuilt <a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here">their browser-based photo editor</a> with React.</p>
|
||||
<h2><a class="anchor" name="its-f8"></a>It's F8! <a class="hash-link" href="#its-f8">#</a></h2>
|
||||
<p>F8 2015 is just around the corner, and you can <a href="https://www.fbf8.com/stream.html">sign up for the video streams</a> in advance because we're sure to be covering all things React. </p>
|
||||
<h2><a class="anchor" name="meetups"></a>Meetups <a class="hash-link" href="#meetups">#</a></h2>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>— littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/yrezgui">@yrezgui</a> captivating us with <a href="https://twitter.com/reactjs">@reactjs</a> at <a href="https://twitter.com/DevRocketUK">@DevRocketUK</a>. Thanks to the amazing sponsors <a href="https://twitter.com/makersacademy">@makersacademy</a> and <a href="https://twitter.com/couchbase">@couchbase</a>. <a href="http://t.co/xwA773omky">pic.twitter.com/xwA773omky</a></p>— James Nocentini (@jamiltz) <a href="https://twitter.com/jamiltz/status/570306188577001473">February 24, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Listening to a bunch of very clever geekoids at the <a href="https://twitter.com/reactjs">@reactjs</a> seminar. Nice! <a href="http://t.co/0TeTOJOerO">pic.twitter.com/0TeTOJOerO</a></p>— Nick Middleweek (@nmiddleweek) <a href="https://twitter.com/nmiddleweek/status/568183658395394049">February 18, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Watching the <a href="https://twitter.com/FrontendMasters">@FrontendMasters</a> ReactJS workshop! <a href="http://t.co/YraYIK97Lu">pic.twitter.com/YraYIK97Lu</a></p>— ReactJS News (@ReactJSNews) <a href="https://twitter.com/ReactJSNews/status/566269552112041985">February 13, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
</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>
|
||||
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html" class="active">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
|
||||
<p><strong><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></strong> on March 3, 2015 by Sebastian Markbåge</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></strong> on March 3, 2015 by Matthew Johnston</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></strong> on February 24, 2015 by Paul O'Shannessy</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></strong> on February 24, 2015 by Sebastian Markbåge</p>
|
||||
|
||||
+61
-271
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -147,6 +147,65 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.13.0-rc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></h1>
|
||||
<p class="meta">March 3, 2015 by Matthew Johnston</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<h2><a class="anchor" name="react-101"></a>React 101 <a class="hash-link" href="#react-101">#</a></h2>
|
||||
<p>Interest in React has been exploding recently, so it's a good time to explore some great recent tutorials and videos that cover getting started. </p>
|
||||
|
||||
<p>Ryan Clarke (<a href="https://github.com/rynclark">rynclark</a>) provides a <a href="http://ryanclark.me/getting-started-with-react/">great overview of the basics of React</a> with the goal of building a really simple dropdown nav. </p>
|
||||
|
||||
<p>Formidable Labs (<a href="https://github.com/FormidableLabs">FormidableLabs</a>) and <a href="http://www.meetup.com/seattlejs/">Seattle JS</a> recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/[Pd6Ub7Ju2RM](https://www.youtube.com/watch?v=Pd6Ub7Ju2RM)" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<p>AEFlash (<a href="https://github.com/aearly">aearly</a>) writes up <a href="http://aeflash.com/2015-02/react-tips-and-best-practices.html">some best practices and tips</a> to help you avoid potential pitfalls when developing with React. </p>
|
||||
|
||||
<p>Black Mutt Media <a href="http://blackmuttmedia.com/blog/react-tmdb-api/">takes us through their usage of React</a> and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.</p>
|
||||
|
||||
<p>Our own <a href="https://github.com/sebmarkbage">Sebastian Markbåge</a> was on the <a href="http://thewebplatform.libsyn.com/31-building-with-reactjs">Web Platform Podcast</a> to have a chat about all aspects of React.</p>
|
||||
<h2><a class="anchor" name="community-additions"></a>Community Additions <a class="hash-link" href="#community-additions">#</a></h2>
|
||||
<p>Formidable Labs (<a href="https://github.com/FormidableLabs">FormidableLabs</a>) have been busy, as they've also<a href="http://projects.formidablelabs.com/radium/"> just launched Radium</a>, a React component that provides you with the ability to use inline styles instead of CSS. They're also <a href="http://projects.formidablelabs.com/radium-bootstrap/">looking for some help</a> contributing to a Radium Bootstrap implementation. </p>
|
||||
|
||||
<p><a href="http://reactiflux.com/">Reactiflux.com</a> is a new Slack community based around (you guessed it!) React, and Flux. </p>
|
||||
|
||||
<p><a href="http://reactweek.com/">React Week</a> is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by Ryan Florence (<a href="https://github.com/ryanflorence">ryanflorence</a>). </p>
|
||||
|
||||
<p><a href="https://github.com/babel/babel-sublime">Babel-sublime</a> is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions. </p>
|
||||
|
||||
<p><a href="https://github.com/reactjs/react-meteor">react-meteor</a>, a package that replaces the default templating system of the Meteor platform with React, recently received a big update. </p>
|
||||
<h2><a class="anchor" name="rebuilding-with-react"></a>Rebuilding with React <a class="hash-link" href="#rebuilding-with-react">#</a></h2>
|
||||
<p>Rich Manalang (<a href="https://github.com/rmanalan">rmanalan</a>) from Atlassian <a href="https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/">explains why</a> they rebuilt their HipChat web client from scratch using React, and how they're already using it to rebuild their native desktop clients. </p>
|
||||
|
||||
<p><a href="https://twitter.com/andyhillel">Andrew Hillel</a> of the BBC gives <a href="http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d">an excellent and thorough breakdown</a> of the stack they used to rebuild their homepage, with React as an integral part of the front-end. </p>
|
||||
|
||||
<p>A team from New Zealand called <a href="https://atomic.io/">Atomic</a> is <a href="http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/">building web and mobile prototyping and design tools</a> entirely in-browser, and as co-founder <a href="http://twitter.com/darrylgray">Darryl Gray</a> says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.</p>
|
||||
|
||||
<p>Polarr (<a href="https://github.com/Polarrco">polarrco</a>) have rebuilt <a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here">their browser-based photo editor</a> with React.</p>
|
||||
<h2><a class="anchor" name="its-f8"></a>It's F8! <a class="hash-link" href="#its-f8">#</a></h2>
|
||||
<p>F8 2015 is just around the corner, and you can <a href="https://www.fbf8.com/stream.html">sign up for the video streams</a> in advance because we're sure to be covering all things React. </p>
|
||||
<h2><a class="anchor" name="meetups"></a>Meetups <a class="hash-link" href="#meetups">#</a></h2>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>— littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/yrezgui">@yrezgui</a> captivating us with <a href="https://twitter.com/reactjs">@reactjs</a> at <a href="https://twitter.com/DevRocketUK">@DevRocketUK</a>. Thanks to the amazing sponsors <a href="https://twitter.com/makersacademy">@makersacademy</a> and <a href="https://twitter.com/couchbase">@couchbase</a>. <a href="http://t.co/xwA773omky">pic.twitter.com/xwA773omky</a></p>— James Nocentini (@jamiltz) <a href="https://twitter.com/jamiltz/status/570306188577001473">February 24, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Listening to a bunch of very clever geekoids at the <a href="https://twitter.com/reactjs">@reactjs</a> seminar. Nice! <a href="http://t.co/0TeTOJOerO">pic.twitter.com/0TeTOJOerO</a></p>— Nick Middleweek (@nmiddleweek) <a href="https://twitter.com/nmiddleweek/status/568183658395394049">February 18, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Watching the <a href="https://twitter.com/FrontendMasters">@FrontendMasters</a> ReactJS workshop! <a href="http://t.co/YraYIK97Lu">pic.twitter.com/YraYIK97Lu</a></p>— ReactJS News (@ReactJSNews) <a href="https://twitter.com/ReactJSNews/status/566269552112041985">February 13, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></h1>
|
||||
<p class="meta">February 24, 2015 by Paul O'Shannessy</p>
|
||||
@@ -433,275 +492,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.13.0-rc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/02/18/react-conf-roundup-2015.html">React.js Conf Round-up 2015</a></h1>
|
||||
<p class="meta">February 18, 2015 by Steven Luscher</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.</p>
|
||||
<h2><a class="anchor" name="the-talks"></a>The talks <a class="hash-link" href="#the-talks">#</a></h2>
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-keynote"></a>Keynote <a class="hash-link" href="#talk-keynote">#</a></h3>
|
||||
<p>
|
||||
<strong>Tom Occhino</strong> opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM?
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-tweak"></a>Tweaking in real time <a class="hash-link" href="#talk-tweak">#</a></h3>
|
||||
<p>
|
||||
<strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using Webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-ast"></a>Abstract Syntax Trees <a class="hash-link" href="#talk-ast">#</a></h3>
|
||||
<p>
|
||||
<strong>Gurdas Nijor</strong> showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-relay-graphql"></a>Relay and GraphQL <a class="hash-link" href="#talk-relay-graphql">#</a></h3>
|
||||
<p>
|
||||
<strong>Daniel Schafer</strong> and <strong>Jing Chen</strong> showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-channels"></a>Channels <a class="hash-link" href="#talk-channels">#</a></h3>
|
||||
<p>
|
||||
<strong>James Long</strong> explores what might happen if we introduce channels, a new style of coordinating actions, to React.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-router"></a>React Router <a class="hash-link" href="#talk-router">#</a></h3>
|
||||
<p>
|
||||
<strong>Michael Jackson</strong> reminded us that URLs should be part of our design process, and showed us how <a href="https://github.com/rackt/react-router">react-router</a> can help to manage the transitions between them.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-full-stack-flux"></a>Full-stack Flux <a class="hash-link" href="#talk-full-stack-flux">#</a></h3>
|
||||
<p>
|
||||
<strong>Pete Hunt</strong> showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
|
||||
<p>
|
||||
<strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="http://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-intl"></a>FormatJS and react-intl <a class="hash-link" href="#talk-intl">#</a></h3>
|
||||
<p>
|
||||
<strong>Eric Ferraiuolo</strong> showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-hype"></a>Hype! <a class="hash-link" href="#talk-hype">#</a></h3>
|
||||
<p>
|
||||
<strong>Ryan Florence</strong> showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.”
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-native"></a>React Native <a class="hash-link" href="#talk-native">#</a></h3>
|
||||
<p>
|
||||
<strong>Christopher Chedeau</strong> showed us how to bring the developer experience of working with React on the web to native app development, using React Native.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-components"></a>Components <a class="hash-link" href="#talk-components">#</a></h3>
|
||||
<p>
|
||||
<strong>Andrew Rota</strong> explained how React and Web Components can work together, and how to avoid some common pitfalls.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-immutable"></a>Immutability <a class="hash-link" href="#talk-immutable">#</a></h3>
|
||||
<p>
|
||||
<strong>Lee Byron</strong> led a master-class on persistent immutable data structures, showing us the world of possibility that they can unlock for your software, and perhaps Javascript in general.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-gibbon"></a>Beyond the DOM <a class="hash-link" href="#talk-gibbon">#</a></h3>
|
||||
<p>
|
||||
<strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-visualization"></a>Data Visualization <a class="hash-link" href="#talk-visualization">#</a></h3>
|
||||
<p>
|
||||
<strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-refracted"></a>React Refracted <a class="hash-link" href="#talk-refracted">#</a></h3>
|
||||
<p>
|
||||
<strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-flux-panel"></a>Flux Panel <a class="hash-link" href="#talk-flux-panel">#</a></h3>
|
||||
<p>
|
||||
<strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-communication"></a>Component communication <a class="hash-link" href="#talk-communication">#</a></h3>
|
||||
<p>
|
||||
<strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-typescript"></a>Flow and TypeScript <a class="hash-link" href="#talk-typescript">#</a></h3>
|
||||
<p>
|
||||
<strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-qa"></a>Core Team Q&A <a class="hash-link" href="#talk-qa">#</a></h3>
|
||||
<p>
|
||||
<strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&A session.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<h2><a class="anchor" name="reactions"></a>Reactions <a class="hash-link" href="#reactions">#</a></h2>
|
||||
<p>The conference is over, but the conversation has just begun.</p>
|
||||
|
||||
<p><strong>Mihai Parparita</strong> detailed his efforts to <a href="http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html">hack his way to a React.js Conf ticket</a>; <strong>James Long</strong> blogged about <a href="http://jlongster.com/First-Impressions-using-React-Native">his first encounter with React Native</a>; <strong>Eric Florenzano</strong> talked about how he perceives the <a href="https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2">impact of Relay, GraphQL, and React Native</a> on software development; <strong>Margaret Staples</strong> blogged about her experience of <a href="http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html">being on-campus at Facebook HQ</a>; <strong>Jeff Barczewski</strong> tied his experience of attending the conference up with a bow in this <a href="http://codewinds.com/blog/2015-02-04-reactjs-conf.html">blog post filled with photos, videos, and links</a>; <strong>Kevin Old</strong> left us with <a href="http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html">his takeaways</a>; <strong>Paul Wittmann</strong> found React Native <a href="http://www.railslove.com/stories/fresh-on-our-radar-react-native">freshly on his radar</a>; and finally, undeterred by not being able to attend the conference in person, <strong>Justin Ball</strong> <a href="http://www.justinball.com/2015/02/03/i-didn't-attend-react.js-conf/">summarized it from afar</a>.</p>
|
||||
|
||||
<p>And, in case you missed a session, you can borrow <strong>Michael Chan’s</strong> <a href="http://chantastic.io/2015-reactjs-conf/">drawings</a>, <strong>Mihai Parparita’s</strong> <a href="https://quip.com/uJQeABv7nkFN">summary</a>, or <strong>Shaohua Zhou’s</strong> <a href="http://getshao.com/2015/01/29/react-js-conf-notes-day1/">day 1</a> / <a href="http://getshao.com/2015/01/29/react-js-conf-notes-day-2/">day 2</a> notes.</p>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Notes from <a href="https://twitter.com/dlschafer">@dlschafer</a> and <a href="https://twitter.com/jingc">@jingc</a>'s <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> talk "Data fetching for React applications at Facebook" <a href="http://t.co/IUZUbDCDMQ">pic.twitter.com/IUZUbDCDMQ</a></p>— Michael Chan (@chantastic) <a href="https://twitter.com/chantastic/status/560538533161472000">January 28, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>This is just magical (in the good way)… GraphQL + Relay is amazing. <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>— Chris Williams (@voodootikigod) <a href="https://twitter.com/voodootikigod/status/560533225395589120">January 28, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>These… these are my people. :) <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>— Thomas Beirne (@Beirnet) <a href="https://twitter.com/Beirnet/status/560317879501848576">January 28, 2015</a></blockquote>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Humbled by the React team and community. Found <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> very mindful, practical and just real.</p>— xnoɹǝʃ uɐıɹq (@brianleroux) <a href="https://twitter.com/brianleroux/status/560972130112655360">January 30, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.</p>— Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.</p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/561232290273980416">January 30, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>I really love the community shout outs by <a href="https://twitter.com/Vjeux">@vjeux</a> between talks at <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a>!</p>— Andrew Rota (@AndrewRota) <a href="https://twitter.com/AndrewRota/status/560927339522297856">January 29, 2015</a></blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<p><strong>All proceeds from React.js Conf 2015 were donated to the wonderful programs at <a href="http://code.org">code.org</a></strong>. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.</p>
|
||||
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+80
-88
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,84 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/18/community-roundup-11.html">Community Round-up #11</a></h1>
|
||||
<p class="meta">November 18, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!</p>
|
||||
<h2><a class="anchor" name="super-vanjs-2013-talk"></a>Super VanJS 2013 Talk <a class="hash-link" href="#super-vanjs-2013-talk">#</a></h2>
|
||||
<p><a href="https://github.com/steveluscher">Steve Luscher</a> working at <a href="https://leanpub.com/">LeanPub</a> made a 30 min talk at <a href="https://twitter.com/vanjs">Super VanJS</a>. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.</p>
|
||||
|
||||
<figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="react-tips"></a>React Tips <a class="hash-link" href="#react-tips">#</a></h2>
|
||||
<p><a href="http://connormcsheffrey.com/">Connor McSheffrey</a> and <a href="https://github.com/chenglou">Cheng Lou</a> added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we <a href="http://facebook.github.io/react/tips/introduction.html">encourage you to contribute</a>!</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://facebook.github.io/react/tips/inline-styles.html">Inline Styles</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/if-else-in-JSX.html">If-Else in JSX</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/self-closing-tag.html">Self-Closing Tag</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/children-props-type.html">Type of the Children props</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html"><code>componentWillReceiveProps</code> Not Triggered After Mounting</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/initial-ajax.html">Load Initial Data via AJAX</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/false-in-jsx.html">False in JSX</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="intro-to-the-react-framework"></a>Intro to the React Framework <a class="hash-link" href="#intro-to-the-react-framework">#</a></h2>
|
||||
<p><a href="http://blog.pixelingene.com/">Pavan Podila</a> wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
|
||||
<figure><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660"><img src="/react/img/blog/tutsplus.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660">Read the full article ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="140-characters-textarea"></a>140-characters textarea <a class="hash-link" href="#140-characters-textarea">#</a></h2>
|
||||
<p><a href="https://github.com/brainkim">Brian Kim</a> wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.</p>
|
||||
|
||||
<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
|
||||
|
||||
<script async src="//codepen.io/assets/embed/ei.js"></script>
|
||||
<h2><a class="anchor" name="genesis-skeleton"></a>Genesis Skeleton <a class="hash-link" href="#genesis-skeleton">#</a></h2>
|
||||
<p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
|
||||
<figure><a href="http://genesis-skeleton.com/"><img src="/react/img/blog/genesis_skeleton.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="agflow-talk"></a>AgFlow Talk <a class="hash-link" href="#agflow-talk">#</a></h2>
|
||||
<p><a href="http://rz.scale-it.pl/">Robert Zaremba</a> working on <a href="http://www.agflow.com/">AgFlow</a> recently talked in Poland about React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone ...) in AgFlow, where I’m leading an application development.</p>
|
||||
|
||||
<p>During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!</p>
|
||||
|
||||
<p><a href="http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="600" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
|
||||
<h2><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h2>
|
||||
<p><a href="http://tck.io/">Todd Kennedy</a> working at Condé Nast wrote <a href="https://github.com/CondeNast/JSXHint">JSXHint</a> and explains in a blog post his perspective on JSX.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Lets start with the elephant in the room: JSX?
|
||||
Is this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.</p>
|
||||
|
||||
<p>Creating elements in memory is quick -- copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we're dealing with something that needs to update the DOM frequently.</p>
|
||||
|
||||
<p><a href="http://tck.io/posts/jsxhint_and_react.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="photo-gallery"></a>Photo Gallery <a class="hash-link" href="#photo-gallery">#</a></h2>
|
||||
<p><a href="http://miekd.com/">Maykel Loomans</a>, designer at Instagram, wrote a gallery for photos he shot using React.
|
||||
<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="/react/img/blog/xoxo2013.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p><img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
|
||||
<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>— Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div></p>
|
||||
|
||||
</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>
|
||||
@@ -425,92 +503,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></h1>
|
||||
<p class="meta">October 3, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.</p>
|
||||
|
||||
<p><img src="/react/img/blog/react-hackathon.jpg" alt=""></p>
|
||||
<h2><a class="anchor" name="react-hackathon-winner"></a>React Hackathon Winner <a class="hash-link" href="#react-hackathon-winner">#</a></h2>
|
||||
<p><a href="http://bold-it.com/">Alex Swan</a> implemented <a href="http://qu.izti.me/">Qu.izti.me</a>, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The game itself is pretty simple. People join the "room" by going to <a href="http://qu.izti.me/">http://qu.izti.me</a> on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.</p>
|
||||
|
||||
<p>In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
|
||||
<figure><a href="http://bold-it.com/javascript/facebook-react-example/"><img src="/react/img/blog/quiztime.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://bold-it.com/javascript/facebook-react-example/">Read More...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsconf-eu-talk-rethinking-best-practices"></a>JSConf EU Talk: Rethinking Best Practices <a class="hash-link" href="#jsconf-eu-talk-rethinking-best-practices">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> presented React at JSConf EU. He covers three controversial design decisions of React:</p>
|
||||
|
||||
<ol>
|
||||
<li>Build <strong>components</strong>, not templates</li>
|
||||
<li>Re-render the whole app on every update</li>
|
||||
<li>Virtual DOM</li>
|
||||
</ol>
|
||||
|
||||
<p>The video will be available soon on the <a href="http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html">JSConf EU website</a>, but in the meantime, here are Pete's slides:</p>
|
||||
|
||||
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="pump---clojure-bindings-for-react"></a>Pump - Clojure bindings for React <a class="hash-link" href="#pump---clojure-bindings-for-react">#</a></h2>
|
||||
<p><a href="http://solovyov.net/">Alexander Solovyov</a> has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.</p>
|
||||
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
|
||||
<span class="p">(</span><span class="ss">:require</span><span class="o">-</span><span class="n">macros</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">def</span><span class="o">-</span><span class="n">macros</span> <span class="ss">:refer</span> <span class="o">[</span><span class="n">defr</span><span class="o">]]</span><span class="p">)</span>
|
||||
<span class="p">(</span><span class="ss">:require</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">core</span><span class="o">]</span><span class="p">))</span>
|
||||
|
||||
<span class="p">(</span><span class="n">defr</span> <span class="no">Component</span>
|
||||
<span class="ss">:get</span><span class="o">-</span><span class="n">initial</span><span class="o">-</span><span class="n">state</span> <span class="c1">#(identity {:some-value ""})</span>
|
||||
|
||||
<span class="o">[</span><span class="n">component</span> <span class="n">props</span> <span class="n">state</span><span class="o">]</span>
|
||||
|
||||
<span class="o">[</span><span class="ss">:div</span> <span class="p">{</span><span class="ss">:class</span><span class="o">-</span><span class="nb">name</span> <span class="s2">"test"</span><span class="p">}</span> <span class="s2">"hello"</span><span class="o">]</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/piranha/pump">Check it out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="jsxhint"></a>JSXHint <a class="hash-link" href="#jsxhint">#</a></h2>
|
||||
<p><a href="http://blog.selfassembled.org/">Todd Kennedy</a> working at <a href="http://www.condenast.com/">Condé Nast</a> implemented a wrapper on-top of <a href="http://www.jshint.com/">JSHint</a> that first converts JSX files to JS.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install -g jsxhint
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/CondeNast/JSXHint">Check it out on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="turbo-react"></a>Turbo React <a class="hash-link" href="#turbo-react">#</a></h2>
|
||||
<p><a href="https://twitter.com/ssorallen">Ross Allen</a> working at <a href="http://mesosphere.io/">Mesosphere</a> combined <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, a library used by Ruby on Rails to speed up page transition, and React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>"Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.</p>
|
||||
|
||||
<p>The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.</p>
|
||||
|
||||
<p>With Turbolinks alone, the entire <body> would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
|
||||
<figure><a href="https://turbo-react.herokuapp.com/"><img src="/react/img/blog/turboreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://turbo-react.herokuapp.com/">Check out the demo...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="reactive-table"></a>Reactive Table <a class="hash-link" href="#reactive-table">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React is all about components. So let's build one.</p>
|
||||
|
||||
<p>Let's call it Table (to avoid any confusion what the component is about).</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</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="cm">/*stuff goeth here*/</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.</p>
|
||||
|
||||
<p><a href="http://www.phpied.com/reactive-table/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+88
-38
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,92 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></h1>
|
||||
<p class="meta">October 3, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.</p>
|
||||
|
||||
<p><img src="/react/img/blog/react-hackathon.jpg" alt=""></p>
|
||||
<h2><a class="anchor" name="react-hackathon-winner"></a>React Hackathon Winner <a class="hash-link" href="#react-hackathon-winner">#</a></h2>
|
||||
<p><a href="http://bold-it.com/">Alex Swan</a> implemented <a href="http://qu.izti.me/">Qu.izti.me</a>, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The game itself is pretty simple. People join the "room" by going to <a href="http://qu.izti.me/">http://qu.izti.me</a> on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.</p>
|
||||
|
||||
<p>In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
|
||||
<figure><a href="http://bold-it.com/javascript/facebook-react-example/"><img src="/react/img/blog/quiztime.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://bold-it.com/javascript/facebook-react-example/">Read More...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsconf-eu-talk-rethinking-best-practices"></a>JSConf EU Talk: Rethinking Best Practices <a class="hash-link" href="#jsconf-eu-talk-rethinking-best-practices">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> presented React at JSConf EU. He covers three controversial design decisions of React:</p>
|
||||
|
||||
<ol>
|
||||
<li>Build <strong>components</strong>, not templates</li>
|
||||
<li>Re-render the whole app on every update</li>
|
||||
<li>Virtual DOM</li>
|
||||
</ol>
|
||||
|
||||
<p>The video will be available soon on the <a href="http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html">JSConf EU website</a>, but in the meantime, here are Pete's slides:</p>
|
||||
|
||||
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="pump---clojure-bindings-for-react"></a>Pump - Clojure bindings for React <a class="hash-link" href="#pump---clojure-bindings-for-react">#</a></h2>
|
||||
<p><a href="http://solovyov.net/">Alexander Solovyov</a> has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.</p>
|
||||
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
|
||||
<span class="p">(</span><span class="ss">:require</span><span class="o">-</span><span class="n">macros</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">def</span><span class="o">-</span><span class="n">macros</span> <span class="ss">:refer</span> <span class="o">[</span><span class="n">defr</span><span class="o">]]</span><span class="p">)</span>
|
||||
<span class="p">(</span><span class="ss">:require</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">core</span><span class="o">]</span><span class="p">))</span>
|
||||
|
||||
<span class="p">(</span><span class="n">defr</span> <span class="no">Component</span>
|
||||
<span class="ss">:get</span><span class="o">-</span><span class="n">initial</span><span class="o">-</span><span class="n">state</span> <span class="c1">#(identity {:some-value ""})</span>
|
||||
|
||||
<span class="o">[</span><span class="n">component</span> <span class="n">props</span> <span class="n">state</span><span class="o">]</span>
|
||||
|
||||
<span class="o">[</span><span class="ss">:div</span> <span class="p">{</span><span class="ss">:class</span><span class="o">-</span><span class="nb">name</span> <span class="s2">"test"</span><span class="p">}</span> <span class="s2">"hello"</span><span class="o">]</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/piranha/pump">Check it out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="jsxhint"></a>JSXHint <a class="hash-link" href="#jsxhint">#</a></h2>
|
||||
<p><a href="http://blog.selfassembled.org/">Todd Kennedy</a> working at <a href="http://www.condenast.com/">Condé Nast</a> implemented a wrapper on-top of <a href="http://www.jshint.com/">JSHint</a> that first converts JSX files to JS.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install -g jsxhint
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/CondeNast/JSXHint">Check it out on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="turbo-react"></a>Turbo React <a class="hash-link" href="#turbo-react">#</a></h2>
|
||||
<p><a href="https://twitter.com/ssorallen">Ross Allen</a> working at <a href="http://mesosphere.io/">Mesosphere</a> combined <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, a library used by Ruby on Rails to speed up page transition, and React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>"Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.</p>
|
||||
|
||||
<p>The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.</p>
|
||||
|
||||
<p>With Turbolinks alone, the entire <body> would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
|
||||
<figure><a href="https://turbo-react.herokuapp.com/"><img src="/react/img/blog/turboreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://turbo-react.herokuapp.com/">Check out the demo...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="reactive-table"></a>Reactive Table <a class="hash-link" href="#reactive-table">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React is all about components. So let's build one.</p>
|
||||
|
||||
<p>Let's call it Table (to avoid any confusion what the component is about).</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</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="cm">/*stuff goeth here*/</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.</p>
|
||||
|
||||
<p><a href="http://www.phpied.com/reactive-table/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</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>
|
||||
@@ -349,42 +435,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></h1>
|
||||
<p class="meta">July 30, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: <a href="https://github.com/facebook/react-rails">react-rails</a>.</p>
|
||||
|
||||
<p>This gem has 2 primary purposes:</p>
|
||||
|
||||
<ol>
|
||||
<li>To package <code>react.js</code> in a way that's easy to use and easy to update.</li>
|
||||
<li>To allow you to write JSX without an external build step to transform that into JS.</li>
|
||||
</ol>
|
||||
<h2><a class="anchor" name="packaging-react.js"></a>Packaging react.js <a class="hash-link" href="#packaging-react.js">#</a></h2>
|
||||
<p>To make <code>react.js</code> available for use client-side, simply add <code>react</code> to your manifest, and declare the variant you'd like to use in your environment. When you use <code>:production</code>, the minified and optimized <code>react.min.js</code> will be used instead of the development version. For example:</p>
|
||||
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># config/environments/development.rb</span>
|
||||
|
||||
<span class="no">MyApp</span><span class="o">::</span><span class="no">Application</span><span class="o">.</span><span class="n">configure</span> <span class="k">do</span>
|
||||
<span class="n">config</span><span class="o">.</span><span class="n">react</span><span class="o">.</span><span class="n">variant</span> <span class="o">=</span> <span class="ss">:development</span>
|
||||
<span class="c1"># use :production in production.rb</span>
|
||||
<span class="k">end</span>
|
||||
</code></pre></div><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// app/assets/javascript/application.js</span>
|
||||
|
||||
<span class="c1">//= require react</span>
|
||||
</code></pre></div><h2><a class="anchor" name="writing-jsx"></a>Writing JSX <a class="hash-link" href="#writing-jsx">#</a></h2>
|
||||
<p>When you name your file with <code>myfile.js.jsx</code>, <code>react-rails</code> will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</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="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">)</span>
|
||||
</code></pre></div><h2><a class="anchor" name="asset-pipeline"></a>Asset Pipeline <a class="hash-link" href="#asset-pipeline">#</a></h2>
|
||||
<p><code>react-rails</code> takes advantage of the <a href="http://guides.rubyonrails.org/asset_pipeline.html">asset pipeline</a> that was introduced in Rails 3.1. A very important part of that pipeline is the <code>assets:precompile</code> Rake task. <code>react-rails</code> will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.</p>
|
||||
<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
|
||||
<p>Installation follows the same process you're familiar with. You can install it globally with <code>gem install react-rails</code>, though we suggest you add the dependency to your <code>Gemfile</code> directly.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+38
-71
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,42 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></h1>
|
||||
<p class="meta">July 30, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: <a href="https://github.com/facebook/react-rails">react-rails</a>.</p>
|
||||
|
||||
<p>This gem has 2 primary purposes:</p>
|
||||
|
||||
<ol>
|
||||
<li>To package <code>react.js</code> in a way that's easy to use and easy to update.</li>
|
||||
<li>To allow you to write JSX without an external build step to transform that into JS.</li>
|
||||
</ol>
|
||||
<h2><a class="anchor" name="packaging-react.js"></a>Packaging react.js <a class="hash-link" href="#packaging-react.js">#</a></h2>
|
||||
<p>To make <code>react.js</code> available for use client-side, simply add <code>react</code> to your manifest, and declare the variant you'd like to use in your environment. When you use <code>:production</code>, the minified and optimized <code>react.min.js</code> will be used instead of the development version. For example:</p>
|
||||
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># config/environments/development.rb</span>
|
||||
|
||||
<span class="no">MyApp</span><span class="o">::</span><span class="no">Application</span><span class="o">.</span><span class="n">configure</span> <span class="k">do</span>
|
||||
<span class="n">config</span><span class="o">.</span><span class="n">react</span><span class="o">.</span><span class="n">variant</span> <span class="o">=</span> <span class="ss">:development</span>
|
||||
<span class="c1"># use :production in production.rb</span>
|
||||
<span class="k">end</span>
|
||||
</code></pre></div><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// app/assets/javascript/application.js</span>
|
||||
|
||||
<span class="c1">//= require react</span>
|
||||
</code></pre></div><h2><a class="anchor" name="writing-jsx"></a>Writing JSX <a class="hash-link" href="#writing-jsx">#</a></h2>
|
||||
<p>When you name your file with <code>myfile.js.jsx</code>, <code>react-rails</code> will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</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="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">)</span>
|
||||
</code></pre></div><h2><a class="anchor" name="asset-pipeline"></a>Asset Pipeline <a class="hash-link" href="#asset-pipeline">#</a></h2>
|
||||
<p><code>react-rails</code> takes advantage of the <a href="http://guides.rubyonrails.org/asset_pipeline.html">asset pipeline</a> that was introduced in Rails 3.1. A very important part of that pipeline is the <code>assets:precompile</code> Rake task. <code>react-rails</code> will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.</p>
|
||||
<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
|
||||
<p>Installation follows the same process you're familiar with. You can install it globally with <code>gem install react-rails</code>, though we suggest you add the dependency to your <code>Gemfile</code> directly.</p>
|
||||
|
||||
</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>
|
||||
@@ -305,75 +341,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/03/community-roundup-4.html">Community Round-up #4</a></h1>
|
||||
<p class="meta">July 3, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.</p>
|
||||
<h2><a class="anchor" name="khan-academy"></a>Khan Academy <a class="hash-link" href="#khan-academy">#</a></h2>
|
||||
<p><a href="http://bjk5.com/">Ben Kamens</a> explains how <a href="http://benalpert.com/">Ben Alpert</a> and <a href="http://joelburget.com/">Joel Burget</a> are promoting React inside of <a href="https://www.khanacademy.org/">Khan Academy</a>. They now have three projects in the works using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.</p>
|
||||
|
||||
<p>"The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"</p>
|
||||
|
||||
<p><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>The best part is the demo of how React reconciliation process makes live editing more user-friendly.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
|
||||
<figure><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology"><img src="/react/img/blog/monkeys.gif" width="70%" /></a></figure></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-snippets"></a>React Snippets <a class="hash-link" href="#react-snippets">#</a></h2>
|
||||
<p>Over the past several weeks, members of our team, <a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="http://zpao.com/">Paul O'Shannessy</a>, answered many questions that were asked in the <a href="https://groups.google.com/forum/#!forum/reactjs">React group</a>. They give a good overview of how to integrate React with other libraries and APIs through the use of <a href="/react/docs/reusable-components.html">Mixins</a> and <a href="/react/docs/working-with-the-browser.html">Lifecycle Methods</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk">Listening Scroll Event</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/aabeL/1/">JSFiddle</a>: Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo">Fade-in Transition</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/ufe8k/1/">JSFiddle</a>: Creating a new <code><FadeInWhenAdded></code> component and using jQuery <code>.fadeIn()</code> function on the DOM node.</li>
|
||||
<li><a href="http://jsfiddle.net/R8f5L/5/">JSFiddle</a>: Using CSS transition instead.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4">Socket.IO Integration</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://gist.github.com/zpao/5686416">Gist</a>: The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.</li>
|
||||
<li><a href="https://gist.github.com/petehunt/5687230">Gist</a>: This example is doing everything -- including the IO -- inside of a single React component.</li>
|
||||
<li><a href="https://gist.github.com/petehunt/5687276">Gist</a>: One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4">Sortable jQuery Plugin Integration</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/LQxy7/">JSFiddle</a>: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="introduction-to-react-screencast"></a>Introduction to React Screencast <a class="hash-link" href="#introduction-to-react-screencast">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> recorded himself implementing a simple <code><Blink></code> tag in React.</p>
|
||||
|
||||
<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
|
||||
<h2><a class="anchor" name="snake-in-react"></a>Snake in React <a class="hash-link" href="#snake-in-react">#</a></h2>
|
||||
<p><a href="http://tomocchino.com/">Tom Occhino</a> implemented Snake in 150 lines with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://github.com/tomocchino/react-snake/blob/master/src/snake.js">Check the source on Github</a>
|
||||
<figure><a href="http://tomocchino.github.io/react-snake/"><img src="/react/img/blog/snake.png" alt=""></a></figure></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+71
-53
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,75 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></h1>
|
||||
<p class="meta">July 3, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.</p>
|
||||
<h2><a class="anchor" name="khan-academy"></a>Khan Academy <a class="hash-link" href="#khan-academy">#</a></h2>
|
||||
<p><a href="http://bjk5.com/">Ben Kamens</a> explains how <a href="http://benalpert.com/">Ben Alpert</a> and <a href="http://joelburget.com/">Joel Burget</a> are promoting React inside of <a href="https://www.khanacademy.org/">Khan Academy</a>. They now have three projects in the works using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.</p>
|
||||
|
||||
<p>"The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"</p>
|
||||
|
||||
<p><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>The best part is the demo of how React reconciliation process makes live editing more user-friendly.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
|
||||
<figure><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology"><img src="/react/img/blog/monkeys.gif" width="70%" /></a></figure></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-snippets"></a>React Snippets <a class="hash-link" href="#react-snippets">#</a></h2>
|
||||
<p>Over the past several weeks, members of our team, <a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="http://zpao.com/">Paul O'Shannessy</a>, answered many questions that were asked in the <a href="https://groups.google.com/forum/#!forum/reactjs">React group</a>. They give a good overview of how to integrate React with other libraries and APIs through the use of <a href="/react/docs/reusable-components.html">Mixins</a> and <a href="/react/docs/working-with-the-browser.html">Lifecycle Methods</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk">Listening Scroll Event</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/aabeL/1/">JSFiddle</a>: Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo">Fade-in Transition</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/ufe8k/1/">JSFiddle</a>: Creating a new <code><FadeInWhenAdded></code> component and using jQuery <code>.fadeIn()</code> function on the DOM node.</li>
|
||||
<li><a href="http://jsfiddle.net/R8f5L/5/">JSFiddle</a>: Using CSS transition instead.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4">Socket.IO Integration</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://gist.github.com/zpao/5686416">Gist</a>: The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.</li>
|
||||
<li><a href="https://gist.github.com/petehunt/5687230">Gist</a>: This example is doing everything -- including the IO -- inside of a single React component.</li>
|
||||
<li><a href="https://gist.github.com/petehunt/5687276">Gist</a>: One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4">Sortable jQuery Plugin Integration</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/LQxy7/">JSFiddle</a>: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="introduction-to-react-screencast"></a>Introduction to React Screencast <a class="hash-link" href="#introduction-to-react-screencast">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> recorded himself implementing a simple <code><Blink></code> tag in React.</p>
|
||||
|
||||
<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
|
||||
<h2><a class="anchor" name="snake-in-react"></a>Snake in React <a class="hash-link" href="#snake-in-react">#</a></h2>
|
||||
<p><a href="http://tomocchino.com/">Tom Occhino</a> implemented Snake in 150 lines with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://github.com/tomocchino/react-snake/blob/master/src/snake.js">Check the source on Github</a>
|
||||
<figure><a href="http://tomocchino.github.io/react-snake/"><img src="/react/img/blog/snake.png" alt=""></a></figure></p>
|
||||
</blockquote>
|
||||
|
||||
</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>
|
||||
@@ -311,57 +380,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></h1>
|
||||
<p class="meta">June 12, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React was open sourced two weeks ago and it's time for a little round-up of what has been going on.</p>
|
||||
<h2><a class="anchor" name="khan-academy-question-editor"></a>Khan Academy Question Editor <a class="hash-link" href="#khan-academy-question-editor">#</a></h2>
|
||||
<p>It looks like <a href="http://benalpert.com/">Ben Alpert</a> is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (<a href="irc://chat.freenode.net/reactjs">#reactjs on Freenode</a>). Ben wrote about his experience using React:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.</p>
|
||||
|
||||
<p>The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
|
||||
<figure><a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html"><img src="/react/img/blog/khan-academy-editor.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="pimp-my-backbone.view-by-replacing-it-with-react"></a>Pimp my Backbone.View (by replacing it with React) <a class="hash-link" href="#pimp-my-backbone.view-by-replacing-it-with-react">#</a></h2>
|
||||
<p><a href="https://blog.mayflower.de/">Paul Seiffert</a> wrote a blog post that explains how to integrate React into Backbone applications.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.</p>
|
||||
|
||||
<p>As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.</p>
|
||||
|
||||
<p>The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.</p>
|
||||
|
||||
<p><a href="https://blog.mayflower.de/3937-Backbone-React.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="using-facebooks-react-with-require.js"></a>Using facebook's React with require.js <a class="hash-link" href="#using-facebooks-react-with-require.js">#</a></h2>
|
||||
<p><a href="http://blog.xenji.com/">Mario Mueller</a> wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I recently stumbled upon facebook's React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.</p>
|
||||
|
||||
<p><a href="http://blog.xenji.com/2013/06/facebooks-react-require-js.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="origins-of-react"></a>Origins of React <a class="hash-link" href="#origins-of-react">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> explained what differentiates React from other JavaScript libraries in <a href="http://facebook.github.io/react/blog/2013/06/05/why-react.html">a previous blog post</a>. <a href="http://leebyron.com/">Lee Byron</a> gives another perspective on Quora:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.</p>
|
||||
|
||||
<p>React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.</p>
|
||||
|
||||
<p><a href="http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+53
-2
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/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/2013/06/12/community-roundup.html">Community Round-up #1</a></h1>
|
||||
<p class="meta">June 12, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React was open sourced two weeks ago and it's time for a little round-up of what has been going on.</p>
|
||||
<h2><a class="anchor" name="khan-academy-question-editor"></a>Khan Academy Question Editor <a class="hash-link" href="#khan-academy-question-editor">#</a></h2>
|
||||
<p>It looks like <a href="http://benalpert.com/">Ben Alpert</a> is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (<a href="irc://chat.freenode.net/reactjs">#reactjs on Freenode</a>). Ben wrote about his experience using React:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.</p>
|
||||
|
||||
<p>The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
|
||||
<figure><a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html"><img src="/react/img/blog/khan-academy-editor.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="pimp-my-backbone.view-by-replacing-it-with-react"></a>Pimp my Backbone.View (by replacing it with React) <a class="hash-link" href="#pimp-my-backbone.view-by-replacing-it-with-react">#</a></h2>
|
||||
<p><a href="https://blog.mayflower.de/">Paul Seiffert</a> wrote a blog post that explains how to integrate React into Backbone applications.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.</p>
|
||||
|
||||
<p>As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.</p>
|
||||
|
||||
<p>The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.</p>
|
||||
|
||||
<p><a href="https://blog.mayflower.de/3937-Backbone-React.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="using-facebooks-react-with-require.js"></a>Using facebook's React with require.js <a class="hash-link" href="#using-facebooks-react-with-require.js">#</a></h2>
|
||||
<p><a href="http://blog.xenji.com/">Mario Mueller</a> wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I recently stumbled upon facebook's React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.</p>
|
||||
|
||||
<p><a href="http://blog.xenji.com/2013/06/facebooks-react-require-js.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="origins-of-react"></a>Origins of React <a class="hash-link" href="#origins-of-react">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> explained what differentiates React from other JavaScript libraries in <a href="http://facebook.github.io/react/blog/2013/06/05/why-react.html">a previous blog post</a>. <a href="http://leebyron.com/">Lee Byron</a> gives another perspective on Quora:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.</p>
|
||||
|
||||
<p>React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.</p>
|
||||
|
||||
<p><a href="http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</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>
|
||||
|
||||
+271
-47
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,275 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/02/18/react-conf-roundup-2015.html">React.js Conf Round-up 2015</a></h1>
|
||||
<p class="meta">February 18, 2015 by Steven Luscher</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.</p>
|
||||
<h2><a class="anchor" name="the-talks"></a>The talks <a class="hash-link" href="#the-talks">#</a></h2>
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-keynote"></a>Keynote <a class="hash-link" href="#talk-keynote">#</a></h3>
|
||||
<p>
|
||||
<strong>Tom Occhino</strong> opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM?
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-tweak"></a>Tweaking in real time <a class="hash-link" href="#talk-tweak">#</a></h3>
|
||||
<p>
|
||||
<strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using Webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-ast"></a>Abstract Syntax Trees <a class="hash-link" href="#talk-ast">#</a></h3>
|
||||
<p>
|
||||
<strong>Gurdas Nijor</strong> showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-relay-graphql"></a>Relay and GraphQL <a class="hash-link" href="#talk-relay-graphql">#</a></h3>
|
||||
<p>
|
||||
<strong>Daniel Schafer</strong> and <strong>Jing Chen</strong> showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-channels"></a>Channels <a class="hash-link" href="#talk-channels">#</a></h3>
|
||||
<p>
|
||||
<strong>James Long</strong> explores what might happen if we introduce channels, a new style of coordinating actions, to React.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-router"></a>React Router <a class="hash-link" href="#talk-router">#</a></h3>
|
||||
<p>
|
||||
<strong>Michael Jackson</strong> reminded us that URLs should be part of our design process, and showed us how <a href="https://github.com/rackt/react-router">react-router</a> can help to manage the transitions between them.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-full-stack-flux"></a>Full-stack Flux <a class="hash-link" href="#talk-full-stack-flux">#</a></h3>
|
||||
<p>
|
||||
<strong>Pete Hunt</strong> showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
|
||||
<p>
|
||||
<strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="http://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-intl"></a>FormatJS and react-intl <a class="hash-link" href="#talk-intl">#</a></h3>
|
||||
<p>
|
||||
<strong>Eric Ferraiuolo</strong> showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-hype"></a>Hype! <a class="hash-link" href="#talk-hype">#</a></h3>
|
||||
<p>
|
||||
<strong>Ryan Florence</strong> showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.”
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-native"></a>React Native <a class="hash-link" href="#talk-native">#</a></h3>
|
||||
<p>
|
||||
<strong>Christopher Chedeau</strong> showed us how to bring the developer experience of working with React on the web to native app development, using React Native.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-components"></a>Components <a class="hash-link" href="#talk-components">#</a></h3>
|
||||
<p>
|
||||
<strong>Andrew Rota</strong> explained how React and Web Components can work together, and how to avoid some common pitfalls.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-immutable"></a>Immutability <a class="hash-link" href="#talk-immutable">#</a></h3>
|
||||
<p>
|
||||
<strong>Lee Byron</strong> led a master-class on persistent immutable data structures, showing us the world of possibility that they can unlock for your software, and perhaps Javascript in general.
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-gibbon"></a>Beyond the DOM <a class="hash-link" href="#talk-gibbon">#</a></h3>
|
||||
<p>
|
||||
<strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-visualization"></a>Data Visualization <a class="hash-link" href="#talk-visualization">#</a></h3>
|
||||
<p>
|
||||
<strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-refracted"></a>React Refracted <a class="hash-link" href="#talk-refracted">#</a></h3>
|
||||
<p>
|
||||
<strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-flux-panel"></a>Flux Panel <a class="hash-link" href="#talk-flux-panel">#</a></h3>
|
||||
<p>
|
||||
<strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-communication"></a>Component communication <a class="hash-link" href="#talk-communication">#</a></h3>
|
||||
<p>
|
||||
<strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-typescript"></a>Flow and TypeScript <a class="hash-link" href="#talk-typescript">#</a></h3>
|
||||
<p>
|
||||
<strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<h3 style="margin-top:0"><a class="anchor" name="talk-qa"></a>Core Team Q&A <a class="hash-link" href="#talk-qa">#</a></h3>
|
||||
<p>
|
||||
<strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&A session.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<h2><a class="anchor" name="reactions"></a>Reactions <a class="hash-link" href="#reactions">#</a></h2>
|
||||
<p>The conference is over, but the conversation has just begun.</p>
|
||||
|
||||
<p><strong>Mihai Parparita</strong> detailed his efforts to <a href="http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html">hack his way to a React.js Conf ticket</a>; <strong>James Long</strong> blogged about <a href="http://jlongster.com/First-Impressions-using-React-Native">his first encounter with React Native</a>; <strong>Eric Florenzano</strong> talked about how he perceives the <a href="https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2">impact of Relay, GraphQL, and React Native</a> on software development; <strong>Margaret Staples</strong> blogged about her experience of <a href="http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html">being on-campus at Facebook HQ</a>; <strong>Jeff Barczewski</strong> tied his experience of attending the conference up with a bow in this <a href="http://codewinds.com/blog/2015-02-04-reactjs-conf.html">blog post filled with photos, videos, and links</a>; <strong>Kevin Old</strong> left us with <a href="http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html">his takeaways</a>; <strong>Paul Wittmann</strong> found React Native <a href="http://www.railslove.com/stories/fresh-on-our-radar-react-native">freshly on his radar</a>; and finally, undeterred by not being able to attend the conference in person, <strong>Justin Ball</strong> <a href="http://www.justinball.com/2015/02/03/i-didn't-attend-react.js-conf/">summarized it from afar</a>.</p>
|
||||
|
||||
<p>And, in case you missed a session, you can borrow <strong>Michael Chan’s</strong> <a href="http://chantastic.io/2015-reactjs-conf/">drawings</a>, <strong>Mihai Parparita’s</strong> <a href="https://quip.com/uJQeABv7nkFN">summary</a>, or <strong>Shaohua Zhou’s</strong> <a href="http://getshao.com/2015/01/29/react-js-conf-notes-day1/">day 1</a> / <a href="http://getshao.com/2015/01/29/react-js-conf-notes-day-2/">day 2</a> notes.</p>
|
||||
|
||||
<div class="skinny-row">
|
||||
<div class="skinny-col">
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Notes from <a href="https://twitter.com/dlschafer">@dlschafer</a> and <a href="https://twitter.com/jingc">@jingc</a>'s <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> talk "Data fetching for React applications at Facebook" <a href="http://t.co/IUZUbDCDMQ">pic.twitter.com/IUZUbDCDMQ</a></p>— Michael Chan (@chantastic) <a href="https://twitter.com/chantastic/status/560538533161472000">January 28, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>This is just magical (in the good way)… GraphQL + Relay is amazing. <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>— Chris Williams (@voodootikigod) <a href="https://twitter.com/voodootikigod/status/560533225395589120">January 28, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>These… these are my people. :) <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>— Thomas Beirne (@Beirnet) <a href="https://twitter.com/Beirnet/status/560317879501848576">January 28, 2015</a></blockquote>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Humbled by the React team and community. Found <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> very mindful, practical and just real.</p>— xnoɹǝʃ uɐıɹq (@brianleroux) <a href="https://twitter.com/brianleroux/status/560972130112655360">January 30, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.</p>— Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.</p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/561232290273980416">January 30, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>I really love the community shout outs by <a href="https://twitter.com/Vjeux">@vjeux</a> between talks at <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a>!</p>— Andrew Rota (@AndrewRota) <a href="https://twitter.com/AndrewRota/status/560927339522297856">January 29, 2015</a></blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<p><strong>All proceeds from React.js Conf 2015 were donated to the wonderful programs at <a href="http://code.org">code.org</a></strong>. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.</p>
|
||||
|
||||
<iframe width="305" height="171" src="https://www.youtube.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@@ -385,51 +654,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.12.2.mi
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/11/24/react-js-conf-updates.html">React.js Conf Updates</a></h1>
|
||||
<p class="meta">November 24, 2014 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Yesterday was the <a href="http://conf.reactjs.com/index.html">React.js Conf</a> call for presenters submission deadline. We were
|
||||
surprised to have received a total of <strong>one hundred talk proposals</strong> and were
|
||||
amazed that 600 people requested to be notified when ticket go on sale. This is incredible!</p>
|
||||
|
||||
<p>When we organized the conference, we decided to start small since this is the
|
||||
first React.js conference. Also, we weren't sure what level of demand to expect,
|
||||
so we planned for a single-track, two-day conference on Facebook's campus. The
|
||||
largest room available would accomodate 18 speaking slots and 200 attendees.
|
||||
The spacial configuration makes it difficult to add a second track and changing
|
||||
venues only two months in advance would be too difficult, so we are deciding to
|
||||
stick with the originally planned format and venue on Facebook's campus.</p>
|
||||
|
||||
<p>Unfortunately, this means that we can only accept a small number of the awesome
|
||||
conference talk proposals. In order to make sure attendees get a fair shot at
|
||||
registering, we're going to to sell tickets in three separate first-come,
|
||||
first-serve phases. <strong>Tickets will cost $200 regardless of which phase they are
|
||||
purchased from and all proceeds will go to charity</strong>.</p>
|
||||
|
||||
<ul>
|
||||
<li>Friday November 28th 2014 — Noon PST: First wave of tickets</li>
|
||||
<li>Friday December 5th 2014 — Noon PST: Second wave of tickets</li>
|
||||
<li>Friday December 12th 2014 — Noon PST: Third and last wave of tickets</li>
|
||||
</ul>
|
||||
|
||||
<p>We really do wish that everyone could attend React.js Conf, but in order to
|
||||
ensure a quality experience for those who attend, we feel it will be best to
|
||||
limit the size of the conference to what was originally planned for. This means
|
||||
that not everyone who wants to attend will be able to, and many talks that
|
||||
would be excellent contributions to the conference will have to be postponed
|
||||
until the next conference. All the talks will be recorded and put online shortly after.</p>
|
||||
|
||||
<p>We hope to see many of you at React.js Conf this January.</p>
|
||||
|
||||
<p>Sincerely,</p>
|
||||
|
||||
<p>React Core Team</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+47
-156
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,51 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/11/24/react-js-conf-updates.html">React.js Conf Updates</a></h1>
|
||||
<p class="meta">November 24, 2014 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Yesterday was the <a href="http://conf.reactjs.com/index.html">React.js Conf</a> call for presenters submission deadline. We were
|
||||
surprised to have received a total of <strong>one hundred talk proposals</strong> and were
|
||||
amazed that 600 people requested to be notified when ticket go on sale. This is incredible!</p>
|
||||
|
||||
<p>When we organized the conference, we decided to start small since this is the
|
||||
first React.js conference. Also, we weren't sure what level of demand to expect,
|
||||
so we planned for a single-track, two-day conference on Facebook's campus. The
|
||||
largest room available would accomodate 18 speaking slots and 200 attendees.
|
||||
The spacial configuration makes it difficult to add a second track and changing
|
||||
venues only two months in advance would be too difficult, so we are deciding to
|
||||
stick with the originally planned format and venue on Facebook's campus.</p>
|
||||
|
||||
<p>Unfortunately, this means that we can only accept a small number of the awesome
|
||||
conference talk proposals. In order to make sure attendees get a fair shot at
|
||||
registering, we're going to to sell tickets in three separate first-come,
|
||||
first-serve phases. <strong>Tickets will cost $200 regardless of which phase they are
|
||||
purchased from and all proceeds will go to charity</strong>.</p>
|
||||
|
||||
<ul>
|
||||
<li>Friday November 28th 2014 — Noon PST: First wave of tickets</li>
|
||||
<li>Friday December 5th 2014 — Noon PST: Second wave of tickets</li>
|
||||
<li>Friday December 12th 2014 — Noon PST: Third and last wave of tickets</li>
|
||||
</ul>
|
||||
|
||||
<p>We really do wish that everyone could attend React.js Conf, but in order to
|
||||
ensure a quality experience for those who attend, we feel it will be best to
|
||||
limit the size of the conference to what was originally planned for. This means
|
||||
that not everyone who wants to attend will be able to, and many talks that
|
||||
would be excellent contributions to the conference will have to be postponed
|
||||
until the next conference. All the talks will be recorded and put online shortly after.</p>
|
||||
|
||||
<p>We hope to see many of you at React.js Conf this January.</p>
|
||||
|
||||
<p>Sincerely,</p>
|
||||
|
||||
<p>React Core Team</p>
|
||||
|
||||
</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>
|
||||
@@ -458,160 +503,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/10/14/introducing-react-elements.html">Introducing React Elements</a></h1>
|
||||
<p class="meta">October 14, 2014 by Sebastian Markbåge</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the <code>ReactElement</code> type really FAST, <a href="http://facebook.github.io/jest/">jest unit testing</a> easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!</p>
|
||||
|
||||
<p>If you currently use JSX everywhere, you don't really have to do anything to get these benefits! The updated transformer will do it for you.</p>
|
||||
|
||||
<p>If you can't or don't want to use JSX, then please insert some hints for us. Add a <code>React.createFactory</code> call around your imported class when you require it:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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">createFactory</span><span class="p">(</span><span class="nx">require</span><span class="p">(</span><span class="s1">'MyComponent'</span><span class="p">));</span>
|
||||
</code></pre></div>
|
||||
<p>Everything is backwards compatible for now, and as always React will provide you with descriptive console messaging to help you upgrade.</p>
|
||||
|
||||
<p><code>ReactElement</code> is the primary API of React. Making it faster has shown to give us several times faster renders on common benchmarks. The API tweaks in this release helps us get there.</p>
|
||||
|
||||
<p>Continue reading if you want all the nitty gritty details...</p>
|
||||
<h2><a class="anchor" name="new-terminology"></a>New Terminology <a class="hash-link" href="#new-terminology">#</a></h2>
|
||||
<p>We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term <code>ReactElement</code> instead of <em>descriptor</em>. Likewise, we use the term <code>ReactNode</code> instead of <em>renderable</em>.</p>
|
||||
|
||||
<p><a href="https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589">See the full React terminology guide.</a></p>
|
||||
<h2><a class="anchor" name="creating-a-reactelement"></a>Creating a ReactElement <a class="hash-link" href="#creating-a-reactelement">#</a></h2>
|
||||
<p>We now expose an external API for programmatically creating a <code>ReactElement</code> object.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">reactElement</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">props</span><span class="p">,</span> <span class="nx">children</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>The <code>type</code> argument is either a string (HTML tag) or a class. It's a description of what tag/class is going to be rendered and what props it will contain. You can also create factory functions for specific types. This basically just provides the type argument for you:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">reactDivElement</span> <span class="o">=</span> <span class="nx">div</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="nx">children</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="deprecated-auto-generated-factories"></a>Deprecated: Auto-generated Factories <a class="hash-link" href="#deprecated-auto-generated-factories">#</a></h2>
|
||||
<p>Imagine if <code>React.createClass</code> was just a plain JavaScript class. If you call a class as a plain function you would call the component's constructor to create a Component instance, not a <code>ReactElement</code>:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">new</span> <span class="nx">MyComponent</span><span class="p">();</span> <span class="c1">// Component, not ReactElement</span>
|
||||
</code></pre></div>
|
||||
<p>React 0.11 gave you a factory function for free when you called <code>React.createClass</code>. This wrapped your internal class and then returned a <code>ReactElement</code> factory function for you.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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">createFactory</span><span class="p">(</span>
|
||||
<span class="kr">class</span> <span class="p">{</span>
|
||||
<span class="nx">render</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>In future versions of React, we want to be able to support pure classes without any special React dependencies. To prepare for that we're <a href="https://gist.github.com/sebmarkbage/d7bce729f38730399d28">deprecating the auto-generated factory</a>.</p>
|
||||
|
||||
<p>This is the biggest change to 0.12. Don't worry though. This functionality continues to work the same for this release, it just warns you if you're using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once.</p>
|
||||
<h2><a class="anchor" name="upgrading-to-0.12"></a>Upgrading to 0.12 <a class="hash-link" href="#upgrading-to-0.12">#</a></h2><h3><a class="anchor" name="react-with-jsx"></a>React With JSX <a class="hash-link" href="#react-with-jsx">#</a></h3>
|
||||
<p>If you use the React specific <a href="http://facebook.github.io/jsx/">JSX</a> transform, the upgrade path is simple. Just make sure you have React in scope.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// If you use node/browserify modules make sure</span>
|
||||
<span class="c1">// that you require React into scope.</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'</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>React's JSX will create the <code>ReactElement</code> for you. You can continue to use JSX with regular classes:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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="kd">var</span> <span class="nx">MyOtherComponent</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="o"><</span><span class="nx">MyComponent</span> <span class="nx">prop</span><span class="o">=</span><span class="s2">"value"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><em>NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use <a href="http://facebook.github.io/jsx/">the JSX spec</a> with a different transpiler for custom purposes.</em></p>
|
||||
<h3><a class="anchor" name="react-without-jsx"></a>React Without JSX <a class="hash-link" href="#react-without-jsx">#</a></h3>
|
||||
<p>If you don't use JSX and just call components as functions, you will need to explicitly create a factory before calling it:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponentClass</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="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="nx">MyComponentClass</span><span class="p">);</span> <span class="c1">// New step</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyOtherComponent</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="nx">MyComponent</span><span class="p">({</span> <span class="nx">prop</span><span class="o">:</span> <span class="s1">'value'</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>If you're using a module system, the recommended solution is to export the class and create the factory on the requiring side.</p>
|
||||
|
||||
<p>Your class creation is done just like before:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// MyComponent.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'</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">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">MyComponent</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>The other side uses <code>React.createFactory</code> after <code>require</code>ing the component class:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// MyOtherComponent.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'</span><span class="p">);</span>
|
||||
<span class="c1">// All you have to do to upgrade is wrap your requires like this:</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">createFactory</span><span class="p">(</span><span class="nx">require</span><span class="p">(</span><span class="s1">'MyComponent'</span><span class="p">));</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyOtherComponent</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="nx">MyComponent</span><span class="p">({</span> <span class="nx">prop</span><span class="o">:</span> <span class="s1">'value'</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">MyOtherComponent</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>You ONLY have to do this for custom classes. React still has built-in factories for common HTML elements.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyDOMComponent</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="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="nx">className</span><span class="o">:</span> <span class="s1">'foo'</span> <span class="p">});</span> <span class="c1">// still ok</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We realize that this is noisy. At least it's on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get <a href="https://gist.github.com/sebmarkbage/d7bce729f38730399d28">the other benefits</a> that this model unlocks.</p>
|
||||
<h3><a class="anchor" name="anti-pattern-exporting-factories"></a>Anti-Pattern: Exporting Factories <a class="hash-link" href="#anti-pattern-exporting-factories">#</a></h3>
|
||||
<p>If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Anti-pattern - Please, don't use</span>
|
||||
<span class="kd">function</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">spec</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">(</span><span class="nx">spec</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This makes your components incompatible with jest testing, consumers using JSX, third-party languages that implement their own optimized <code>ReactElement</code> creation, etc.</p>
|
||||
|
||||
<p>It also encourages you to put more logic into these helper functions. Something that another language, a compiler or a reader of your code couldn't reason about.</p>
|
||||
|
||||
<p>To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating <code>ReactElement</code>s.</p>
|
||||
<h2><a class="anchor" name="third-party-languages"></a>Third-party Languages <a class="hash-link" href="#third-party-languages">#</a></h2>
|
||||
<p>The signature of a <code>ReactElement</code> is something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||||
<span class="nx">type</span> <span class="o">:</span> <span class="nx">string</span> <span class="o">|</span> <span class="kr">class</span><span class="p">,</span>
|
||||
<span class="nx">props</span> <span class="o">:</span> <span class="p">{</span> <span class="nx">children</span><span class="p">,</span> <span class="nx">className</span><span class="p">,</span> <span class="nx">etc</span><span class="p">.</span> <span class="p">},</span>
|
||||
<span class="nx">key</span> <span class="o">:</span> <span class="nx">string</span> <span class="o">|</span> <span class="kr">boolean</span> <span class="o">|</span> <span class="nx">number</span> <span class="o">|</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">ref</span> <span class="o">:</span> <span class="nx">string</span> <span class="o">|</span> <span class="kc">null</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Languages with static typing that don't need validation (e.g. <a href="https://github.com/swannodette/om">Om in ClojureScript</a>), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React.</p>
|
||||
<h2><a class="anchor" name="your-thoughts-and-ideas"></a>Your Thoughts and Ideas <a class="hash-link" href="#your-thoughts-and-ideas">#</a></h2>
|
||||
<p>We'd love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// MyOtherComponent.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'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'MyComponent'</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyOtherComponent</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="nx">type</span><span class="o">:</span> <span class="nx">MyComponent</span><span class="p">,</span> <span class="nx">props</span><span class="o">:</span> <span class="p">{</span> <span class="nx">prop</span><span class="o">:</span> <span class="s1">'value'</span> <span class="p">}</span> <span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">MyOtherComponent</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>This moves the noise down into the render method though. It also doesn't provide a hook for dynamic validation/type checking so you'll need some other way to verify that it's safe.</p>
|
||||
|
||||
<p><em>NOTE: This won't work in this version of React because it's conflicting with other legacy APIs that we're deprecating. (We temporarily add a <code>element._isReactElement = true</code> marker on the object.)</em></p>
|
||||
<h2><a class="anchor" name="the-next-step-es6-classes"></a>The Next Step: ES6 Classes <a class="hash-link" href="#the-next-step-es6-classes">#</a></h2>
|
||||
<p>After 0.12 we'll begin work on moving to ES6 classes. We will still support <code>React.createClass</code> as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this:</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">MyComponent</span> <span class="p">{</span>
|
||||
<span class="nx">render</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>This upcoming release is a stepping stone to make it as easy as this. Thanks for your support.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+156
-87
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,160 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/10/14/introducing-react-elements.html">Introducing React Elements</a></h1>
|
||||
<p class="meta">October 14, 2014 by Sebastian Markbåge</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the <code>ReactElement</code> type really FAST, <a href="http://facebook.github.io/jest/">jest unit testing</a> easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!</p>
|
||||
|
||||
<p>If you currently use JSX everywhere, you don't really have to do anything to get these benefits! The updated transformer will do it for you.</p>
|
||||
|
||||
<p>If you can't or don't want to use JSX, then please insert some hints for us. Add a <code>React.createFactory</code> call around your imported class when you require it:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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">createFactory</span><span class="p">(</span><span class="nx">require</span><span class="p">(</span><span class="s1">'MyComponent'</span><span class="p">));</span>
|
||||
</code></pre></div>
|
||||
<p>Everything is backwards compatible for now, and as always React will provide you with descriptive console messaging to help you upgrade.</p>
|
||||
|
||||
<p><code>ReactElement</code> is the primary API of React. Making it faster has shown to give us several times faster renders on common benchmarks. The API tweaks in this release helps us get there.</p>
|
||||
|
||||
<p>Continue reading if you want all the nitty gritty details...</p>
|
||||
<h2><a class="anchor" name="new-terminology"></a>New Terminology <a class="hash-link" href="#new-terminology">#</a></h2>
|
||||
<p>We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term <code>ReactElement</code> instead of <em>descriptor</em>. Likewise, we use the term <code>ReactNode</code> instead of <em>renderable</em>.</p>
|
||||
|
||||
<p><a href="https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589">See the full React terminology guide.</a></p>
|
||||
<h2><a class="anchor" name="creating-a-reactelement"></a>Creating a ReactElement <a class="hash-link" href="#creating-a-reactelement">#</a></h2>
|
||||
<p>We now expose an external API for programmatically creating a <code>ReactElement</code> object.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">reactElement</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">props</span><span class="p">,</span> <span class="nx">children</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>The <code>type</code> argument is either a string (HTML tag) or a class. It's a description of what tag/class is going to be rendered and what props it will contain. You can also create factory functions for specific types. This basically just provides the type argument for you:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">reactDivElement</span> <span class="o">=</span> <span class="nx">div</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="nx">children</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="deprecated-auto-generated-factories"></a>Deprecated: Auto-generated Factories <a class="hash-link" href="#deprecated-auto-generated-factories">#</a></h2>
|
||||
<p>Imagine if <code>React.createClass</code> was just a plain JavaScript class. If you call a class as a plain function you would call the component's constructor to create a Component instance, not a <code>ReactElement</code>:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">new</span> <span class="nx">MyComponent</span><span class="p">();</span> <span class="c1">// Component, not ReactElement</span>
|
||||
</code></pre></div>
|
||||
<p>React 0.11 gave you a factory function for free when you called <code>React.createClass</code>. This wrapped your internal class and then returned a <code>ReactElement</code> factory function for you.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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">createFactory</span><span class="p">(</span>
|
||||
<span class="kr">class</span> <span class="p">{</span>
|
||||
<span class="nx">render</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>In future versions of React, we want to be able to support pure classes without any special React dependencies. To prepare for that we're <a href="https://gist.github.com/sebmarkbage/d7bce729f38730399d28">deprecating the auto-generated factory</a>.</p>
|
||||
|
||||
<p>This is the biggest change to 0.12. Don't worry though. This functionality continues to work the same for this release, it just warns you if you're using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once.</p>
|
||||
<h2><a class="anchor" name="upgrading-to-0.12"></a>Upgrading to 0.12 <a class="hash-link" href="#upgrading-to-0.12">#</a></h2><h3><a class="anchor" name="react-with-jsx"></a>React With JSX <a class="hash-link" href="#react-with-jsx">#</a></h3>
|
||||
<p>If you use the React specific <a href="http://facebook.github.io/jsx/">JSX</a> transform, the upgrade path is simple. Just make sure you have React in scope.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// If you use node/browserify modules make sure</span>
|
||||
<span class="c1">// that you require React into scope.</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'</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>React's JSX will create the <code>ReactElement</code> for you. You can continue to use JSX with regular classes:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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="kd">var</span> <span class="nx">MyOtherComponent</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="o"><</span><span class="nx">MyComponent</span> <span class="nx">prop</span><span class="o">=</span><span class="s2">"value"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><em>NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use <a href="http://facebook.github.io/jsx/">the JSX spec</a> with a different transpiler for custom purposes.</em></p>
|
||||
<h3><a class="anchor" name="react-without-jsx"></a>React Without JSX <a class="hash-link" href="#react-without-jsx">#</a></h3>
|
||||
<p>If you don't use JSX and just call components as functions, you will need to explicitly create a factory before calling it:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponentClass</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="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="nx">MyComponentClass</span><span class="p">);</span> <span class="c1">// New step</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyOtherComponent</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="nx">MyComponent</span><span class="p">({</span> <span class="nx">prop</span><span class="o">:</span> <span class="s1">'value'</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>If you're using a module system, the recommended solution is to export the class and create the factory on the requiring side.</p>
|
||||
|
||||
<p>Your class creation is done just like before:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// MyComponent.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'</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">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">MyComponent</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>The other side uses <code>React.createFactory</code> after <code>require</code>ing the component class:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// MyOtherComponent.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'</span><span class="p">);</span>
|
||||
<span class="c1">// All you have to do to upgrade is wrap your requires like this:</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">createFactory</span><span class="p">(</span><span class="nx">require</span><span class="p">(</span><span class="s1">'MyComponent'</span><span class="p">));</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyOtherComponent</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="nx">MyComponent</span><span class="p">({</span> <span class="nx">prop</span><span class="o">:</span> <span class="s1">'value'</span> <span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">MyOtherComponent</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>You ONLY have to do this for custom classes. React still has built-in factories for common HTML elements.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyDOMComponent</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="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="nx">className</span><span class="o">:</span> <span class="s1">'foo'</span> <span class="p">});</span> <span class="c1">// still ok</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We realize that this is noisy. At least it's on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get <a href="https://gist.github.com/sebmarkbage/d7bce729f38730399d28">the other benefits</a> that this model unlocks.</p>
|
||||
<h3><a class="anchor" name="anti-pattern-exporting-factories"></a>Anti-Pattern: Exporting Factories <a class="hash-link" href="#anti-pattern-exporting-factories">#</a></h3>
|
||||
<p>If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Anti-pattern - Please, don't use</span>
|
||||
<span class="kd">function</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">spec</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span><span class="p">(</span><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">(</span><span class="nx">spec</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This makes your components incompatible with jest testing, consumers using JSX, third-party languages that implement their own optimized <code>ReactElement</code> creation, etc.</p>
|
||||
|
||||
<p>It also encourages you to put more logic into these helper functions. Something that another language, a compiler or a reader of your code couldn't reason about.</p>
|
||||
|
||||
<p>To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating <code>ReactElement</code>s.</p>
|
||||
<h2><a class="anchor" name="third-party-languages"></a>Third-party Languages <a class="hash-link" href="#third-party-languages">#</a></h2>
|
||||
<p>The signature of a <code>ReactElement</code> is something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||||
<span class="nx">type</span> <span class="o">:</span> <span class="nx">string</span> <span class="o">|</span> <span class="kr">class</span><span class="p">,</span>
|
||||
<span class="nx">props</span> <span class="o">:</span> <span class="p">{</span> <span class="nx">children</span><span class="p">,</span> <span class="nx">className</span><span class="p">,</span> <span class="nx">etc</span><span class="p">.</span> <span class="p">},</span>
|
||||
<span class="nx">key</span> <span class="o">:</span> <span class="nx">string</span> <span class="o">|</span> <span class="kr">boolean</span> <span class="o">|</span> <span class="nx">number</span> <span class="o">|</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">ref</span> <span class="o">:</span> <span class="nx">string</span> <span class="o">|</span> <span class="kc">null</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Languages with static typing that don't need validation (e.g. <a href="https://github.com/swannodette/om">Om in ClojureScript</a>), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React.</p>
|
||||
<h2><a class="anchor" name="your-thoughts-and-ideas"></a>Your Thoughts and Ideas <a class="hash-link" href="#your-thoughts-and-ideas">#</a></h2>
|
||||
<p>We'd love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// MyOtherComponent.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'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'MyComponent'</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyOtherComponent</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="nx">type</span><span class="o">:</span> <span class="nx">MyComponent</span><span class="p">,</span> <span class="nx">props</span><span class="o">:</span> <span class="p">{</span> <span class="nx">prop</span><span class="o">:</span> <span class="s1">'value'</span> <span class="p">}</span> <span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">MyOtherComponent</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>This moves the noise down into the render method though. It also doesn't provide a hook for dynamic validation/type checking so you'll need some other way to verify that it's safe.</p>
|
||||
|
||||
<p><em>NOTE: This won't work in this version of React because it's conflicting with other legacy APIs that we're deprecating. (We temporarily add a <code>element._isReactElement = true</code> marker on the object.)</em></p>
|
||||
<h2><a class="anchor" name="the-next-step-es6-classes"></a>The Next Step: ES6 Classes <a class="hash-link" href="#the-next-step-es6-classes">#</a></h2>
|
||||
<p>After 0.12 we'll begin work on moving to ES6 classes. We will still support <code>React.createClass</code> as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this:</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">MyComponent</span> <span class="p">{</span>
|
||||
<span class="nx">render</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>This upcoming release is a stepping stone to make it as easy as this. Thanks for your support.</p>
|
||||
|
||||
</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>
|
||||
@@ -528,91 +682,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.2.mi
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/08/03/community-roundup-21.html">Community Round-up #21</a></h1>
|
||||
<p class="meta">August 3, 2014 by Lou Husson</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<h2><a class="anchor" name="react-router"></a>React Router <a class="hash-link" href="#react-router">#</a></h2>
|
||||
<p><a href="http://ryanflorence.com/">Ryan Florence</a> and <a href="http://twitter.com/mjackson">Michael Jackson</a> ported Ember's router to React in a project called <a href="https://github.com/rackt/react-router">React Router</a>. This is a very good example of both communities working together to make the web better!</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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">Routes</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">App</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"about"</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}</span><span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"users"</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">Users</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"user"</span> <span class="nx">path</span><span class="o">=</span><span class="s2">"/user/:userId"</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">User</span><span class="p">}</span><span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/Route></span>
|
||||
<span class="o"><</span><span class="err">/Route></span>
|
||||
<span class="o"><</span><span class="err">/Routes></span>
|
||||
<span class="p">),</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="going-big-with-react"></a>Going Big with React <a class="hash-link" href="#going-big-with-react">#</a></h2>
|
||||
<p>Areeb Malik, from Facebook, talks about his experience using React. "On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test Javascript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale"</p>
|
||||
|
||||
<p><a href="https://skillsmatter.com/skillscasts/5429-going-big-with-react"><img src="/react/img/blog/skills-matter.png" alt=""></a></p>
|
||||
|
||||
<!--
|
||||
<iframe allowfullscreen="" data-progress="true" frameborder="0" height="390" id="vimeo-player" mozallowfullscreen="" src="//player.vimeo.com/video/100245392?api=1&title=0" webkitallowfullscreen="" width="640"></iframe>
|
||||
-->
|
||||
<h2><a class="anchor" name="what-is-react"></a>What is React? <a class="hash-link" href="#what-is-react">#</a></h2>
|
||||
<p><a href="http://www.funnyant.com/author/admin/">Craig McKeachie</a> author of <a href="http://www.funnyant.com/javascript-framework-guide/">Javascript Framework Guide</a> wrote an excellent news named <a href="http://www.funnyant.com/reactjs-what-is-it/">"What is React.js? Another Template Library?</a></p>
|
||||
|
||||
<ul>
|
||||
<li>Is React a template library?</li>
|
||||
<li>Is React similar to Web Components?</li>
|
||||
<li>Are the Virtual DOM and Shadow DOM the same?</li>
|
||||
<li>Can React be used with other JavaScript MVC frameworks?</li>
|
||||
<li>Who uses React?</li>
|
||||
<li>Is React a premature optimization if you aren’t Facebook or Instagram?</li>
|
||||
<li>Can I work with designers?</li>
|
||||
<li>Will React hurt my search engine optimizations (SEO)?</li>
|
||||
<li>Is React a framework for building applications or a library with one feature?</li>
|
||||
<li>Are components a better way to build an application?</li>
|
||||
<li>Can I build something complex with React?</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="referencing-dynamic-children"></a>Referencing Dynamic Children <a class="hash-link" href="#referencing-dynamic-children">#</a></h2>
|
||||
<p>While Matt Zabriskie was working on <a href="https://www.npmjs.org/package/react-tabs">react-tabs</a> he discovered how to use React.Children.map and React.addons.cloneWithProps in order to <a href="http://www.mattzabriskie.com/blog/react-referencing-dynamic-children">reference dynamic children</a>.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">App</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="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</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">children</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">cloneWithProps</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">ref</span><span class="o">:</span> <span class="s1">'child-'</span> <span class="o">+</span> <span class="nx">index</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="p">{</span><span class="nx">children</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="jsx-with-sweet.js-using-readtables"></a>JSX with Sweet.js using Readtables <a class="hash-link" href="#jsx-with-sweet.js-using-readtables">#</a></h2>
|
||||
<p>Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to <a href="http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables">compile JSX with Sweet.js using Readtables</a>.</p>
|
||||
|
||||
<p><a href="http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables"><img src="/react/img/blog/sweet-jsx.png" alt=""></a></p>
|
||||
<h2><a class="anchor" name="first-look-getting-started-with-react"></a>First Look: Getting Started with React <a class="hash-link" href="#first-look-getting-started-with-react">#</a></h2>
|
||||
<p><a href="http://modernweb.com/authors/kirill-buga/">Kirill Buga</a> wrote an article on Modern Web explaining how <a href="http://modernweb.com/2014/07/23/getting-started-reactjs/">React is different from traditional MVC</a> used by most JavaScript applications</p>
|
||||
|
||||
<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="/react/img/blog/first-look.png" /></a></figure>
|
||||
<h2><a class="anchor" name="react-draggable"></a>React Draggable <a class="hash-link" href="#react-draggable">#</a></h2>
|
||||
<p><a href="https://github.com/mzabriskie">Matt Zabriskie</a> released a <a href="https://github.com/mzabriskie/react-draggable">project</a> to make your react components draggable.</p>
|
||||
|
||||
<p><a href="http://mzabriskie.github.io/react-draggable/example/"><img src="/react/img/blog/react-draggable.png" alt=""></a></p>
|
||||
<h2><a class="anchor" name="html-parser2-react"></a>HTML Parser2 React <a class="hash-link" href="#html-parser2-react">#</a></h2>
|
||||
<p><a href="http://browniefed.github.io/">Jason Brown</a> adapted htmlparser2 to React: <a href="https://www.npmjs.org/package/htmlparser2-react">htmlparser2-react</a>. That allows you to convert raw HTML to the virtual DOM.
|
||||
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">'<div data-id="1" class="hey this is a class" '</span> <span class="o">+</span>
|
||||
<span class="s1">'style="width:100%;height: 100%;"><article id="this-article">'</span> <span class="o">+</span>
|
||||
<span class="s1">'<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>'</span> <span class="o">+</span>
|
||||
<span class="s1">'<li>3</li></ul></div></article></div>'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">parsedComponent</span> <span class="o">=</span> <span class="nx">reactParser</span><span class="p">(</span><span class="nx">html</span><span class="p">,</span> <span class="nx">React</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="building-uis-with-react"></a>Building UIs with React <a class="hash-link" href="#building-uis-with-react">#</a></h2>
|
||||
<p>If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
|
||||
<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>We shipped reddit's first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process. <a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>— Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>— spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+87
-137
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,91 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/08/03/community-roundup-21.html">Community Round-up #21</a></h1>
|
||||
<p class="meta">August 3, 2014 by Lou Husson</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<h2><a class="anchor" name="react-router"></a>React Router <a class="hash-link" href="#react-router">#</a></h2>
|
||||
<p><a href="http://ryanflorence.com/">Ryan Florence</a> and <a href="http://twitter.com/mjackson">Michael Jackson</a> ported Ember's router to React in a project called <a href="https://github.com/rackt/react-router">React Router</a>. This is a very good example of both communities working together to make the web better!</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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">Routes</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">App</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"about"</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}</span><span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"users"</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">Users</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"user"</span> <span class="nx">path</span><span class="o">=</span><span class="s2">"/user/:userId"</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">User</span><span class="p">}</span><span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/Route></span>
|
||||
<span class="o"><</span><span class="err">/Route></span>
|
||||
<span class="o"><</span><span class="err">/Routes></span>
|
||||
<span class="p">),</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="going-big-with-react"></a>Going Big with React <a class="hash-link" href="#going-big-with-react">#</a></h2>
|
||||
<p>Areeb Malik, from Facebook, talks about his experience using React. "On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test Javascript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale"</p>
|
||||
|
||||
<p><a href="https://skillsmatter.com/skillscasts/5429-going-big-with-react"><img src="/react/img/blog/skills-matter.png" alt=""></a></p>
|
||||
|
||||
<!--
|
||||
<iframe allowfullscreen="" data-progress="true" frameborder="0" height="390" id="vimeo-player" mozallowfullscreen="" src="//player.vimeo.com/video/100245392?api=1&title=0" webkitallowfullscreen="" width="640"></iframe>
|
||||
-->
|
||||
<h2><a class="anchor" name="what-is-react"></a>What is React? <a class="hash-link" href="#what-is-react">#</a></h2>
|
||||
<p><a href="http://www.funnyant.com/author/admin/">Craig McKeachie</a> author of <a href="http://www.funnyant.com/javascript-framework-guide/">Javascript Framework Guide</a> wrote an excellent news named <a href="http://www.funnyant.com/reactjs-what-is-it/">"What is React.js? Another Template Library?</a></p>
|
||||
|
||||
<ul>
|
||||
<li>Is React a template library?</li>
|
||||
<li>Is React similar to Web Components?</li>
|
||||
<li>Are the Virtual DOM and Shadow DOM the same?</li>
|
||||
<li>Can React be used with other JavaScript MVC frameworks?</li>
|
||||
<li>Who uses React?</li>
|
||||
<li>Is React a premature optimization if you aren’t Facebook or Instagram?</li>
|
||||
<li>Can I work with designers?</li>
|
||||
<li>Will React hurt my search engine optimizations (SEO)?</li>
|
||||
<li>Is React a framework for building applications or a library with one feature?</li>
|
||||
<li>Are components a better way to build an application?</li>
|
||||
<li>Can I build something complex with React?</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="referencing-dynamic-children"></a>Referencing Dynamic Children <a class="hash-link" href="#referencing-dynamic-children">#</a></h2>
|
||||
<p>While Matt Zabriskie was working on <a href="https://www.npmjs.org/package/react-tabs">react-tabs</a> he discovered how to use React.Children.map and React.addons.cloneWithProps in order to <a href="http://www.mattzabriskie.com/blog/react-referencing-dynamic-children">reference dynamic children</a>.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">App</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="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</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">children</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">cloneWithProps</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">ref</span><span class="o">:</span> <span class="s1">'child-'</span> <span class="o">+</span> <span class="nx">index</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="p">{</span><span class="nx">children</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="jsx-with-sweet.js-using-readtables"></a>JSX with Sweet.js using Readtables <a class="hash-link" href="#jsx-with-sweet.js-using-readtables">#</a></h2>
|
||||
<p>Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to <a href="http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables">compile JSX with Sweet.js using Readtables</a>.</p>
|
||||
|
||||
<p><a href="http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables"><img src="/react/img/blog/sweet-jsx.png" alt=""></a></p>
|
||||
<h2><a class="anchor" name="first-look-getting-started-with-react"></a>First Look: Getting Started with React <a class="hash-link" href="#first-look-getting-started-with-react">#</a></h2>
|
||||
<p><a href="http://modernweb.com/authors/kirill-buga/">Kirill Buga</a> wrote an article on Modern Web explaining how <a href="http://modernweb.com/2014/07/23/getting-started-reactjs/">React is different from traditional MVC</a> used by most JavaScript applications</p>
|
||||
|
||||
<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="/react/img/blog/first-look.png" /></a></figure>
|
||||
<h2><a class="anchor" name="react-draggable"></a>React Draggable <a class="hash-link" href="#react-draggable">#</a></h2>
|
||||
<p><a href="https://github.com/mzabriskie">Matt Zabriskie</a> released a <a href="https://github.com/mzabriskie/react-draggable">project</a> to make your react components draggable.</p>
|
||||
|
||||
<p><a href="http://mzabriskie.github.io/react-draggable/example/"><img src="/react/img/blog/react-draggable.png" alt=""></a></p>
|
||||
<h2><a class="anchor" name="html-parser2-react"></a>HTML Parser2 React <a class="hash-link" href="#html-parser2-react">#</a></h2>
|
||||
<p><a href="http://browniefed.github.io/">Jason Brown</a> adapted htmlparser2 to React: <a href="https://www.npmjs.org/package/htmlparser2-react">htmlparser2-react</a>. That allows you to convert raw HTML to the virtual DOM.
|
||||
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">'<div data-id="1" class="hey this is a class" '</span> <span class="o">+</span>
|
||||
<span class="s1">'style="width:100%;height: 100%;"><article id="this-article">'</span> <span class="o">+</span>
|
||||
<span class="s1">'<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>'</span> <span class="o">+</span>
|
||||
<span class="s1">'<li>3</li></ul></div></article></div>'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">parsedComponent</span> <span class="o">=</span> <span class="nx">reactParser</span><span class="p">(</span><span class="nx">html</span><span class="p">,</span> <span class="nx">React</span><span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="building-uis-with-react"></a>Building UIs with React <a class="hash-link" href="#building-uis-with-react">#</a></h2>
|
||||
<p>If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
|
||||
<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>We shipped reddit's first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process. <a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>— Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>— spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
|
||||
|
||||
</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>
|
||||
@@ -391,141 +476,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
|
||||
<li>Added support for namespaces, eg <code><Components.Checkbox /></code></li>
|
||||
<li>JSXTransformer
|
||||
|
||||
<ul>
|
||||
<li>Enable the same <code>harmony</code> features available in the command line with <code><script type="text/jsx;harmony=true"></code></li>
|
||||
<li>Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)</li>
|
||||
<li>Fixed a bug preventing sourcemaps from working in Firefox</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools-module"></a>React Tools Module <a class="hash-link" href="#react-tools-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Improved readme with usage and API information</li>
|
||||
<li>Improved ES6 transforms available with <code>--harmony</code> option</li>
|
||||
<li>Added <code>--source-map-inline</code> option to the <code>jsx</code> executable</li>
|
||||
<li>New <code>transformWithDetails</code> API which gives access to the raw sourcemap data</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></h1>
|
||||
<p class="meta">July 13, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.</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.11.0-rc1.js">http://fb.me/react-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.11.0-rc1.min.js">http://fb.me/react-0.11.0-rc1.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.11.0-rc1.js">http://fb.me/react-with-addons-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc1.min.js">http://fb.me/react-with-addons-0.11.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.11.0-rc1.js">http://fb.me/JSXTransformer-0.11.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.11.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="getdefaultprops"></a><code>getDefaultProps</code> <a class="hash-link" href="#getdefaultprops">#</a></h2>
|
||||
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
|
||||
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
|
||||
<p>Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <code><div/></code> or <code><span/></code>. Some people even got clever and started returning <code><noscript/></code> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning <code>null</code> is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code><noscript></code> element, though in the future we hope to not put anything in the document. In the mean time, <code><noscript></code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</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">if</span> <span class="p">(</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">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">span</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</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">if</span> <span class="p">(</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">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
|
||||
<p>Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code><Namespace.Component/></code>.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'UI'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UILabel</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Label</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="o"><</span><span class="nx">UILayout</span><span class="o">><</span><span class="nx">UIButton</span> <span class="o">/><</span><span class="nx">UILabel</span><span class="o">></span><span class="nx">text</span><span class="o"><</span><span class="err">/UILabel></UILayout>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'UI'</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="o"><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="o">><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span> <span class="o">/><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Label</span><span class="o">></span><span class="nx">text</span><span class="o"><</span><span class="err">/UI.Label></UI.Layout>;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
|
||||
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">'Enter'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle enter key</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">' '</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle spacebar</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">'ArrowLeft'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle left arrow</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>Keyboard and mouse events also now include a normalized <code>e.getModifierState()</code> that works consistently across browsers.</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><code>getDefaultProps()</code> is now called once per class and shared across all instances</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Rendering to <code>null</code></li>
|
||||
<li>Keyboard events include normalized <code>e.key</code> and <code>e.getModifierState()</code> properties</li>
|
||||
<li>New normalized <code>onBeforeInput</code> event</li>
|
||||
<li><code>React.Children.count</code> has been added as a helper for counting the number of children</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Re-renders are batched in more cases</li>
|
||||
<li>Events: <code>e.view</code> properly normalized</li>
|
||||
<li>Added Support for more HTML attributes (<code>coords</code>, <code>crossOrigin</code>, <code>download</code>, <code>hrefLang</code>, <code>mediaGroup</code>, <code>muted</code>, <code>scrolling</code>, <code>shape</code>, <code>srcSet</code>, <code>start</code>, <code>useMap</code>)</li>
|
||||
<li>Improved SVG support
|
||||
|
||||
<ul>
|
||||
<li>Changing <code>className</code> on a mounted SVG component now works correctly</li>
|
||||
<li>Added support for elements <code>mask</code> and <code>tspan</code></li>
|
||||
<li>Added support for attributes <code>dx</code>, <code>dy</code>, <code>fillOpacity</code>, <code>fontFamily</code>, <code>fontSize</code>, <code>markerEnd</code>, <code>markerMid</code>, <code>markerStart</code>, <code>opacity</code>, <code>patternContentUnits</code>, <code>patternUnits</code>, <code>preserveAspectRatio</code>, <code>strokeDasharray</code>, <code>strokeOpacity</code></li>
|
||||
</ul></li>
|
||||
<li>CSS property names with vendor prefixes (<code>Webkit</code>, <code>ms</code>, <code>Moz</code>, <code>O</code>) are now handled properly</li>
|
||||
<li>Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)</li>
|
||||
<li><code>img</code> event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same <code>data-reactid</code>"</li>
|
||||
<li>Added explicit warning when missing polyfills</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>PureRenderMixin</li>
|
||||
<li>Perf: a new set of tools to help with performance analysis</li>
|
||||
<li>Update: New <code>$apply</code> command to transform values</li>
|
||||
<li>TransitionGroup bug fixes with null elements, Android</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-npm-module"></a>React NPM Module <a class="hash-link" href="#react-npm-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Now includes the pre-built packages under <code>dist/</code>.</li>
|
||||
<li><code>envify</code> is properly listed as a dependency instead of a peer dependency</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for namespaces, eg <code><Components.Checkbox /></code></li>
|
||||
<li>JSXTransformer
|
||||
|
||||
<ul>
|
||||
<li>Enable the same <code>harmony</code> features available in the command line with <code><script type="text/jsx;harmony=true"></code></li>
|
||||
<li>Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)</li>
|
||||
|
||||
+137
-39
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,141 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></h1>
|
||||
<p class="meta">July 13, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.</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.11.0-rc1.js">http://fb.me/react-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.11.0-rc1.min.js">http://fb.me/react-0.11.0-rc1.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.11.0-rc1.js">http://fb.me/react-with-addons-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc1.min.js">http://fb.me/react-with-addons-0.11.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.11.0-rc1.js">http://fb.me/JSXTransformer-0.11.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.11.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="getdefaultprops"></a><code>getDefaultProps</code> <a class="hash-link" href="#getdefaultprops">#</a></h2>
|
||||
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
|
||||
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
|
||||
<p>Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <code><div/></code> or <code><span/></code>. Some people even got clever and started returning <code><noscript/></code> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning <code>null</code> is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code><noscript></code> element, though in the future we hope to not put anything in the document. In the mean time, <code><noscript></code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</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">if</span> <span class="p">(</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">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">span</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</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">if</span> <span class="p">(</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">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
|
||||
<p>Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code><Namespace.Component/></code>.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'UI'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UILabel</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Label</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="o"><</span><span class="nx">UILayout</span><span class="o">><</span><span class="nx">UIButton</span> <span class="o">/><</span><span class="nx">UILabel</span><span class="o">></span><span class="nx">text</span><span class="o"><</span><span class="err">/UILabel></UILayout>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'UI'</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="o"><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="o">><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span> <span class="o">/><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Label</span><span class="o">></span><span class="nx">text</span><span class="o"><</span><span class="err">/UI.Label></UI.Layout>;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
|
||||
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">'Enter'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle enter key</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">' '</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle spacebar</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">'ArrowLeft'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle left arrow</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div>
|
||||
<p>Keyboard and mouse events also now include a normalized <code>e.getModifierState()</code> that works consistently across browsers.</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><code>getDefaultProps()</code> is now called once per class and shared across all instances</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Rendering to <code>null</code></li>
|
||||
<li>Keyboard events include normalized <code>e.key</code> and <code>e.getModifierState()</code> properties</li>
|
||||
<li>New normalized <code>onBeforeInput</code> event</li>
|
||||
<li><code>React.Children.count</code> has been added as a helper for counting the number of children</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Re-renders are batched in more cases</li>
|
||||
<li>Events: <code>e.view</code> properly normalized</li>
|
||||
<li>Added Support for more HTML attributes (<code>coords</code>, <code>crossOrigin</code>, <code>download</code>, <code>hrefLang</code>, <code>mediaGroup</code>, <code>muted</code>, <code>scrolling</code>, <code>shape</code>, <code>srcSet</code>, <code>start</code>, <code>useMap</code>)</li>
|
||||
<li>Improved SVG support
|
||||
|
||||
<ul>
|
||||
<li>Changing <code>className</code> on a mounted SVG component now works correctly</li>
|
||||
<li>Added support for elements <code>mask</code> and <code>tspan</code></li>
|
||||
<li>Added support for attributes <code>dx</code>, <code>dy</code>, <code>fillOpacity</code>, <code>fontFamily</code>, <code>fontSize</code>, <code>markerEnd</code>, <code>markerMid</code>, <code>markerStart</code>, <code>opacity</code>, <code>patternContentUnits</code>, <code>patternUnits</code>, <code>preserveAspectRatio</code>, <code>strokeDasharray</code>, <code>strokeOpacity</code></li>
|
||||
</ul></li>
|
||||
<li>CSS property names with vendor prefixes (<code>Webkit</code>, <code>ms</code>, <code>Moz</code>, <code>O</code>) are now handled properly</li>
|
||||
<li>Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)</li>
|
||||
<li><code>img</code> event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same <code>data-reactid</code>"</li>
|
||||
<li>Added explicit warning when missing polyfills</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>PureRenderMixin</li>
|
||||
<li>Perf: a new set of tools to help with performance analysis</li>
|
||||
<li>Update: New <code>$apply</code> command to transform values</li>
|
||||
<li>TransitionGroup bug fixes with null elements, Android</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-npm-module"></a>React NPM Module <a class="hash-link" href="#react-npm-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Now includes the pre-built packages under <code>dist/</code>.</li>
|
||||
<li><code>envify</code> is properly listed as a dependency instead of a peer dependency</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for namespaces, eg <code><Components.Checkbox /></code></li>
|
||||
<li>JSXTransformer
|
||||
|
||||
<ul>
|
||||
<li>Enable the same <code>harmony</code> features available in the command line with <code><script type="text/jsx;harmony=true"></code></li>
|
||||
<li>Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)</li>
|
||||
<li>Fixed a bug preventing sourcemaps from working in Firefox</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools-module"></a>React Tools Module <a class="hash-link" href="#react-tools-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Improved readme with usage and API information</li>
|
||||
<li>Improved ES6 transforms available with <code>--harmony</code> option</li>
|
||||
<li>Added <code>--source-map-inline</code> option to the <code>jsx</code> executable</li>
|
||||
<li>New <code>transformWithDetails</code> API which gives access to the raw sourcemap data</li>
|
||||
</ul>
|
||||
|
||||
</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>
|
||||
@@ -220,43 +355,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/28/the-road-to-1.0.html">The Road to 1.0</a></h1>
|
||||
<p class="meta">March 28, 2014 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined <a href="https://github.com/facebook/react/wiki/Projects">several projects</a> that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.</p>
|
||||
|
||||
<p>Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.</p>
|
||||
<h2><a class="anchor" name="descriptors"></a>Descriptors <a class="hash-link" href="#descriptors">#</a></h2>
|
||||
<p>The first part of this is what we're calling "descriptors". I talked about this briefly in our <a href="http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html">v0.10 announcements</a>. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. <code>React.DOM.div()</code>, <code>MyComponent()</code>) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.</p>
|
||||
|
||||
<p>We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.</p>
|
||||
<h2><a class="anchor" name="api-cleanup"></a>API Cleanup <a class="hash-link" href="#api-cleanup">#</a></h2>
|
||||
<p>This is really connected to everything. We want to keep the API as simple as possible and help developers <a href="http://blog.codinghorror.com/falling-into-the-pit-of-success/">fall into the pit of success</a>. Enabling bad patterns with bad APIs is not success.</p>
|
||||
<h2><a class="anchor" name="es6"></a>ES6 <a class="hash-link" href="#es6">#</a></h2>
|
||||
<p>Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling <code>React.createClass(...)</code> isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">MyComponent</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="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The <code>jsx</code> executable we ship with <code>react-tools</code> already supports transforming many parts of ES6 into code that will run on older browsers.</p>
|
||||
<h2><a class="anchor" name="context"></a>Context <a class="hash-link" href="#context">#</a></h2>
|
||||
<p>While we haven't documented <code>context</code>, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. It's use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.</p>
|
||||
<h2><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h2>
|
||||
<p>As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".</p>
|
||||
<h2><a class="anchor" name="browser-support"></a>Browser Support <a class="hash-link" href="#browser-support">#</a></h2>
|
||||
<p>As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.</p>
|
||||
<h2><a class="anchor" name="animations"></a>Animations <a class="hash-link" href="#animations">#</a></h2>
|
||||
<p>Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.</p>
|
||||
<h2><a class="anchor" name="miscellaneous"></a>Miscellaneous <a class="hash-link" href="#miscellaneous">#</a></h2>
|
||||
<p>There are several other things I listed on <a href="https://github.com/facebook/react/wiki/Projects">our projects page</a> that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+39
-138
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,43 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></h1>
|
||||
<p class="meta">March 28, 2014 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined <a href="https://github.com/facebook/react/wiki/Projects">several projects</a> that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.</p>
|
||||
|
||||
<p>Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.</p>
|
||||
<h2><a class="anchor" name="descriptors"></a>Descriptors <a class="hash-link" href="#descriptors">#</a></h2>
|
||||
<p>The first part of this is what we're calling "descriptors". I talked about this briefly in our <a href="http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html">v0.10 announcements</a>. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. <code>React.DOM.div()</code>, <code>MyComponent()</code>) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.</p>
|
||||
|
||||
<p>We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.</p>
|
||||
<h2><a class="anchor" name="api-cleanup"></a>API Cleanup <a class="hash-link" href="#api-cleanup">#</a></h2>
|
||||
<p>This is really connected to everything. We want to keep the API as simple as possible and help developers <a href="http://blog.codinghorror.com/falling-into-the-pit-of-success/">fall into the pit of success</a>. Enabling bad patterns with bad APIs is not success.</p>
|
||||
<h2><a class="anchor" name="es6"></a>ES6 <a class="hash-link" href="#es6">#</a></h2>
|
||||
<p>Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling <code>React.createClass(...)</code> isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">MyComponent</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="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The <code>jsx</code> executable we ship with <code>react-tools</code> already supports transforming many parts of ES6 into code that will run on older browsers.</p>
|
||||
<h2><a class="anchor" name="context"></a>Context <a class="hash-link" href="#context">#</a></h2>
|
||||
<p>While we haven't documented <code>context</code>, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. It's use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.</p>
|
||||
<h2><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h2>
|
||||
<p>As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".</p>
|
||||
<h2><a class="anchor" name="browser-support"></a>Browser Support <a class="hash-link" href="#browser-support">#</a></h2>
|
||||
<p>As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.</p>
|
||||
<h2><a class="anchor" name="animations"></a>Animations <a class="hash-link" href="#animations">#</a></h2>
|
||||
<p>Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.</p>
|
||||
<h2><a class="anchor" name="miscellaneous"></a>Miscellaneous <a class="hash-link" href="#miscellaneous">#</a></h2>
|
||||
<p>There are several other things I listed on <a href="https://github.com/facebook/react/wiki/Projects">our projects page</a> that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.</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>
|
||||
@@ -375,142 +412,6 @@ Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasaboyt</a>) wrote <
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></h1>
|
||||
<p class="meta">February 20, 2014 by Ben Alpert</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!</p>
|
||||
|
||||
<p>Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.</p>
|
||||
|
||||
<p>As always, 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.9.0.js">http://fb.me/react-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.9.0.min.js">http://fb.me/react-0.9.0.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.js">http://fb.me/react-with-addons-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min.js">http://fb.me/react-with-addons-0.9.0.min.js</a></li>
|
||||
<li><strong>In-Browser JSX Transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.9.0.js">http://fb.me/JSXTransformer-0.9.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.9.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="whats-new"></a>What’s New? <a class="hash-link" href="#whats-new">#</a></h2>
|
||||
<p>This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.</p>
|
||||
|
||||
<p>We've also added to the add-ons build <a href="/react/docs/test-utils.html">React.addons.TestUtils</a>, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.</p>
|
||||
|
||||
<p>We've also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
|
||||
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</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 <code>{'Monkeys: '}</code> or <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, 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 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>crossOrigin</code> for CORS requests</li>
|
||||
<li><code>download</code> and <code>hrefLang</code> for <code><a></code> tags</li>
|
||||
<li><code>mediaGroup</code> and <code>muted</code> for <code><audio></code> and <code><video></code> tags</li>
|
||||
<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>Boolean attributes such as <code>disabled</code> are rendered without a value (previously <code>disabled="true"</code>, now simply <code>disabled</code>)</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.TestUtils</code> was added to help write unit tests</li>
|
||||
<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">
|
||||
|
||||
|
||||
+138
-23
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,142 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></h1>
|
||||
<p class="meta">February 20, 2014 by Ben Alpert</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!</p>
|
||||
|
||||
<p>Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.</p>
|
||||
|
||||
<p>As always, 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.9.0.js">http://fb.me/react-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.9.0.min.js">http://fb.me/react-0.9.0.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.js">http://fb.me/react-with-addons-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min.js">http://fb.me/react-with-addons-0.9.0.min.js</a></li>
|
||||
<li><strong>In-Browser JSX Transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.9.0.js">http://fb.me/JSXTransformer-0.9.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.9.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="whats-new"></a>What’s New? <a class="hash-link" href="#whats-new">#</a></h2>
|
||||
<p>This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.</p>
|
||||
|
||||
<p>We've also added to the add-ons build <a href="/react/docs/test-utils.html">React.addons.TestUtils</a>, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.</p>
|
||||
|
||||
<p>We've also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
|
||||
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</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 <code>{'Monkeys: '}</code> or <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, 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 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>crossOrigin</code> for CORS requests</li>
|
||||
<li><code>download</code> and <code>hrefLang</code> for <code><a></code> tags</li>
|
||||
<li><code>mediaGroup</code> and <code>muted</code> for <code><audio></code> and <code><video></code> tags</li>
|
||||
<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>Boolean attributes such as <code>disabled</code> are rendered without a value (previously <code>disabled="true"</code>, now simply <code>disabled</code>)</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.TestUtils</code> was added to help write unit tests</li>
|
||||
<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/16/react-v0.9-rc1.html">React v0.9 RC</a></h1>
|
||||
<p class="meta">February 16, 2014 by Ben Alpert</p>
|
||||
@@ -469,27 +605,6 @@ rails s
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></h1>
|
||||
<p class="meta">January 2, 2014 by Sebastian Markbåge</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools</a>, an extension to the Chrome Developer Tools. <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">Download them from the Chrome Web Store</a>.</p>
|
||||
|
||||
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
<p>You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.</p>
|
||||
|
||||
<p>Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.</p>
|
||||
|
||||
<p>When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
|
||||
<figure><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="/react/img/blog/react-dev-tools.jpg" alt=""></a></figure></p>
|
||||
|
||||
<p>We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept <a href="https://github.com/facebook/react-devtools">pull requests on GitHub</a>.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+23
-80
@@ -65,6 +65,8 @@
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,27 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></h1>
|
||||
<p class="meta">January 2, 2014 by Sebastian Markbåge</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools</a>, an extension to the Chrome Developer Tools. <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">Download them from the Chrome Web Store</a>.</p>
|
||||
|
||||
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
<p>You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.</p>
|
||||
|
||||
<p>Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.</p>
|
||||
|
||||
<p>When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
|
||||
<figure><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="/react/img/blog/react-dev-tools.jpg" alt=""></a></figure></p>
|
||||
|
||||
<p>We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept <a href="https://github.com/facebook/react-devtools">pull requests on GitHub</a>.</p>
|
||||
|
||||
</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>
|
||||
@@ -339,84 +360,6 @@ componentDidUpdate: function() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/18/community-roundup-11.html">Community Round-up #11</a></h1>
|
||||
<p class="meta">November 18, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!</p>
|
||||
<h2><a class="anchor" name="super-vanjs-2013-talk"></a>Super VanJS 2013 Talk <a class="hash-link" href="#super-vanjs-2013-talk">#</a></h2>
|
||||
<p><a href="https://github.com/steveluscher">Steve Luscher</a> working at <a href="https://leanpub.com/">LeanPub</a> made a 30 min talk at <a href="https://twitter.com/vanjs">Super VanJS</a>. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.</p>
|
||||
|
||||
<figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="react-tips"></a>React Tips <a class="hash-link" href="#react-tips">#</a></h2>
|
||||
<p><a href="http://connormcsheffrey.com/">Connor McSheffrey</a> and <a href="https://github.com/chenglou">Cheng Lou</a> added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we <a href="http://facebook.github.io/react/tips/introduction.html">encourage you to contribute</a>!</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://facebook.github.io/react/tips/inline-styles.html">Inline Styles</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/if-else-in-JSX.html">If-Else in JSX</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/self-closing-tag.html">Self-Closing Tag</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/children-props-type.html">Type of the Children props</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html"><code>componentWillReceiveProps</code> Not Triggered After Mounting</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/initial-ajax.html">Load Initial Data via AJAX</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/false-in-jsx.html">False in JSX</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="intro-to-the-react-framework"></a>Intro to the React Framework <a class="hash-link" href="#intro-to-the-react-framework">#</a></h2>
|
||||
<p><a href="http://blog.pixelingene.com/">Pavan Podila</a> wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
|
||||
<figure><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660"><img src="/react/img/blog/tutsplus.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660">Read the full article ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="140-characters-textarea"></a>140-characters textarea <a class="hash-link" href="#140-characters-textarea">#</a></h2>
|
||||
<p><a href="https://github.com/brainkim">Brian Kim</a> wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.</p>
|
||||
|
||||
<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
|
||||
|
||||
<script async src="//codepen.io/assets/embed/ei.js"></script>
|
||||
<h2><a class="anchor" name="genesis-skeleton"></a>Genesis Skeleton <a class="hash-link" href="#genesis-skeleton">#</a></h2>
|
||||
<p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
|
||||
<figure><a href="http://genesis-skeleton.com/"><img src="/react/img/blog/genesis_skeleton.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="agflow-talk"></a>AgFlow Talk <a class="hash-link" href="#agflow-talk">#</a></h2>
|
||||
<p><a href="http://rz.scale-it.pl/">Robert Zaremba</a> working on <a href="http://www.agflow.com/">AgFlow</a> recently talked in Poland about React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone ...) in AgFlow, where I’m leading an application development.</p>
|
||||
|
||||
<p>During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!</p>
|
||||
|
||||
<p><a href="http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="600" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
|
||||
<h2><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h2>
|
||||
<p><a href="http://tck.io/">Todd Kennedy</a> working at Condé Nast wrote <a href="https://github.com/CondeNast/JSXHint">JSXHint</a> and explains in a blog post his perspective on JSX.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Lets start with the elephant in the room: JSX?
|
||||
Is this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.</p>
|
||||
|
||||
<p>Creating elements in memory is quick -- copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we're dealing with something that needs to update the DOM frequently.</p>
|
||||
|
||||
<p><a href="http://tck.io/posts/jsxhint_and_react.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="photo-gallery"></a>Photo Gallery <a class="hash-link" href="#photo-gallery">#</a></h2>
|
||||
<p><a href="http://miekd.com/">Maykel Loomans</a>, designer at Instagram, wrote a gallery for photos he shot using React.
|
||||
<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="/react/img/blog/xoxo2013.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p><img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
|
||||
<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>— Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
@@ -62,6 +62,64 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Community Round-up #25</title>
|
||||
<description><h2><a class="anchor" name="react-101"></a>React 101 <a class="hash-link" href="#react-101">#</a></h2>
|
||||
<p>Interest in React has been exploding recently, so it&#39;s a good time to explore some great recent tutorials and videos that cover getting started. </p>
|
||||
|
||||
<p>Ryan Clarke (<a href="https://github.com/rynclark">rynclark</a>) provides a <a href="http://ryanclark.me/getting-started-with-react/">great overview of the basics of React</a> with the goal of building a really simple dropdown nav. </p>
|
||||
|
||||
<p>Formidable Labs (<a href="https://github.com/FormidableLabs">FormidableLabs</a>) and <a href="http://www.meetup.com/seattlejs/">Seattle JS</a> recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube.com/embed/[Pd6Ub7Ju2RM](https://www.youtube.com/watch?v=Pd6Ub7Ju2RM)" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<p>AEFlash (<a href="https://github.com/aearly">aearly</a>) writes up <a href="http://aeflash.com/2015-02/react-tips-and-best-practices.html">some best practices and tips</a> to help you avoid potential pitfalls when developing with React. </p>
|
||||
|
||||
<p>Black Mutt Media <a href="http://blackmuttmedia.com/blog/react-tmdb-api/">takes us through their usage of React</a> and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.</p>
|
||||
|
||||
<p>Our own <a href="https://github.com/sebmarkbage">Sebastian Markbåge</a> was on the <a href="http://thewebplatform.libsyn.com/31-building-with-reactjs">Web Platform Podcast</a> to have a chat about all aspects of React.</p>
|
||||
<h2><a class="anchor" name="community-additions"></a>Community Additions <a class="hash-link" href="#community-additions">#</a></h2>
|
||||
<p>Formidable Labs (<a href="https://github.com/FormidableLabs">FormidableLabs</a>) have been busy, as they&#39;ve also<a href="http://projects.formidablelabs.com/radium/"> just launched Radium</a>, a React component that provides you with the ability to use inline styles instead of CSS. They&#39;re also <a href="http://projects.formidablelabs.com/radium-bootstrap/">looking for some help</a> contributing to a Radium Bootstrap implementation. </p>
|
||||
|
||||
<p><a href="http://reactiflux.com/">Reactiflux.com</a> is a new Slack community based around (you guessed it!) React, and Flux. </p>
|
||||
|
||||
<p><a href="http://reactweek.com/">React Week</a> is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by Ryan Florence (<a href="https://github.com/ryanflorence">ryanflorence</a>). </p>
|
||||
|
||||
<p><a href="https://github.com/babel/babel-sublime">Babel-sublime</a> is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions. </p>
|
||||
|
||||
<p><a href="https://github.com/reactjs/react-meteor">react-meteor</a>, a package that replaces the default templating system of the Meteor platform with React, recently received a big update. </p>
|
||||
<h2><a class="anchor" name="rebuilding-with-react"></a>Rebuilding with React <a class="hash-link" href="#rebuilding-with-react">#</a></h2>
|
||||
<p>Rich Manalang (<a href="https://github.com/rmanalan">rmanalan</a>) from Atlassian <a href="https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/">explains why</a> they rebuilt their HipChat web client from scratch using React, and how they&#39;re already using it to rebuild their native desktop clients. </p>
|
||||
|
||||
<p><a href="https://twitter.com/andyhillel">Andrew Hillel</a> of the BBC gives <a href="http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d">an excellent and thorough breakdown</a> of the stack they used to rebuild their homepage, with React as an integral part of the front-end. </p>
|
||||
|
||||
<p>A team from New Zealand called <a href="https://atomic.io/">Atomic</a> is <a href="http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/">building web and mobile prototyping and design tools</a> entirely in-browser, and as co-founder <a href="http://twitter.com/darrylgray">Darryl Gray</a> says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.</p>
|
||||
|
||||
<p>Polarr (<a href="https://github.com/Polarrco">polarrco</a>) have rebuilt <a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here">their browser-based photo editor</a> with React.</p>
|
||||
<h2><a class="anchor" name="its-f8"></a>It&#39;s F8! <a class="hash-link" href="#its-f8">#</a></h2>
|
||||
<p>F8 2015 is just around the corner, and you can <a href="https://www.fbf8.com/stream.html">sign up for the video streams</a> in advance because we&#39;re sure to be covering all things React. </p>
|
||||
<h2><a class="anchor" name="meetups"></a>Meetups <a class="hash-link" href="#meetups">#</a></h2>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> &#10;&#10;btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>&mdash; littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/yrezgui">@yrezgui</a> captivating us with <a href="https://twitter.com/reactjs">@reactjs</a> at <a href="https://twitter.com/DevRocketUK">@DevRocketUK</a>. Thanks to the amazing sponsors <a href="https://twitter.com/makersacademy">@makersacademy</a> and <a href="https://twitter.com/couchbase">@couchbase</a>. <a href="http://t.co/xwA773omky">pic.twitter.com/xwA773omky</a></p>&mdash; James Nocentini (@jamiltz) <a href="https://twitter.com/jamiltz/status/570306188577001473">February 24, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Listening to a bunch of very clever geekoids at the <a href="https://twitter.com/reactjs">@reactjs</a> seminar. Nice! <a href="http://t.co/0TeTOJOerO">pic.twitter.com/0TeTOJOerO</a></p>&mdash; Nick Middleweek (@nmiddleweek) <a href="https://twitter.com/nmiddleweek/status/568183658395394049">February 18, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Watching the <a href="https://twitter.com/FrontendMasters">@FrontendMasters</a> ReactJS workshop! <a href="http://t.co/YraYIK97Lu">pic.twitter.com/YraYIK97Lu</a></p>&mdash; ReactJS News (@ReactJSNews) <a href="https://twitter.com/ReactJSNews/status/566269552112041985">February 13, 2015</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</description>
|
||||
<pubDate>2015-03-03T00:00:00-08:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2015/03/03/community-roundup-25.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/03/community-roundup-25.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React v0.13 RC</title>
|
||||
<description><p>Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!</p>
|
||||
@@ -904,49 +962,5 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/11/25/community-roundup-24.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React.js Conf Updates</title>
|
||||
<description><p>Yesterday was the <a href="http://conf.reactjs.com/index.html">React.js Conf</a> call for presenters submission deadline. We were
|
||||
surprised to have received a total of <strong>one hundred talk proposals</strong> and were
|
||||
amazed that 600 people requested to be notified when ticket go on sale. This is incredible!</p>
|
||||
|
||||
<p>When we organized the conference, we decided to start small since this is the
|
||||
first React.js conference. Also, we weren&#39;t sure what level of demand to expect,
|
||||
so we planned for a single-track, two-day conference on Facebook&#39;s campus. The
|
||||
largest room available would accomodate 18 speaking slots and 200 attendees.
|
||||
The spacial configuration makes it difficult to add a second track and changing
|
||||
venues only two months in advance would be too difficult, so we are deciding to
|
||||
stick with the originally planned format and venue on Facebook&#39;s campus.</p>
|
||||
|
||||
<p>Unfortunately, this means that we can only accept a small number of the awesome
|
||||
conference talk proposals. In order to make sure attendees get a fair shot at
|
||||
registering, we&#39;re going to to sell tickets in three separate first-come,
|
||||
first-serve phases. <strong>Tickets will cost $200 regardless of which phase they are
|
||||
purchased from and all proceeds will go to charity</strong>.</p>
|
||||
|
||||
<ul>
|
||||
<li>Friday November 28th 2014 — Noon PST: First wave of tickets</li>
|
||||
<li>Friday December 5th 2014 — Noon PST: Second wave of tickets</li>
|
||||
<li>Friday December 12th 2014 — Noon PST: Third and last wave of tickets</li>
|
||||
</ul>
|
||||
|
||||
<p>We really do wish that everyone could attend React.js Conf, but in order to
|
||||
ensure a quality experience for those who attend, we feel it will be best to
|
||||
limit the size of the conference to what was originally planned for. This means
|
||||
that not everyone who wants to attend will be able to, and many talks that
|
||||
would be excellent contributions to the conference will have to be postponed
|
||||
until the next conference. All the talks will be recorded and put online shortly after.</p>
|
||||
|
||||
<p>We hope to see many of you at React.js Conf this January.</p>
|
||||
|
||||
<p>Sincerely,</p>
|
||||
|
||||
<p>React Core Team</p>
|
||||
</description>
|
||||
<pubDate>2014-11-24T00:00:00-08:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html</guid>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
||||
Reference in New Issue
Block a user