mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rebuild website
This commit is contained in:
Travis CI
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html" class="active">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html" class="active">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html" class="active">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html" class="active">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React v0.14 Release Candidate | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React v0.14 Release Candidate | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html">
|
||||
<meta property="og:image" content="https://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="https://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>
|
||||
</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 nav-site-internal">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</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/09/10/react-v0.14-rc1.html" class="active">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/11/relay-technical-preview.html">Relay Technical Preview</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/05/22/react-native-release-process.html">React Native Release Process</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/05/08/react-v0.13.3.html">React v0.13.3</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
React v0.14 Release Candidate
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
September 10, 2015
|
||||
by
|
||||
|
||||
<a href="http://benalpert.com">Ben Alpert</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>We’re happy to announce our first release candidate for React 0.14! We gave you a <a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">sneak peek in July</a> at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.</p>
|
||||
|
||||
<p>Let us know if you run into any problems by filing issues on our <a href="https://github.com/facebook/react">GitHub repo</a>.</p>
|
||||
<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
|
||||
<p>We recommend using React from <code>npm</code> and using a tool like browserify or webpack to build your code into a single package:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>npm install --save react@0.14.0-rc1</code></li>
|
||||
<li><code>npm install --save react-dom@0.14.0-rc1</code></li>
|
||||
</ul>
|
||||
|
||||
<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the <code>NODE_ENV</code> environment variable to <code>production</code> to use the production build of React which does not include the development warnings and runs significantly faster.</p>
|
||||
|
||||
<p>If you can’t use <code>npm</code> yet, we also provide pre-built browser builds for your convenience:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-0.14.0-rc1.js">https://fb.me/react-0.14.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-0.14.0-rc1.min.js">https://fb.me/react-0.14.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.14.0-rc1.js">https://fb.me/react-with-addons-0.14.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-with-addons-0.14.0-rc1.min.js">https://fb.me/react-with-addons-0.14.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React DOM</strong> (include React in the page before React DOM)<br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-dom-0.14.0-rc1.js">https://fb.me/react-dom-0.14.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-dom-0.14.0-rc1.min.js">https://fb.me/react-dom-0.14.0-rc1.min.js</a><br></li>
|
||||
</ul>
|
||||
|
||||
<p>These builds are also available in the <code>react</code> and <code>react-dom</code> packages on bower.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="major-changes"></a>Major changes <a class="hash-link" href="#major-changes">#</a></h3>
|
||||
<ul>
|
||||
<li><h4><a class="anchor" name="two-packages-react-and-react-dom"></a>Two Packages: React and React DOM <a class="hash-link" href="#two-packages-react-and-react-dom">#</a></h4>
|
||||
<p>As we look at packages like <a href="https://github.com/facebook/react-native">react-native</a>, <a href="https://github.com/reactjs/react-art">react-art</a>, <a href="https://github.com/Flipboard/react-canvas">react-canvas</a>, and <a href="https://github.com/Izzimach/react-three">react-three</a>, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.</p>
|
||||
|
||||
<p>To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main <code>react</code> package into two: <code>react</code> and <code>react-dom</code>. <strong>This paves the way to writing components that can be shared between the web version of React and React Native.</strong> We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.</p>
|
||||
|
||||
<p>The <code>react</code> package contains <code>React.createElement</code>, <code>.createClass</code>, <code>.Component</code>, <code>.PropTypes</code>, <code>.Children</code>, and the other helpers related to elements and component classes. We think of these as the <a href="http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/"><em>isomorphic</em></a> or <a href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9"><em>universal</em></a> helpers that you need to build components.</p>
|
||||
|
||||
<p>The <code>react-dom</code> package has <code>ReactDOM.render</code>, <code>.unmountComponentAtNode</code>, and <code>.findDOMNode</code>. In <code>react-dom/server</code> we have server-side rendering support with <code>ReactDOMServer.renderToString</code> and <code>.renderToStaticMarkup</code>.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><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">ReactDOM</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-dom'</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span> <span class="nx">World</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span> <span class="o">/></span><span class="p">,</span> <span class="nx">node</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>We’ve published the <a href="https://github.com/facebook/react/blob/master/packages/react-codemod/README.md">automated codemod script</a> we used at Facebook to help you with this transition.</p>
|
||||
|
||||
<p>The add-ons have moved to separate packages as well: <code>react-addons-clone-with-props</code>, <code>react-addons-create-fragment</code>, <code>react-addons-css-transition-group</code>, <code>react-addons-linked-state-mixin</code>, <code>react-addons-perf</code>, <code>react-addons-pure-render-mixin</code>, <code>react-addons-shallow-compare</code>, <code>react-addons-test-utils</code>, <code>react-addons-transition-group</code>, and <code>react-addons-update</code>, plus <code>ReactDOM.unstable_batchedUpdates</code> in <code>react-dom</code>.</p>
|
||||
|
||||
<p>For now, please use matching versions of <code>react</code> and <code>react-dom</code> in your apps to avoid versioning problems.</p></li>
|
||||
<li><h4><a class="anchor" name="dom-node-refs"></a>DOM node refs <a class="hash-link" href="#dom-node-refs">#</a></h4>
|
||||
<p>The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a <code>ref</code> to a React DOM component and realized that the only useful thing you can do with it is call <code>this.refs.giraffe.getDOMNode()</code> to get the underlying DOM node. In this release, <code>this.refs.giraffe</code> <em>is</em> the actual DOM node. <strong>Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.</strong></p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">Zoo</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">div</span><span class="o">></span><span class="nx">Giraffe</span> <span class="nx">name</span><span class="o">:</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"giraffe"</span> <span class="o">/><</span><span class="err">/div>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">showName</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Previously: var input = this.refs.giraffe.getDOMNode();</span>
|
||||
<span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">giraffe</span><span class="p">;</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This change also applies to the return result of <code>ReactDOM.render</code> when passing a DOM node as the top component. As with refs, this change does not affect custom components. With these changes, we’re deprecating <code>.getDOMNode()</code> and replacing it with <code>ReactDOM.findDOMNode</code> (see below).</p></li>
|
||||
<li><h4><a class="anchor" name="stateless-function-components"></a>Stateless function components <a class="hash-link" href="#stateless-function-components">#</a></h4>
|
||||
<p>In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take <code>props</code> as an argument and return the element you want to render:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Using an ES2015 (ES6) arrow function:</span>
|
||||
<span class="kd">var</span> <span class="nx">Aquarium</span> <span class="o">=</span> <span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fish</span> <span class="o">=</span> <span class="nx">getFish</span><span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">species</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">Tank</span><span class="o">></span><span class="p">{</span><span class="nx">fish</span><span class="p">}</span><span class="o"><</span><span class="err">/Tank>;</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="c1">// Or with destructuring and an implicit return, simply:</span>
|
||||
<span class="kd">var</span> <span class="nx">Aquarium</span> <span class="o">=</span> <span class="p">({</span><span class="nx">species</span><span class="p">})</span> <span class="o">=></span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Tank</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">getFish</span><span class="p">(</span><span class="nx">species</span><span class="p">)}</span>
|
||||
<span class="o"><</span><span class="err">/Tank></span>
|
||||
<span class="p">);</span>
|
||||
|
||||
<span class="c1">// Then use: <Aquarium species="rainbowfish" /></span>
|
||||
</code></pre></div>
|
||||
<p>This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.</p></li>
|
||||
<li><h4><a class="anchor" name="deprecation-of-react-tools"></a>Deprecation of react-tools <a class="hash-link" href="#deprecation-of-react-tools">#</a></h4>
|
||||
<p>The <code>react-tools</code> package and <code>JSXTransformer.js</code> browser file <a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">have been deprecated</a>. You can continue using version <code>0.13.3</code> of both, but we no longer support them and recommend migrating to <a href="http://babeljs.io/">Babel</a>, which has built-in support for React and JSX.</p></li>
|
||||
<li><h4><a class="anchor" name="compiler-optimizations"></a>Compiler optimizations <a class="hash-link" href="#compiler-optimizations">#</a></h4>
|
||||
<p>React now supports two compiler optimizations that can be enabled in Babel. Both of these transforms <strong>should be enabled only in production</strong> (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.</p>
|
||||
|
||||
<p><strong>Inlining React elements:</strong> The <code>optimisation.react.inlineElements</code> transform converts JSX elements to object literals like <code>{type: 'div', props: ...}</code> instead of calls to <code>React.createElement</code>.</p>
|
||||
|
||||
<p><strong>Constant hoisting for React elements:</strong> The <code>optimisation.react.constantElements</code> transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to <code>React.createElement</code> and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.</p></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="breaking-changes"></a>Breaking changes <a class="hash-link" href="#breaking-changes">#</a></h3>
|
||||
<p>As always, we have a few breaking changes in this release. Whenever we make large changes, we warn for at least one release so you have time to update your code. The Facebook codebase has over 15,000 React components, so on the React team, we always try to minimize the pain of breaking changes.</p>
|
||||
|
||||
<p>These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:</p>
|
||||
|
||||
<ul>
|
||||
<li>The <code>props</code> object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, <a href="/react/docs/top-level-api.html#react.cloneelement"><code>React.cloneElement</code></a> should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.</li>
|
||||
<li>Plain objects are no longer supported as React children; arrays should be used instead. You can use the <a href="/react/docs/create-fragment.html"><code>createFragment</code></a> helper to migrate, which now returns an array.</li>
|
||||
<li>Add-Ons: <code>classSet</code> has been removed. Use <a href="https://github.com/JedWatson/classnames">classnames</a> instead.</li>
|
||||
</ul>
|
||||
|
||||
<p>And these two changes did not warn in 0.13 but should be easy to find and clean up:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>React.initializeTouchEvents</code> is no longer necessary and has been removed completely. Touch events now work automatically.</li>
|
||||
<li>Add-Ons: Due to the DOM node refs change mentioned above, <code>TestUtils.findAllInRenderedTree</code> and related helpers are no longer able to take a DOM component, only a custom component.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="new-deprecations-introduced-with-a-warning"></a>New deprecations, introduced with a warning <a class="hash-link" href="#new-deprecations-introduced-with-a-warning">#</a></h3>
|
||||
<ul>
|
||||
<li><p>Due to the DOM node refs change mentioned above, <code>this.getDOMNode()</code> is now deprecated and <code>ReactDOM.findDOMNode(this)</code> can be used instead. Note that in most cases, calling <code>findDOMNode</code> is now unnecessary – see the example above in the “DOM node refs” section.</p>
|
||||
|
||||
<p>If you have a large codebase, you can use our <a href="https://github.com/facebook/react/blob/master/packages/react-codemod/README.md">automated codemod script</a> to change your code automatically.</p></li>
|
||||
<li><p><code>setProps</code> and <code>replaceProps</code> are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.</p></li>
|
||||
<li><p>ES6 component classes must now extend <code>React.Component</code> in order to enable stateless function components. The <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages">ES3 module pattern</a> will continue to work.</p></li>
|
||||
<li><p>Reusing and mutating a <code>style</code> object between renders has been deprecated. This mirrors our change to freeze the <code>props</code> object.</p></li>
|
||||
<li><p>Add-Ons: <code>cloneWithProps</code> is now deprecated. Use <a href="/react/docs/top-level-api.html#react.cloneelement"><code>React.cloneElement</code></a> instead (unlike <code>cloneWithProps</code>, <code>cloneElement</code> does not merge <code>className</code> or <code>style</code> automatically; you can merge them manually if needed).</p></li>
|
||||
<li><p>Add-Ons: To improve reliability, <code>CSSTransitionGroup</code> will no longer listen to transition events. Instead, you should specify transition durations manually using props such as <code>transitionEnterTimeout={500}</code>.</p></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="notable-enhancements"></a>Notable enhancements <a class="hash-link" href="#notable-enhancements">#</a></h3>
|
||||
<ul>
|
||||
<li>Added <code>React.Children.toArray</code> which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your <code>render</code> methods, especially if you want to reorder or slice <code>this.props.children</code> before passing it down. In addition, <code>React.Children.map</code> now returns plain arrays too.</li>
|
||||
<li>React uses <code>console.error</code> instead of <code>console.warn</code> for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)</li>
|
||||
<li>Previously, including untrusted objects as React children <a href="http://danlec.com/blog/xss-via-a-spoofed-react-element">could result in an XSS security vulnerability</a>. This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, <a href="https://github.com/facebook/react/pull/4832">React now tags elements</a> with a specific <a href="http://www.2ality.com/2014/12/es6-symbols.html">ES2015 (ES6) <code>Symbol</code></a> in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a <code>Symbol</code> polyfill for older browsers, such as the one included by <a href="http://babeljs.io/docs/usage/polyfill/">Babel’s polyfill</a>.</li>
|
||||
<li>When possible, React DOM now generates XHTML-compatible markup.</li>
|
||||
<li>React DOM now supports these standard HTML attributes: <code>capture</code>, <code>challenge</code>, <code>inputMode</code>, <code>is</code>, <code>keyParams</code>, <code>keyType</code>, <code>minLength</code>, <code>summary</code>, <code>wrap</code>. It also now supports these non-standard attributes: <code>autoSave</code>, <code>results</code>, <code>security</code>.</li>
|
||||
<li>React DOM now supports these SVG attributes, which render into namespaced attributes: <code>xlinkActuate</code>, <code>xlinkArcrole</code>, <code>xlinkHref</code>, <code>xlinkRole</code>, <code>xlinkShow</code>, <code>xlinkTitle</code>, <code>xlinkType</code>, <code>xmlBase</code>, <code>xmlLang</code>, <code>xmlSpace</code>.</li>
|
||||
<li>The <code>image</code> SVG tag is now supported by React DOM.</li>
|
||||
<li>In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an <code>is="..."</code> attribute).</li>
|
||||
<li>React DOM now supports these media events on <code>audio</code> and <code>video</code> tags: <code>onAbort</code>, <code>onCanPlay</code>, <code>onCanPlayThrough</code>, <code>onDurationChange</code>, <code>onEmptied</code>, <code>onEncrypted</code>, <code>onEnded</code>, <code>onError</code>, <code>onLoadedData</code>, <code>onLoadedMetadata</code>, <code>onLoadStart</code>, <code>onPause</code>, <code>onPlay</code>, <code>onPlaying</code>, <code>onProgress</code>, <code>onRateChange</code>, <code>onSeeked</code>, <code>onSeeking</code>, <code>onStalled</code>, <code>onSuspend</code>, <code>onTimeUpdate</code>, <code>onVolumeChange</code>, <code>onWaiting</code>.</li>
|
||||
<li>Many small performance improvements have been made.</li>
|
||||
<li>Many warnings show more context than before.</li>
|
||||
<li>Add-Ons: A <a href="https://github.com/facebook/react/pull/3355"><code>shallowCompare</code></a> add-on has been added as a migration path for <code>PureRenderMixin</code> in ES6 classes.</li>
|
||||
<li>Add-Ons: <code>CSSTransitionGroup</code> can now use <a href="https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes">custom class names</a> instead of appending <code>-enter-active</code> or similar to the transition name.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="new-helpful-warnings"></a>New helpful warnings <a class="hash-link" href="#new-helpful-warnings">#</a></h3>
|
||||
<ul>
|
||||
<li>React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.</li>
|
||||
<li>Passing <code>document.body</code> directly as the container to <code>ReactDOM.render</code> now gives a warning as doing so can cause problems with browser extensions that modify the DOM.</li>
|
||||
<li>Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="notable-bug-fixes"></a>Notable bug fixes <a class="hash-link" href="#notable-bug-fixes">#</a></h3>
|
||||
<ul>
|
||||
<li>Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.</li>
|
||||
<li>SVG elements are created with the correct namespace in more cases.</li>
|
||||
<li>React DOM now renders <code><option></code> elements with multiple text children properly and renders <code><select></code> elements on the server with the correct option selected.</li>
|
||||
<li>When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.</li>
|
||||
<li>Using non-lowercase HTML tag names in React DOM (e.g., <code>React.createElement('DIV')</code>) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).</li>
|
||||
<li>React DOM understands that these CSS properties are unitless and does not append “px” to their values: <code>animationIterationCount</code>, <code>boxOrdinalGroup</code>, <code>flexOrder</code>, <code>tabSize</code>, <code>stopOpacity</code>.</li>
|
||||
<li>Add-Ons: When using the test utils, <code>Simulate.mouseEnter</code> and <code>Simulate.mouseLeave</code> now work.</li>
|
||||
<li>Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.</li>
|
||||
</ul>
|
||||
|
||||
</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="https://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,9 @@
|
||||
<h1>All Posts</h1>
|
||||
|
||||
|
||||
<p><strong><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></strong> on September 10, 2015 by Ben Alpert</p>
|
||||
|
||||
|
||||
<p><strong><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></strong> on September 2, 2015 by Ben Alpert</p>
|
||||
|
||||
|
||||
|
||||
+186
-90
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,190 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
September 10, 2015
|
||||
by
|
||||
|
||||
<a href="http://benalpert.com">Ben Alpert</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>We’re happy to announce our first release candidate for React 0.14! We gave you a <a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">sneak peek in July</a> at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.</p>
|
||||
|
||||
<p>Let us know if you run into any problems by filing issues on our <a href="https://github.com/facebook/react">GitHub repo</a>.</p>
|
||||
<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
|
||||
<p>We recommend using React from <code>npm</code> and using a tool like browserify or webpack to build your code into a single package:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>npm install --save react@0.14.0-rc1</code></li>
|
||||
<li><code>npm install --save react-dom@0.14.0-rc1</code></li>
|
||||
</ul>
|
||||
|
||||
<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the <code>NODE_ENV</code> environment variable to <code>production</code> to use the production build of React which does not include the development warnings and runs significantly faster.</p>
|
||||
|
||||
<p>If you can’t use <code>npm</code> yet, we also provide pre-built browser builds for your convenience:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-0.14.0-rc1.js">https://fb.me/react-0.14.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-0.14.0-rc1.min.js">https://fb.me/react-0.14.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.14.0-rc1.js">https://fb.me/react-with-addons-0.14.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-with-addons-0.14.0-rc1.min.js">https://fb.me/react-with-addons-0.14.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React DOM</strong> (include React in the page before React DOM)<br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-dom-0.14.0-rc1.js">https://fb.me/react-dom-0.14.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-dom-0.14.0-rc1.min.js">https://fb.me/react-dom-0.14.0-rc1.min.js</a><br></li>
|
||||
</ul>
|
||||
|
||||
<p>These builds are also available in the <code>react</code> and <code>react-dom</code> packages on bower.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="major-changes"></a>Major changes <a class="hash-link" href="#major-changes">#</a></h3>
|
||||
<ul>
|
||||
<li><h4><a class="anchor" name="two-packages-react-and-react-dom"></a>Two Packages: React and React DOM <a class="hash-link" href="#two-packages-react-and-react-dom">#</a></h4>
|
||||
<p>As we look at packages like <a href="https://github.com/facebook/react-native">react-native</a>, <a href="https://github.com/reactjs/react-art">react-art</a>, <a href="https://github.com/Flipboard/react-canvas">react-canvas</a>, and <a href="https://github.com/Izzimach/react-three">react-three</a>, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.</p>
|
||||
|
||||
<p>To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main <code>react</code> package into two: <code>react</code> and <code>react-dom</code>. <strong>This paves the way to writing components that can be shared between the web version of React and React Native.</strong> We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.</p>
|
||||
|
||||
<p>The <code>react</code> package contains <code>React.createElement</code>, <code>.createClass</code>, <code>.Component</code>, <code>.PropTypes</code>, <code>.Children</code>, and the other helpers related to elements and component classes. We think of these as the <a href="http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/"><em>isomorphic</em></a> or <a href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9"><em>universal</em></a> helpers that you need to build components.</p>
|
||||
|
||||
<p>The <code>react-dom</code> package has <code>ReactDOM.render</code>, <code>.unmountComponentAtNode</code>, and <code>.findDOMNode</code>. In <code>react-dom/server</code> we have server-side rendering support with <code>ReactDOMServer.renderToString</code> and <code>.renderToStaticMarkup</code>.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><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">ReactDOM</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-dom'</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span> <span class="nx">World</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span> <span class="o">/></span><span class="p">,</span> <span class="nx">node</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>We’ve published the <a href="https://github.com/facebook/react/blob/master/packages/react-codemod/README.md">automated codemod script</a> we used at Facebook to help you with this transition.</p>
|
||||
|
||||
<p>The add-ons have moved to separate packages as well: <code>react-addons-clone-with-props</code>, <code>react-addons-create-fragment</code>, <code>react-addons-css-transition-group</code>, <code>react-addons-linked-state-mixin</code>, <code>react-addons-perf</code>, <code>react-addons-pure-render-mixin</code>, <code>react-addons-shallow-compare</code>, <code>react-addons-test-utils</code>, <code>react-addons-transition-group</code>, and <code>react-addons-update</code>, plus <code>ReactDOM.unstable_batchedUpdates</code> in <code>react-dom</code>.</p>
|
||||
|
||||
<p>For now, please use matching versions of <code>react</code> and <code>react-dom</code> in your apps to avoid versioning problems.</p></li>
|
||||
<li><h4><a class="anchor" name="dom-node-refs"></a>DOM node refs <a class="hash-link" href="#dom-node-refs">#</a></h4>
|
||||
<p>The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a <code>ref</code> to a React DOM component and realized that the only useful thing you can do with it is call <code>this.refs.giraffe.getDOMNode()</code> to get the underlying DOM node. In this release, <code>this.refs.giraffe</code> <em>is</em> the actual DOM node. <strong>Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.</strong></p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">Zoo</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">div</span><span class="o">></span><span class="nx">Giraffe</span> <span class="nx">name</span><span class="o">:</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"giraffe"</span> <span class="o">/><</span><span class="err">/div>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">showName</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Previously: var input = this.refs.giraffe.getDOMNode();</span>
|
||||
<span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">giraffe</span><span class="p">;</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This change also applies to the return result of <code>ReactDOM.render</code> when passing a DOM node as the top component. As with refs, this change does not affect custom components. With these changes, we’re deprecating <code>.getDOMNode()</code> and replacing it with <code>ReactDOM.findDOMNode</code> (see below).</p></li>
|
||||
<li><h4><a class="anchor" name="stateless-function-components"></a>Stateless function components <a class="hash-link" href="#stateless-function-components">#</a></h4>
|
||||
<p>In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take <code>props</code> as an argument and return the element you want to render:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Using an ES2015 (ES6) arrow function:</span>
|
||||
<span class="kd">var</span> <span class="nx">Aquarium</span> <span class="o">=</span> <span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fish</span> <span class="o">=</span> <span class="nx">getFish</span><span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">species</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">Tank</span><span class="o">></span><span class="p">{</span><span class="nx">fish</span><span class="p">}</span><span class="o"><</span><span class="err">/Tank>;</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="c1">// Or with destructuring and an implicit return, simply:</span>
|
||||
<span class="kd">var</span> <span class="nx">Aquarium</span> <span class="o">=</span> <span class="p">({</span><span class="nx">species</span><span class="p">})</span> <span class="o">=></span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Tank</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">getFish</span><span class="p">(</span><span class="nx">species</span><span class="p">)}</span>
|
||||
<span class="o"><</span><span class="err">/Tank></span>
|
||||
<span class="p">);</span>
|
||||
|
||||
<span class="c1">// Then use: <Aquarium species="rainbowfish" /></span>
|
||||
</code></pre></div>
|
||||
<p>This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.</p></li>
|
||||
<li><h4><a class="anchor" name="deprecation-of-react-tools"></a>Deprecation of react-tools <a class="hash-link" href="#deprecation-of-react-tools">#</a></h4>
|
||||
<p>The <code>react-tools</code> package and <code>JSXTransformer.js</code> browser file <a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">have been deprecated</a>. You can continue using version <code>0.13.3</code> of both, but we no longer support them and recommend migrating to <a href="http://babeljs.io/">Babel</a>, which has built-in support for React and JSX.</p></li>
|
||||
<li><h4><a class="anchor" name="compiler-optimizations"></a>Compiler optimizations <a class="hash-link" href="#compiler-optimizations">#</a></h4>
|
||||
<p>React now supports two compiler optimizations that can be enabled in Babel. Both of these transforms <strong>should be enabled only in production</strong> (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.</p>
|
||||
|
||||
<p><strong>Inlining React elements:</strong> The <code>optimisation.react.inlineElements</code> transform converts JSX elements to object literals like <code>{type: 'div', props: ...}</code> instead of calls to <code>React.createElement</code>.</p>
|
||||
|
||||
<p><strong>Constant hoisting for React elements:</strong> The <code>optimisation.react.constantElements</code> transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to <code>React.createElement</code> and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.</p></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="breaking-changes"></a>Breaking changes <a class="hash-link" href="#breaking-changes">#</a></h3>
|
||||
<p>As always, we have a few breaking changes in this release. Whenever we make large changes, we warn for at least one release so you have time to update your code. The Facebook codebase has over 15,000 React components, so on the React team, we always try to minimize the pain of breaking changes.</p>
|
||||
|
||||
<p>These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:</p>
|
||||
|
||||
<ul>
|
||||
<li>The <code>props</code> object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, <a href="/react/docs/top-level-api.html#react.cloneelement"><code>React.cloneElement</code></a> should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.</li>
|
||||
<li>Plain objects are no longer supported as React children; arrays should be used instead. You can use the <a href="/react/docs/create-fragment.html"><code>createFragment</code></a> helper to migrate, which now returns an array.</li>
|
||||
<li>Add-Ons: <code>classSet</code> has been removed. Use <a href="https://github.com/JedWatson/classnames">classnames</a> instead.</li>
|
||||
</ul>
|
||||
|
||||
<p>And these two changes did not warn in 0.13 but should be easy to find and clean up:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>React.initializeTouchEvents</code> is no longer necessary and has been removed completely. Touch events now work automatically.</li>
|
||||
<li>Add-Ons: Due to the DOM node refs change mentioned above, <code>TestUtils.findAllInRenderedTree</code> and related helpers are no longer able to take a DOM component, only a custom component.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="new-deprecations-introduced-with-a-warning"></a>New deprecations, introduced with a warning <a class="hash-link" href="#new-deprecations-introduced-with-a-warning">#</a></h3>
|
||||
<ul>
|
||||
<li><p>Due to the DOM node refs change mentioned above, <code>this.getDOMNode()</code> is now deprecated and <code>ReactDOM.findDOMNode(this)</code> can be used instead. Note that in most cases, calling <code>findDOMNode</code> is now unnecessary – see the example above in the “DOM node refs” section.</p>
|
||||
|
||||
<p>If you have a large codebase, you can use our <a href="https://github.com/facebook/react/blob/master/packages/react-codemod/README.md">automated codemod script</a> to change your code automatically.</p></li>
|
||||
<li><p><code>setProps</code> and <code>replaceProps</code> are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.</p></li>
|
||||
<li><p>ES6 component classes must now extend <code>React.Component</code> in order to enable stateless function components. The <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages">ES3 module pattern</a> will continue to work.</p></li>
|
||||
<li><p>Reusing and mutating a <code>style</code> object between renders has been deprecated. This mirrors our change to freeze the <code>props</code> object.</p></li>
|
||||
<li><p>Add-Ons: <code>cloneWithProps</code> is now deprecated. Use <a href="/react/docs/top-level-api.html#react.cloneelement"><code>React.cloneElement</code></a> instead (unlike <code>cloneWithProps</code>, <code>cloneElement</code> does not merge <code>className</code> or <code>style</code> automatically; you can merge them manually if needed).</p></li>
|
||||
<li><p>Add-Ons: To improve reliability, <code>CSSTransitionGroup</code> will no longer listen to transition events. Instead, you should specify transition durations manually using props such as <code>transitionEnterTimeout={500}</code>.</p></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="notable-enhancements"></a>Notable enhancements <a class="hash-link" href="#notable-enhancements">#</a></h3>
|
||||
<ul>
|
||||
<li>Added <code>React.Children.toArray</code> which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your <code>render</code> methods, especially if you want to reorder or slice <code>this.props.children</code> before passing it down. In addition, <code>React.Children.map</code> now returns plain arrays too.</li>
|
||||
<li>React uses <code>console.error</code> instead of <code>console.warn</code> for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)</li>
|
||||
<li>Previously, including untrusted objects as React children <a href="http://danlec.com/blog/xss-via-a-spoofed-react-element">could result in an XSS security vulnerability</a>. This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, <a href="https://github.com/facebook/react/pull/4832">React now tags elements</a> with a specific <a href="http://www.2ality.com/2014/12/es6-symbols.html">ES2015 (ES6) <code>Symbol</code></a> in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a <code>Symbol</code> polyfill for older browsers, such as the one included by <a href="http://babeljs.io/docs/usage/polyfill/">Babel’s polyfill</a>.</li>
|
||||
<li>When possible, React DOM now generates XHTML-compatible markup.</li>
|
||||
<li>React DOM now supports these standard HTML attributes: <code>capture</code>, <code>challenge</code>, <code>inputMode</code>, <code>is</code>, <code>keyParams</code>, <code>keyType</code>, <code>minLength</code>, <code>summary</code>, <code>wrap</code>. It also now supports these non-standard attributes: <code>autoSave</code>, <code>results</code>, <code>security</code>.</li>
|
||||
<li>React DOM now supports these SVG attributes, which render into namespaced attributes: <code>xlinkActuate</code>, <code>xlinkArcrole</code>, <code>xlinkHref</code>, <code>xlinkRole</code>, <code>xlinkShow</code>, <code>xlinkTitle</code>, <code>xlinkType</code>, <code>xmlBase</code>, <code>xmlLang</code>, <code>xmlSpace</code>.</li>
|
||||
<li>The <code>image</code> SVG tag is now supported by React DOM.</li>
|
||||
<li>In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an <code>is="..."</code> attribute).</li>
|
||||
<li>React DOM now supports these media events on <code>audio</code> and <code>video</code> tags: <code>onAbort</code>, <code>onCanPlay</code>, <code>onCanPlayThrough</code>, <code>onDurationChange</code>, <code>onEmptied</code>, <code>onEncrypted</code>, <code>onEnded</code>, <code>onError</code>, <code>onLoadedData</code>, <code>onLoadedMetadata</code>, <code>onLoadStart</code>, <code>onPause</code>, <code>onPlay</code>, <code>onPlaying</code>, <code>onProgress</code>, <code>onRateChange</code>, <code>onSeeked</code>, <code>onSeeking</code>, <code>onStalled</code>, <code>onSuspend</code>, <code>onTimeUpdate</code>, <code>onVolumeChange</code>, <code>onWaiting</code>.</li>
|
||||
<li>Many small performance improvements have been made.</li>
|
||||
<li>Many warnings show more context than before.</li>
|
||||
<li>Add-Ons: A <a href="https://github.com/facebook/react/pull/3355"><code>shallowCompare</code></a> add-on has been added as a migration path for <code>PureRenderMixin</code> in ES6 classes.</li>
|
||||
<li>Add-Ons: <code>CSSTransitionGroup</code> can now use <a href="https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes">custom class names</a> instead of appending <code>-enter-active</code> or similar to the transition name.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="new-helpful-warnings"></a>New helpful warnings <a class="hash-link" href="#new-helpful-warnings">#</a></h3>
|
||||
<ul>
|
||||
<li>React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.</li>
|
||||
<li>Passing <code>document.body</code> directly as the container to <code>ReactDOM.render</code> now gives a warning as doing so can cause problems with browser extensions that modify the DOM.</li>
|
||||
<li>Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="notable-bug-fixes"></a>Notable bug fixes <a class="hash-link" href="#notable-bug-fixes">#</a></h3>
|
||||
<ul>
|
||||
<li>Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.</li>
|
||||
<li>SVG elements are created with the correct namespace in more cases.</li>
|
||||
<li>React DOM now renders <code><option></code> elements with multiple text children properly and renders <code><select></code> elements on the server with the correct option selected.</li>
|
||||
<li>When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.</li>
|
||||
<li>Using non-lowercase HTML tag names in React DOM (e.g., <code>React.createElement('DIV')</code>) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).</li>
|
||||
<li>React DOM understands that these CSS properties are unitless and does not append “px” to their values: <code>animationIterationCount</code>, <code>boxOrdinalGroup</code>, <code>flexOrder</code>, <code>tabSize</code>, <code>stopOpacity</code>.</li>
|
||||
<li>Add-Ons: When using the test utils, <code>Simulate.mouseEnter</code> and <code>Simulate.mouseLeave</code> now work.</li>
|
||||
<li>Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a>
|
||||
@@ -382,94 +566,6 @@ for more info.</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
July 3, 2015
|
||||
by
|
||||
|
||||
<a href="http://benalpert.com">Ben Alpert</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This week, many people in the React community are at <a href="https://www.react-europe.org/">ReactEurope</a> in the beautiful (and very warm) city of Paris, the second React conference that's been held to date. At our last conference, we released the first beta of React 0.13, and we figured we'd do the same today with our first beta of React 0.14, giving you something to play with if you're not at the conference or you're looking for something to do on the way home.</p>
|
||||
|
||||
<p>With React 0.14, we're continuing to let React mature and to make minor changes as the APIs continue to settle down. I'll talk only about the two largest changes in this blog post; when we publish the final release we'll be sure to update all of our documentation and include a full changelog.</p>
|
||||
|
||||
<p>You can install the new beta with <code>npm install react@0.14.0-beta1</code> and <code>npm install react-dom@0.14.0-beta1</code>. As mentioned in <a href="https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating react-tools</a>, we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.</p>
|
||||
<h2><a class="anchor" name="two-packages"></a>Two Packages <a class="hash-link" href="#two-packages">#</a></h2>
|
||||
<p>As we look at packages like <a href="https://github.com/facebook/react-native">react-native</a>, <a href="https://github.com/reactjs/react-art">react-art</a>, <a href="https://github.com/Flipboard/react-canvas">react-canvas</a>, and <a href="https://github.com/Izzimach/react-three">react-three</a>, it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM.</p>
|
||||
|
||||
<p>We think the true foundations of React are simply ideas of components and elements: being able to describe what you want to render in a declarative way. These are the pieces shared by all of these different packages. The parts of React specific to certain rendering targets aren't usually what we think of when we think of React. As one example, DOM diffing currently enables us to build React for the browser and make it fast enough to be useful, but if the DOM didn't have a stateful, imperative API, we might not need diffing at all.</p>
|
||||
|
||||
<p>To make this more clear and to make it easier to build more environments that React can render to, we're splitting the main <code>react</code> package into two: <code>react</code> and <code>react-dom</code>.</p>
|
||||
|
||||
<p>The <code>react</code> package contains <code>React.createElement</code>, <code>React.createClass</code> and <code>React.Component</code>, <code>React.PropTypes</code>, <code>React.Children</code>, and the other helpers related to elements and component classes. We think of these as the <a href="http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/"><em>isomorphic</em></a> or <a href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9"><em>universal</em></a> helpers that you need to build components.</p>
|
||||
|
||||
<p>The <code>react-dom</code> package contains <code>ReactDOM.render</code>, <code>ReactDOM.unmountComponentAtNode</code>, and <code>ReactDOM.findDOMNode</code>, and in <code>react-dom/server</code> we have server-side rendering support with <code>ReactDOMServer.renderToString</code> and <code>ReactDOMServer.renderToStaticMarkup</code>.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><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">ReactDOM</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-dom'</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span> <span class="nx">World</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span> <span class="o">/></span><span class="p">,</span> <span class="nx">node</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>We anticipate that most components will need to depend only on the <code>react</code> package, which is lightweight and doesn't include any of the actual rendering logic. To start, we expect people to render DOM-based components with our <code>react-dom</code> package, but there's nothing stopping someone from diving deep on performance and writing a <code>awesome-faster-react-dom</code> package which can render <em>the exact same DOM-based components</em>. By decoupling the component definitions from the rendering, this becomes possible.</p>
|
||||
|
||||
<p>More importantly, this paves the way to writing components that can be shared between the web version of React and React Native. This isn't yet easily possible, but we intend to make this easy in a future version so you can share React code between your website and native apps.</p>
|
||||
|
||||
<p>The addons have moved to separate packages as well: <code>react-addons-clone-with-props</code>, <code>react-addons-create-fragment</code>, <code>react-addons-css-transition-group</code>, <code>react-addons-linked-state-mixin</code>, <code>react-addons-pure-render-mixin</code>, <code>react-addons-shallow-compare</code>, <code>react-addons-transition-group</code>, and <code>react-addons-update</code>, plus <code>ReactDOM.unstable_batchedUpdates</code> in <code>react-dom</code>.</p>
|
||||
|
||||
<p>For now, please use the same version of <code>react</code> and <code>react-dom</code> in your apps to avoid versioning problems -- but we plan to remove this requirement later. (This release includes the old methods in the <code>react</code> package with a deprecation warning, but they'll be removed completely in 0.15.)</p>
|
||||
<h2><a class="anchor" name="dom-node-refs"></a>DOM node refs <a class="hash-link" href="#dom-node-refs">#</a></h2>
|
||||
<p>The other big change we're making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a <code>ref</code> to a DOM component and realized that the only useful thing you can do with it is call <code>this.refs.giraffe.getDOMNode()</code> to get the underlying DOM node. In this release, <code>this.refs.giraffe</code> <em>is</em> the actual DOM node.</p>
|
||||
|
||||
<p>Refs to custom component classes work exactly as before.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">Zoo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="nx">Giraffe</span><span class="err">'</span><span class="nx">s</span> <span class="nx">name</span><span class="o">:</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"giraffe"</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">showName</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Previously:</span>
|
||||
<span class="c1">// var input = this.refs.giraffe.getDOMNode();</span>
|
||||
<span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">giraffe</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This change also applies to the return result of <code>ReactDOM.render</code> when passing a DOM node as the top component. As with refs, this change does not affect custom components (eg. <code><MyFancyMenu></code> or <code><MyContextProvider></code>), which remain unaffected by this change.</p>
|
||||
|
||||
<p>Along with this change, we're also replacing <code>component.getDOMNode()</code> with <code>ReactDOM.findDOMNode(component)</code>. The <code>findDOMNode</code> method drills down to find which DOM node was rendered by a component, but it returns its argument when passed a DOM node so it's safe to call on a DOM component too. We introduced this function quietly in the last release, but now we're deprecating <code>.getDOMNode()</code> completely: it should be easy to change all existing calls in your code to be <code>ReactDOM.findDOMNode</code>. We also have an <a href="https://www.npmjs.com/package/react-codemod">automated codemod script</a> to help you with this transition. Note that the <code>findDOMNode</code> calls are unnecessary when you already have a DOM component ref (as in the example above), so you can (and should) skip them in most cases going forward.</p>
|
||||
|
||||
<p>We hope you're as excited about this release as we are! Let us know what you think of it.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+41
-104
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,45 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/05/06/flux.html">Flux: An Application Architecture for React</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
May 6, 2014
|
||||
by
|
||||
|
||||
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React. Check out the video here:</p>
|
||||
|
||||
<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
<p>To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.</p>
|
||||
|
||||
<p>In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.</p>
|
||||
|
||||
<p>When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.</p>
|
||||
|
||||
<p>Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc">example of this architecture</a> is available, along with more <a href="https://facebook.github.io/flux/docs/overview.html">detailed documentation</a> and a <a href="https://facebook.github.io/flux/docs/todo-list.html">tutorial</a>. Look for more examples to come in the future.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a>
|
||||
@@ -393,108 +432,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.10.0-r
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
March 14, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/jonasgebhardt">Jonas Gebhardt</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.</p>
|
||||
<h2><a class="anchor" name="little-framework-big-splash"></a>"Little framework BIG splash" <a class="hash-link" href="#little-framework-big-splash">#</a></h2>
|
||||
<p>Let's start with yet another refreshing introduction to React: Craig Savolainen (<a href="https://twitter.com/maedhr">@maedhr</a>) walks through some first steps, demonstrating <a href="http://infinitemonkeys.influitive.com/little-framework-big-splash">how to build a Google Maps component</a> using React.</p>
|
||||
<h2><a class="anchor" name="architecting-your-app-with-react"></a>Architecting your app with react <a class="hash-link" href="#architecting-your-app-with-react">#</a></h2>
|
||||
<p>Brandon Konkle (<a href="https://twitter.com/bkonkle">@bkonkle</a>)
|
||||
<a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Architecting your app with react</a>
|
||||
We're looking forward to part 2!</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.</p>
|
||||
|
||||
<p><a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-vs.-async-dom-manipulation"></a>React vs. async DOM manipulation <a class="hash-link" href="#react-vs.-async-dom-manipulation">#</a></h2>
|
||||
<p>Eliseu Monar (<a href="https://twitter.com/eliseumds">@eliseumds</a>)'s post "<a href="http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering">ReactJS vs async concurrent rendering</a>" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.</p>
|
||||
<h2><a class="anchor" name="react-scala-and-the-play-framework"></a>React, Scala and the Play Framework <a class="hash-link" href="#react-scala-and-the-play-framework">#</a></h2>
|
||||
<p><a href="http://matthiasnehlsen.com/">Matthias Nehlsen</a> wrote a detailed introductory piece on <a href="http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/">React and the Play Framework</a>, including a helpful architectural diagram of a typical React app.</p>
|
||||
|
||||
<p>Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.</p>
|
||||
|
||||
<p>In <a href="http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/">another article</a>, he walks us through the process of using React with scala.js to implement app-wide undo functionality.</p>
|
||||
|
||||
<p>Also check out his <a href="http://m.ustream.tv/recorded/42780242">talk</a> at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.</p>
|
||||
<h2><a class="anchor" name="react-and-backbone"></a>React and Backbone <a class="hash-link" href="#react-and-backbone">#</a></h2>
|
||||
<p>The folks over at <a href="https://venmo.com/">Venmo</a> are using React in conjunction with Backbone.
|
||||
Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasaboyt</a>) wrote <a href="http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html">this detailed piece</a> about why React and Backbone are "a fantastic pairing".</p>
|
||||
<h2><a class="anchor" name="react-vs.-ember"></a>React vs. Ember <a class="hash-link" href="#react-vs.-ember">#</a></h2>
|
||||
<p>Eric Berry (<a href="https://twitter.com/coderberry">@coderberry</a>) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: <a href="https://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/">"Facebook React vs. Ember"</a>.</p>
|
||||
<h2><a class="anchor" name="react-and-plain-old-html"></a>React and plain old HTML <a class="hash-link" href="#react-and-plain-old-html">#</a></h2>
|
||||
<p>Daniel Lo Nigro (<a href="https://twitter.com/Daniel15">@Daniel15</a>) created <a href="https://github.com/reactjs/react-magic">React-Magic</a>, which leverages React to ajaxify plain old html pages and even <a href="http://stuff.dan.cx/facebook/react-hacks/magic/red.php">allows CSS transitions between pageloads</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.</p>
|
||||
|
||||
<p><a href="https://github.com/reactjs/react-magic">Check out the project on GitHub...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>On a related note, <a href="https://turbo-react.herokuapp.com/">Reactize</a> by Ross Allen (<a href="https://twitter.com/ssorallen">@ssorallen</a>) is a similarly awesome project: A wrapper for Rails' <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, which seems to have inspired John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) to then create <a href="http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/">a server-rendered version using the JSX transformer in Rails middleware</a>.</p>
|
||||
<h2><a class="anchor" name="react-and-object.observe"></a>React and Object.observe <a class="hash-link" href="#react-and-object.observe">#</a></h2>
|
||||
<p>Check out <a href="https://github.com/fdecampredon">François de Campredon</a>'s implementation of <a href="https://github.com/fdecampredon/react-observe-todomvc/">TodoMVC based on React and ES6's Object.observe</a>.</p>
|
||||
<h2><a class="anchor" name="react-and-angular"></a>React and Angular <a class="hash-link" href="#react-and-angular">#</a></h2>
|
||||
<p>Ian Bicking (<a href="https://twitter.com/ianbicking">@ianbicking</a>) of Mozilla Labs <a href="https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE">explains why he "decided to go with React instead of Angular.js"</a>.</p>
|
||||
<h3><a class="anchor" name="ng-react-update"></a>ng-React Update <a class="hash-link" href="#ng-react-update">#</a></h3>
|
||||
<p><a href="https://github.com/davidchang">David Chang</a> works through some performance improvements of his <a href="https://github.com/davidchang/ngReact">ngReact</a> project. His post <a href="http://davidandsuzi.com/ngreact-update/">"ng-React Update - React 0.9 and Angular Track By"</a> includes some helpful advice on boosting render performance for Angular components.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.</p>
|
||||
|
||||
<p>That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.</p>
|
||||
|
||||
<p><a href="http://davidandsuzi.com/ngreact-update/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="react-and-web-components"></a>React and Web Components <a class="hash-link" href="#react-and-web-components">#</a></h2>
|
||||
<p>Jonathan Krause (<a href="https://twitter.com/jonykrause">@jonykrause</a>) offers his thoughts regarding <a href="http://jonykrau.se/posts/the-value-of-react">parallels between React and Web Components</a>, highlighting the value of React's ability to render pages on the server practically for free.</p>
|
||||
<h2><a class="anchor" name="immutable-react"></a>Immutable React <a class="hash-link" href="#immutable-react">#</a></h2>
|
||||
<p><a href="http://pk11.kinja.com/">Peter Hausel</a> shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to <a href="https://npmjs.org/package/mori">mori</a>), really taking advantage of the framework's one-way reactive data binding:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.</p>
|
||||
|
||||
<p><a href="http://tech.kinja.com/immutable-react-1495205675">Read the full post</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="d3-and-react"></a>D3 and React <a class="hash-link" href="#d3-and-react">#</a></h2>
|
||||
<p><a href="http://10consulting.com/">Ben Smith</a> built some great SVG-based charting components using a little less of D3 and a little more of React: <a href="http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/">D3 and React - the future of charting components?</a></p>
|
||||
<h2><a class="anchor" name="om-and-react"></a>Om and React <a class="hash-link" href="#om-and-react">#</a></h2>
|
||||
<p>Josh Haberman (<a href="https://twitter.com/JoshHaberman">@joshhaberman</a>) discusses performance differences between React, Om and traditional MVC frameworks in "<a href="http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html">A closer look at OM vs React performance</a>".</p>
|
||||
|
||||
<p>Speaking of Om: <a href="https://github.com/sgrove/omchaya">Omchaya</a> by Sean Grove (<a href="https://twitter.com/sgrove">@sgrove</a>) is a neat Cljs/Om example project.</p>
|
||||
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>— John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+104
-133
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,108 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
March 14, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/jonasgebhardt">Jonas Gebhardt</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.</p>
|
||||
<h2><a class="anchor" name="little-framework-big-splash"></a>"Little framework BIG splash" <a class="hash-link" href="#little-framework-big-splash">#</a></h2>
|
||||
<p>Let's start with yet another refreshing introduction to React: Craig Savolainen (<a href="https://twitter.com/maedhr">@maedhr</a>) walks through some first steps, demonstrating <a href="http://infinitemonkeys.influitive.com/little-framework-big-splash">how to build a Google Maps component</a> using React.</p>
|
||||
<h2><a class="anchor" name="architecting-your-app-with-react"></a>Architecting your app with react <a class="hash-link" href="#architecting-your-app-with-react">#</a></h2>
|
||||
<p>Brandon Konkle (<a href="https://twitter.com/bkonkle">@bkonkle</a>)
|
||||
<a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Architecting your app with react</a>
|
||||
We're looking forward to part 2!</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.</p>
|
||||
|
||||
<p><a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-vs.-async-dom-manipulation"></a>React vs. async DOM manipulation <a class="hash-link" href="#react-vs.-async-dom-manipulation">#</a></h2>
|
||||
<p>Eliseu Monar (<a href="https://twitter.com/eliseumds">@eliseumds</a>)'s post "<a href="http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering">ReactJS vs async concurrent rendering</a>" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.</p>
|
||||
<h2><a class="anchor" name="react-scala-and-the-play-framework"></a>React, Scala and the Play Framework <a class="hash-link" href="#react-scala-and-the-play-framework">#</a></h2>
|
||||
<p><a href="http://matthiasnehlsen.com/">Matthias Nehlsen</a> wrote a detailed introductory piece on <a href="http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/">React and the Play Framework</a>, including a helpful architectural diagram of a typical React app.</p>
|
||||
|
||||
<p>Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.</p>
|
||||
|
||||
<p>In <a href="http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/">another article</a>, he walks us through the process of using React with scala.js to implement app-wide undo functionality.</p>
|
||||
|
||||
<p>Also check out his <a href="http://m.ustream.tv/recorded/42780242">talk</a> at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.</p>
|
||||
<h2><a class="anchor" name="react-and-backbone"></a>React and Backbone <a class="hash-link" href="#react-and-backbone">#</a></h2>
|
||||
<p>The folks over at <a href="https://venmo.com/">Venmo</a> are using React in conjunction with Backbone.
|
||||
Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasaboyt</a>) wrote <a href="http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html">this detailed piece</a> about why React and Backbone are "a fantastic pairing".</p>
|
||||
<h2><a class="anchor" name="react-vs.-ember"></a>React vs. Ember <a class="hash-link" href="#react-vs.-ember">#</a></h2>
|
||||
<p>Eric Berry (<a href="https://twitter.com/coderberry">@coderberry</a>) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: <a href="https://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/">"Facebook React vs. Ember"</a>.</p>
|
||||
<h2><a class="anchor" name="react-and-plain-old-html"></a>React and plain old HTML <a class="hash-link" href="#react-and-plain-old-html">#</a></h2>
|
||||
<p>Daniel Lo Nigro (<a href="https://twitter.com/Daniel15">@Daniel15</a>) created <a href="https://github.com/reactjs/react-magic">React-Magic</a>, which leverages React to ajaxify plain old html pages and even <a href="http://stuff.dan.cx/facebook/react-hacks/magic/red.php">allows CSS transitions between pageloads</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.</p>
|
||||
|
||||
<p><a href="https://github.com/reactjs/react-magic">Check out the project on GitHub...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>On a related note, <a href="https://turbo-react.herokuapp.com/">Reactize</a> by Ross Allen (<a href="https://twitter.com/ssorallen">@ssorallen</a>) is a similarly awesome project: A wrapper for Rails' <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, which seems to have inspired John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) to then create <a href="http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/">a server-rendered version using the JSX transformer in Rails middleware</a>.</p>
|
||||
<h2><a class="anchor" name="react-and-object.observe"></a>React and Object.observe <a class="hash-link" href="#react-and-object.observe">#</a></h2>
|
||||
<p>Check out <a href="https://github.com/fdecampredon">François de Campredon</a>'s implementation of <a href="https://github.com/fdecampredon/react-observe-todomvc/">TodoMVC based on React and ES6's Object.observe</a>.</p>
|
||||
<h2><a class="anchor" name="react-and-angular"></a>React and Angular <a class="hash-link" href="#react-and-angular">#</a></h2>
|
||||
<p>Ian Bicking (<a href="https://twitter.com/ianbicking">@ianbicking</a>) of Mozilla Labs <a href="https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE">explains why he "decided to go with React instead of Angular.js"</a>.</p>
|
||||
<h3><a class="anchor" name="ng-react-update"></a>ng-React Update <a class="hash-link" href="#ng-react-update">#</a></h3>
|
||||
<p><a href="https://github.com/davidchang">David Chang</a> works through some performance improvements of his <a href="https://github.com/davidchang/ngReact">ngReact</a> project. His post <a href="http://davidandsuzi.com/ngreact-update/">"ng-React Update - React 0.9 and Angular Track By"</a> includes some helpful advice on boosting render performance for Angular components.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.</p>
|
||||
|
||||
<p>That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.</p>
|
||||
|
||||
<p><a href="http://davidandsuzi.com/ngreact-update/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="react-and-web-components"></a>React and Web Components <a class="hash-link" href="#react-and-web-components">#</a></h2>
|
||||
<p>Jonathan Krause (<a href="https://twitter.com/jonykrause">@jonykrause</a>) offers his thoughts regarding <a href="http://jonykrau.se/posts/the-value-of-react">parallels between React and Web Components</a>, highlighting the value of React's ability to render pages on the server practically for free.</p>
|
||||
<h2><a class="anchor" name="immutable-react"></a>Immutable React <a class="hash-link" href="#immutable-react">#</a></h2>
|
||||
<p><a href="http://pk11.kinja.com/">Peter Hausel</a> shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to <a href="https://npmjs.org/package/mori">mori</a>), really taking advantage of the framework's one-way reactive data binding:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.</p>
|
||||
|
||||
<p><a href="http://tech.kinja.com/immutable-react-1495205675">Read the full post</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="d3-and-react"></a>D3 and React <a class="hash-link" href="#d3-and-react">#</a></h2>
|
||||
<p><a href="http://10consulting.com/">Ben Smith</a> built some great SVG-based charting components using a little less of D3 and a little more of React: <a href="http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/">D3 and React - the future of charting components?</a></p>
|
||||
<h2><a class="anchor" name="om-and-react"></a>Om and React <a class="hash-link" href="#om-and-react">#</a></h2>
|
||||
<p>Josh Haberman (<a href="https://twitter.com/JoshHaberman">@joshhaberman</a>) discusses performance differences between React, Om and traditional MVC frameworks in "<a href="http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html">A closer look at OM vs React performance</a>".</p>
|
||||
|
||||
<p>Speaking of Om: <a href="https://github.com/sgrove/omchaya">Omchaya</a> by Sean Grove (<a href="https://twitter.com/sgrove">@sgrove</a>) is a neat Cljs/Om example project.</p>
|
||||
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>— John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a>
|
||||
@@ -550,137 +652,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.9.0-rc
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
February 5, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/jonasgebhardt">Jonas Gebhardt</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Interest in React seems to have surged ever since David Nolen (<a href="https://twitter.com/swannodette">@swannodette</a>)'s introduction of <a href="https://github.com/swannodette/om">Om</a> in his post <a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">"The Future of Javascript MVC Frameworks"</a>.</p>
|
||||
|
||||
<p>In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.</p>
|
||||
<h2><a class="anchor" name="react-another-level-of-indirection"></a>"React: Another Level of Indirection" <a class="hash-link" href="#react-another-level-of-indirection">#</a></h2>
|
||||
<p>To start things off, Eric Normand (<a href="https://twitter.com/ericnormand">@ericnormand</a>) of <a href="http://lispcast.com">LispCast</a> makes the case for <a href="http://www.lispcast.com/react-another-level-of-indirection">React from a general functional programming standpoint</a> and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript".</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.</p>
|
||||
|
||||
<p><a href="http://www.lispcast.com/react-another-level-of-indirection">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="reagent-minimalistic-react-for-clojurescript"></a>Reagent: Minimalistic React for ClojureScript <a class="hash-link" href="#reagent-minimalistic-react-for-clojurescript">#</a></h2>
|
||||
<p>Dan Holmsand (<a href="https://twitter.com/holmsand">@holmsand</a>) created <a href="https://holmsand.github.io/reagent/">Reagent</a>, a simplistic ClojureScript API to React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.</p>
|
||||
|
||||
<p>The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.</p>
|
||||
|
||||
<p><a href="https://holmsand.github.io/reagent/">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="functional-dom-programming"></a>Functional DOM programming <a class="hash-link" href="#functional-dom-programming">#</a></h2>
|
||||
<p>React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt (<a href="https://twitter.com/floydophone">@floydophone</a>) explores how one would go about <a href="https://medium.com/p/67d81637d43">writing web apps in a functional manner</a>. Spoiler alert:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.</p>
|
||||
|
||||
<p><a href="https://medium.com/p/67d81637d43">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="kioo-separating-markup-and-logic"></a>Kioo: Separating markup and logic <a class="hash-link" href="#kioo-separating-markup-and-logic">#</a></h2>
|
||||
<p><a href="https://github.com/ckirkendall">Creighton Kirkendall</a> created <a href="https://github.com/ckirkendall/kioo">Kioo</a>, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.</p>
|
||||
|
||||
<p>A basic example from github:</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><header></span>
|
||||
<span class="nt"><h1></span>Header placeholder<span class="nt"></h1></span>
|
||||
<span class="nt"><ul</span> <span class="na">id=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Placeholder<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></header></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>place holder<span class="nt"></div></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span>
|
||||
</code></pre></div><div class="highlight"><pre><code class="language-clojure" data-lang="clojure"><span class="nv">...</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-nav-item</span> <span class="p">[[</span><span class="nv">caption</span> <span class="nv">func</span><span class="p">]]</span>
|
||||
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">"main.html"</span> <span class="p">[</span><span class="ss">:.nav-item</span><span class="p">]</span>
|
||||
<span class="p">{[</span><span class="ss">:a</span><span class="p">]</span> <span class="p">(</span><span class="nf">do-></span> <span class="p">(</span><span class="nf">content</span> <span class="nv">caption</span><span class="p">)</span>
|
||||
<span class="p">(</span><span class="nf">set-attr</span> <span class="ss">:onClick</span> <span class="nv">func</span><span class="p">))}))</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-header</span> <span class="p">[</span><span class="nv">heading</span> <span class="nv">nav-elms</span><span class="p">]</span>
|
||||
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">"main.html"</span> <span class="p">[</span><span class="ss">:header</span><span class="p">]</span>
|
||||
<span class="p">{[</span><span class="ss">:h1</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">heading</span><span class="p">)</span>
|
||||
<span class="p">[</span><span class="ss">:ul</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="nb">map </span><span class="nv">my-nav-item</span> <span class="nv">nav-elms</span><span class="p">))}))</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-page</span> <span class="p">[</span><span class="nv">data</span><span class="p">]</span>
|
||||
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">"main.html"</span>
|
||||
<span class="p">{[</span><span class="ss">:header</span><span class="p">]</span> <span class="p">(</span><span class="nf">substitute</span> <span class="p">(</span><span class="nf">my-header</span> <span class="p">(</span><span class="ss">:heading</span> <span class="nv">data</span><span class="p">)</span>
|
||||
<span class="p">(</span><span class="ss">:navigation</span> <span class="nv">data</span><span class="p">)))</span>
|
||||
<span class="p">[</span><span class="ss">:.content</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="ss">:content</span> <span class="nv">data</span><span class="p">))}))</span>
|
||||
|
||||
<span class="p">(</span><span class="k">def </span><span class="nv">app-state</span> <span class="p">(</span><span class="nf">atom</span> <span class="p">{</span><span class="ss">:heading</span> <span class="s">"main"</span>
|
||||
<span class="ss">:content</span> <span class="s">"Hello World"</span>
|
||||
<span class="ss">:navigation</span> <span class="p">[[</span><span class="s">"home"</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]</span>
|
||||
<span class="p">[</span><span class="s">"next"</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]]}))</span>
|
||||
|
||||
<span class="p">(</span><span class="nf">om/root</span> <span class="nv">app-state</span> <span class="nv">my-page</span> <span class="p">(</span><span class="nf">.-body</span> <span class="nv">js/document</span><span class="p">))</span>
|
||||
</code></pre></div><h2><a class="anchor" name="om"></a>Om <a class="hash-link" href="#om">#</a></h2>
|
||||
<p>In an interview with David Nolen, Tom Coupland (<a href="https://twitter.com/tcoupland">@tcoupland</a>) of InfoQ provides a nice summary of recent developments around Om ("<a href="http://www.infoq.com/news/2014/01/om-react">Om: Enhancing Facebook's React with Immutability</a>").</p>
|
||||
|
||||
<blockquote>
|
||||
<p>David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.</p>
|
||||
|
||||
<p><a href="http://www.infoq.com/news/2014/01/om-react">Read the full interview...</a></p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="a-slice-of-react-clojurescript-and-om"></a>A slice of React, ClojureScript and Om <a class="hash-link" href="#a-slice-of-react-clojurescript-and-om">#</a></h3>
|
||||
<p>Fredrik Dyrkell (<a href="https://twitter.com/lexicallyscoped">@lexicallyscoped</a>) rewrote part of the <a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">React tutorial in both ClojureScript and Om</a>, along with short, helpful explanations.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.</p>
|
||||
|
||||
<p><a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>In a separate post, Dyrkell breaks down <a href="http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html">how to build a binary clock component</a> in Om.</p>
|
||||
|
||||
<p>[<a href="http://www.lexicallyscoped.com/demo/binclock/">Demo</a>] [<a href="https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs">Code</a>]</p>
|
||||
<h3><a class="anchor" name="time-travel-implementing-undo-in-om"></a>Time Travel: Implementing undo in Om <a class="hash-link" href="#time-travel-implementing-undo-in-om">#</a></h3>
|
||||
<p>David Nolen shows how to leverage immutable data structures to <a href="https://swannodette.github.io/2013/12/31/time-travel/">add global undo</a> functionality to an app – using just 13 lines of ClojureScript.</p>
|
||||
<h3><a class="anchor" name="a-step-by-step-om-walkthrough"></a>A Step-by-Step Om Walkthrough <a class="hash-link" href="#a-step-by-step-om-walkthrough">#</a></h3>
|
||||
<p><a href="http://www.joshlehman.me">Josh Lehman</a> took the time to create an extensive <a href="http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/">step-by-step walkthrough</a> of the React tutorial in Om. The well-documented source is on <a href="https://github.com/jalehman/omtut-starter">github</a>.</p>
|
||||
<h3><a class="anchor" name="omkara"></a>Omkara <a class="hash-link" href="#omkara">#</a></h3>
|
||||
<p><a href="https://github.com/brendanyounger">brendanyounger</a> created <a href="https://github.com/brendanyounger/omkara">omkara</a>, a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.</p>
|
||||
<h3><a class="anchor" name="om-experience-report"></a>Om Experience Report <a class="hash-link" href="#om-experience-report">#</a></h3>
|
||||
<p>Adam Solove (<a href="https://twitter.com/asolove/">@asolove</a>) <a href="http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html">dives a little deeper into Om, React and ClojureScript</a>. He shares some helpful tips he gathered while building his <a href="https://github.com/asolove/carto-crayon">CartoCrayon</a> prototype.</p>
|
||||
<h2><a class="anchor" name="not-so-random-tweet"></a>Not-so-random Tweet <a class="hash-link" href="#not-so-random-tweet">#</a></h2>
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>— Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+133
-71
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,137 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
February 5, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/jonasgebhardt">Jonas Gebhardt</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Interest in React seems to have surged ever since David Nolen (<a href="https://twitter.com/swannodette">@swannodette</a>)'s introduction of <a href="https://github.com/swannodette/om">Om</a> in his post <a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">"The Future of Javascript MVC Frameworks"</a>.</p>
|
||||
|
||||
<p>In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.</p>
|
||||
<h2><a class="anchor" name="react-another-level-of-indirection"></a>"React: Another Level of Indirection" <a class="hash-link" href="#react-another-level-of-indirection">#</a></h2>
|
||||
<p>To start things off, Eric Normand (<a href="https://twitter.com/ericnormand">@ericnormand</a>) of <a href="http://lispcast.com">LispCast</a> makes the case for <a href="http://www.lispcast.com/react-another-level-of-indirection">React from a general functional programming standpoint</a> and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript".</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.</p>
|
||||
|
||||
<p><a href="http://www.lispcast.com/react-another-level-of-indirection">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="reagent-minimalistic-react-for-clojurescript"></a>Reagent: Minimalistic React for ClojureScript <a class="hash-link" href="#reagent-minimalistic-react-for-clojurescript">#</a></h2>
|
||||
<p>Dan Holmsand (<a href="https://twitter.com/holmsand">@holmsand</a>) created <a href="https://holmsand.github.io/reagent/">Reagent</a>, a simplistic ClojureScript API to React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.</p>
|
||||
|
||||
<p>The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.</p>
|
||||
|
||||
<p><a href="https://holmsand.github.io/reagent/">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="functional-dom-programming"></a>Functional DOM programming <a class="hash-link" href="#functional-dom-programming">#</a></h2>
|
||||
<p>React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt (<a href="https://twitter.com/floydophone">@floydophone</a>) explores how one would go about <a href="https://medium.com/p/67d81637d43">writing web apps in a functional manner</a>. Spoiler alert:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.</p>
|
||||
|
||||
<p><a href="https://medium.com/p/67d81637d43">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):</p>
|
||||
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="kioo-separating-markup-and-logic"></a>Kioo: Separating markup and logic <a class="hash-link" href="#kioo-separating-markup-and-logic">#</a></h2>
|
||||
<p><a href="https://github.com/ckirkendall">Creighton Kirkendall</a> created <a href="https://github.com/ckirkendall/kioo">Kioo</a>, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.</p>
|
||||
|
||||
<p>A basic example from github:</p>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><header></span>
|
||||
<span class="nt"><h1></span>Header placeholder<span class="nt"></h1></span>
|
||||
<span class="nt"><ul</span> <span class="na">id=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Placeholder<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></header></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">></span>place holder<span class="nt"></div></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span>
|
||||
</code></pre></div><div class="highlight"><pre><code class="language-clojure" data-lang="clojure"><span class="nv">...</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-nav-item</span> <span class="p">[[</span><span class="nv">caption</span> <span class="nv">func</span><span class="p">]]</span>
|
||||
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">"main.html"</span> <span class="p">[</span><span class="ss">:.nav-item</span><span class="p">]</span>
|
||||
<span class="p">{[</span><span class="ss">:a</span><span class="p">]</span> <span class="p">(</span><span class="nf">do-></span> <span class="p">(</span><span class="nf">content</span> <span class="nv">caption</span><span class="p">)</span>
|
||||
<span class="p">(</span><span class="nf">set-attr</span> <span class="ss">:onClick</span> <span class="nv">func</span><span class="p">))}))</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-header</span> <span class="p">[</span><span class="nv">heading</span> <span class="nv">nav-elms</span><span class="p">]</span>
|
||||
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">"main.html"</span> <span class="p">[</span><span class="ss">:header</span><span class="p">]</span>
|
||||
<span class="p">{[</span><span class="ss">:h1</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">heading</span><span class="p">)</span>
|
||||
<span class="p">[</span><span class="ss">:ul</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="nb">map </span><span class="nv">my-nav-item</span> <span class="nv">nav-elms</span><span class="p">))}))</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-page</span> <span class="p">[</span><span class="nv">data</span><span class="p">]</span>
|
||||
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">"main.html"</span>
|
||||
<span class="p">{[</span><span class="ss">:header</span><span class="p">]</span> <span class="p">(</span><span class="nf">substitute</span> <span class="p">(</span><span class="nf">my-header</span> <span class="p">(</span><span class="ss">:heading</span> <span class="nv">data</span><span class="p">)</span>
|
||||
<span class="p">(</span><span class="ss">:navigation</span> <span class="nv">data</span><span class="p">)))</span>
|
||||
<span class="p">[</span><span class="ss">:.content</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="ss">:content</span> <span class="nv">data</span><span class="p">))}))</span>
|
||||
|
||||
<span class="p">(</span><span class="k">def </span><span class="nv">app-state</span> <span class="p">(</span><span class="nf">atom</span> <span class="p">{</span><span class="ss">:heading</span> <span class="s">"main"</span>
|
||||
<span class="ss">:content</span> <span class="s">"Hello World"</span>
|
||||
<span class="ss">:navigation</span> <span class="p">[[</span><span class="s">"home"</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]</span>
|
||||
<span class="p">[</span><span class="s">"next"</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]]}))</span>
|
||||
|
||||
<span class="p">(</span><span class="nf">om/root</span> <span class="nv">app-state</span> <span class="nv">my-page</span> <span class="p">(</span><span class="nf">.-body</span> <span class="nv">js/document</span><span class="p">))</span>
|
||||
</code></pre></div><h2><a class="anchor" name="om"></a>Om <a class="hash-link" href="#om">#</a></h2>
|
||||
<p>In an interview with David Nolen, Tom Coupland (<a href="https://twitter.com/tcoupland">@tcoupland</a>) of InfoQ provides a nice summary of recent developments around Om ("<a href="http://www.infoq.com/news/2014/01/om-react">Om: Enhancing Facebook's React with Immutability</a>").</p>
|
||||
|
||||
<blockquote>
|
||||
<p>David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.</p>
|
||||
|
||||
<p><a href="http://www.infoq.com/news/2014/01/om-react">Read the full interview...</a></p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="a-slice-of-react-clojurescript-and-om"></a>A slice of React, ClojureScript and Om <a class="hash-link" href="#a-slice-of-react-clojurescript-and-om">#</a></h3>
|
||||
<p>Fredrik Dyrkell (<a href="https://twitter.com/lexicallyscoped">@lexicallyscoped</a>) rewrote part of the <a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">React tutorial in both ClojureScript and Om</a>, along with short, helpful explanations.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.</p>
|
||||
|
||||
<p><a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>In a separate post, Dyrkell breaks down <a href="http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html">how to build a binary clock component</a> in Om.</p>
|
||||
|
||||
<p>[<a href="http://www.lexicallyscoped.com/demo/binclock/">Demo</a>] [<a href="https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs">Code</a>]</p>
|
||||
<h3><a class="anchor" name="time-travel-implementing-undo-in-om"></a>Time Travel: Implementing undo in Om <a class="hash-link" href="#time-travel-implementing-undo-in-om">#</a></h3>
|
||||
<p>David Nolen shows how to leverage immutable data structures to <a href="https://swannodette.github.io/2013/12/31/time-travel/">add global undo</a> functionality to an app – using just 13 lines of ClojureScript.</p>
|
||||
<h3><a class="anchor" name="a-step-by-step-om-walkthrough"></a>A Step-by-Step Om Walkthrough <a class="hash-link" href="#a-step-by-step-om-walkthrough">#</a></h3>
|
||||
<p><a href="http://www.joshlehman.me">Josh Lehman</a> took the time to create an extensive <a href="http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/">step-by-step walkthrough</a> of the React tutorial in Om. The well-documented source is on <a href="https://github.com/jalehman/omtut-starter">github</a>.</p>
|
||||
<h3><a class="anchor" name="omkara"></a>Omkara <a class="hash-link" href="#omkara">#</a></h3>
|
||||
<p><a href="https://github.com/brendanyounger">brendanyounger</a> created <a href="https://github.com/brendanyounger/omkara">omkara</a>, a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.</p>
|
||||
<h3><a class="anchor" name="om-experience-report"></a>Om Experience Report <a class="hash-link" href="#om-experience-report">#</a></h3>
|
||||
<p>Adam Solove (<a href="https://twitter.com/asolove/">@asolove</a>) <a href="http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html">dives a little deeper into Om, React and ClojureScript</a>. He shares some helpful tips he gathered while building his <a href="https://github.com/asolove/carto-crayon">CartoCrayon</a> prototype.</p>
|
||||
<h2><a class="anchor" name="not-so-random-tweet"></a>Not-so-random Tweet <a class="hash-link" href="#not-so-random-tweet">#</a></h2>
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>— Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a>
|
||||
@@ -439,75 +570,6 @@ componentDidUpdate: function() {
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/12/19/react-v0.8.0.html">React v0.8</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
December 19, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>I'll start by answering the obvious question:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>What happened to 0.6 and 0.7?</p>
|
||||
</blockquote>
|
||||
|
||||
<p>It's become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that's a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our <code>react-tools</code> module which includes React, but when browserifying that ends up packaging all of <code>esprima</code> and some other dependencies that aren't needed on the client. So we wanted to make this whole experience better.</p>
|
||||
|
||||
<p>We talked with <a href="https://github.com/jeffbski">Jeff Barczewski</a> who was the owner of the <code>react</code> module on npm. He was kind enough to transition ownership to us and release his package under a different name: <code>autoflow</code>. I encourage you to <a href="https://github.com/jeffbski/autoflow">check it out</a> if you're writing a lot of asynchronous code. In order to not break all of <code>react</code>'s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We're also including a warning if you use our <code>react</code> module like you would use the previous package.</p>
|
||||
|
||||
<p>In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven't added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.</p>
|
||||
|
||||
<p>We hope that by releasing <code>react</code> on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>rows</code> & <code>cols</code> for <code><textarea></code></li>
|
||||
<li><code>defer</code> & <code>async</code> for <code><script></code></li>
|
||||
<li><code>loop</code> for <code><audio></code> & <code><video></code></li>
|
||||
<li><code>autoCorrect</code> for form fields (a non-standard attribute only supported by mobile WebKit)</li>
|
||||
</ul></li>
|
||||
<li>Improved error messages</li>
|
||||
<li>Fixed Selection events in IE11</li>
|
||||
<li>Added <code>onContextMenu</code> events</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>Fixed bugs with TransitionGroup when children were undefined</li>
|
||||
<li>Added support for <code>onTransition</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Upgraded <code>jstransform</code> and <code>esprima-fb</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for use in IE8</li>
|
||||
<li>Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+71
-71
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,75 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/12/19/react-v0.8.0.html">React v0.8</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
December 19, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>I'll start by answering the obvious question:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>What happened to 0.6 and 0.7?</p>
|
||||
</blockquote>
|
||||
|
||||
<p>It's become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that's a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our <code>react-tools</code> module which includes React, but when browserifying that ends up packaging all of <code>esprima</code> and some other dependencies that aren't needed on the client. So we wanted to make this whole experience better.</p>
|
||||
|
||||
<p>We talked with <a href="https://github.com/jeffbski">Jeff Barczewski</a> who was the owner of the <code>react</code> module on npm. He was kind enough to transition ownership to us and release his package under a different name: <code>autoflow</code>. I encourage you to <a href="https://github.com/jeffbski/autoflow">check it out</a> if you're writing a lot of asynchronous code. In order to not break all of <code>react</code>'s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We're also including a warning if you use our <code>react</code> module like you would use the previous package.</p>
|
||||
|
||||
<p>In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven't added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.</p>
|
||||
|
||||
<p>We hope that by releasing <code>react</code> on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>rows</code> & <code>cols</code> for <code><textarea></code></li>
|
||||
<li><code>defer</code> & <code>async</code> for <code><script></code></li>
|
||||
<li><code>loop</code> for <code><audio></code> & <code><video></code></li>
|
||||
<li><code>autoCorrect</code> for form fields (a non-standard attribute only supported by mobile WebKit)</li>
|
||||
</ul></li>
|
||||
<li>Improved error messages</li>
|
||||
<li>Fixed Selection events in IE11</li>
|
||||
<li>Added <code>onContextMenu</code> events</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>Fixed bugs with TransitionGroup when children were undefined</li>
|
||||
<li>Added support for <code>onTransition</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Upgraded <code>jstransform</code> and <code>esprima-fb</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for use in IE8</li>
|
||||
<li>Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/12/18/react-v0.5.2-v0.4.2.html">React v0.5.2, v0.4.2</a>
|
||||
@@ -403,75 +472,6 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
October 16, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.</p>
|
||||
|
||||
<p>The biggest change you'll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
|
||||
|
||||
<p>The other major change in v0.5 is that we've added an additional build - <code>react-with-addons</code> - which adds support for some extras that we've been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
|
||||
<h2><a class="anchor" name="thanks-to-our-community"></a>Thanks to Our Community <a class="hash-link" href="#thanks-to-our-community">#</a></h2>
|
||||
<p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.</p>
|
||||
|
||||
<p>It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
|
||||
<ul>
|
||||
<li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
|
||||
<li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
|
||||
<li>Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.</li>
|
||||
<li>Support for Selection events.</li>
|
||||
<li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent">Composition events</a>.</li>
|
||||
<li>Support for additional DOM properties (<code>charSet</code>, <code>content</code>, <code>form</code>, <code>httpEquiv</code>, <code>rowSpan</code>, <code>autoCapitalize</code>).</li>
|
||||
<li>Support for additional SVG properties (<code>rx</code>, <code>ry</code>).</li>
|
||||
<li>Support for using <code>getInitialState</code> and <code>getDefaultProps</code> in mixins.</li>
|
||||
<li>Support mounting into iframes.</li>
|
||||
<li>Bug fixes for controlled form components.</li>
|
||||
<li>Bug fixes for SVG element creation.</li>
|
||||
<li>Added <code>React.version</code>.</li>
|
||||
<li>Added <code>React.isValidClass</code> - Used to determine if a value is a valid component constructor.</li>
|
||||
<li>Removed <code>React.autoBind</code> - This was deprecated in v0.4 and now properly removed.</li>
|
||||
<li>Renamed <code>React.unmountAndReleaseReactRootNode</code> to <code>React.unmountComponentAtNode</code>.</li>
|
||||
<li>Began laying down work for refined performance analysis.</li>
|
||||
<li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
|
||||
<li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons-new"></a>React with Addons (New!) <a class="hash-link" href="#react-with-addons-new">#</a></h3>
|
||||
<ul>
|
||||
<li>Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
|
||||
<li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
|
||||
<li>Improved compatibility for Windows</li>
|
||||
<li>Improved support for maintaining line numbers when transforming.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+71
-94
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,75 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
October 16, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.</p>
|
||||
|
||||
<p>The biggest change you'll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
|
||||
|
||||
<p>The other major change in v0.5 is that we've added an additional build - <code>react-with-addons</code> - which adds support for some extras that we've been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
|
||||
<h2><a class="anchor" name="thanks-to-our-community"></a>Thanks to Our Community <a class="hash-link" href="#thanks-to-our-community">#</a></h2>
|
||||
<p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.</p>
|
||||
|
||||
<p>It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
|
||||
<ul>
|
||||
<li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
|
||||
<li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
|
||||
<li>Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.</li>
|
||||
<li>Support for Selection events.</li>
|
||||
<li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent">Composition events</a>.</li>
|
||||
<li>Support for additional DOM properties (<code>charSet</code>, <code>content</code>, <code>form</code>, <code>httpEquiv</code>, <code>rowSpan</code>, <code>autoCapitalize</code>).</li>
|
||||
<li>Support for additional SVG properties (<code>rx</code>, <code>ry</code>).</li>
|
||||
<li>Support for using <code>getInitialState</code> and <code>getDefaultProps</code> in mixins.</li>
|
||||
<li>Support mounting into iframes.</li>
|
||||
<li>Bug fixes for controlled form components.</li>
|
||||
<li>Bug fixes for SVG element creation.</li>
|
||||
<li>Added <code>React.version</code>.</li>
|
||||
<li>Added <code>React.isValidClass</code> - Used to determine if a value is a valid component constructor.</li>
|
||||
<li>Removed <code>React.autoBind</code> - This was deprecated in v0.4 and now properly removed.</li>
|
||||
<li>Renamed <code>React.unmountAndReleaseReactRootNode</code> to <code>React.unmountComponentAtNode</code>.</li>
|
||||
<li>Began laying down work for refined performance analysis.</li>
|
||||
<li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
|
||||
<li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons-new"></a>React with Addons (New!) <a class="hash-link" href="#react-with-addons-new">#</a></h3>
|
||||
<ul>
|
||||
<li>Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
|
||||
<li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
|
||||
<li>Improved compatibility for Windows</li>
|
||||
<li>Improved support for maintaining line numbers when transforming.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a>
|
||||
@@ -439,98 +508,6 @@
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
August 5, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/vjeux">Vjeux</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.</p>
|
||||
<h2><a class="anchor" name="react-game-tutorial"></a>React Game Tutorial <a class="hash-link" href="#react-game-tutorial">#</a></h2>
|
||||
<p><a href="https://twitter.com/CalebCassel">Caleb Cassel</a> wrote a <a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html">step-by-step tutorial</a> about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
|
||||
<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/react/img/blog/dog-tutorial.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="reactify"></a>Reactify <a class="hash-link" href="#reactify">#</a></h2>
|
||||
<p><a href="http://andreypopp.com/">Andrey Popp</a> created a <a href="http://browserify.org/">Browserify</a> helper to compile JSX files.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Browserify v2 transform for <code>text/jsx</code>. Basic usage is:</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">% browserify -t reactify main.jsx
|
||||
</code></pre></div>
|
||||
<p><code>reactify</code> transform activates for files with either <code>.jsx</code> extension or <code>/** @jsx React.DOM */</code> pragma as a first line for any <code>.js</code> file.</p>
|
||||
|
||||
<p><a href="https://github.com/andreypopp/reactify">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-integration-with-este"></a>React Integration with Este <a class="hash-link" href="#react-integration-with-este">#</a></h2>
|
||||
<p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
|
||||
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-></span>
|
||||
<span class="nx">@div</span> <span class="p">[</span>
|
||||
<span class="nx">este</span><span class="p">.</span><span class="nx">demos</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">todoList</span> <span class="s">'items'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">]</span>
|
||||
<span class="k">if</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span>
|
||||
<span class="nx">@p</span> <span class="s">"</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span><span class="si">}</span><span class="s"> items."</span>
|
||||
<span class="nx">@form</span> <span class="s">'onSubmit'</span><span class="o">:</span> <span class="nx">@onFormSubmit</span><span class="p">,</span> <span class="p">[</span>
|
||||
<span class="nx">@input</span>
|
||||
<span class="s">'onChange'</span><span class="o">:</span> <span class="nx">@onChange</span>
|
||||
<span class="s">'value'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'text'</span><span class="p">]</span>
|
||||
<span class="s">'autoFocus'</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="s">'ref'</span><span class="o">:</span> <span class="s">'textInput'</span>
|
||||
<span class="nx">@button</span> <span class="s">"Add #</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">"</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">]</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee">Check it out on Github...</a></p>
|
||||
<h2><a class="anchor" name="react-stylus-boilerplate"></a>React Stylus Boilerplate <a class="hash-link" href="#react-stylus-boilerplate">#</a></h2>
|
||||
<p><a href="https://zaim.github.io/">Zaim Bakar</a> shared his boilerplate to get started with Stylus CSS processor.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.</p>
|
||||
|
||||
<ul>
|
||||
<li>Very minimal HTML boilerplate</li>
|
||||
<li>Uses Stylus, with nib included</li>
|
||||
<li>Uses two build targets:
|
||||
|
||||
<ul>
|
||||
<li><code>grunt build</code> to compile JSX and Stylus into a development build</li>
|
||||
<li><code>grunt dist</code> to minify and optimize the development build for production</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://github.com/zaim/react-stylus-boilerplate">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="webfui"></a>WebFUI <a class="hash-link" href="#webfui">#</a></h2>
|
||||
<p><a href="http://lisperati.com/">Conrad Barski</a>, author of the popular book <a href="http://landoflisp.com/">Land of Lisp</a>, wants to use React for his ClojureScript library called <a href="https://github.com/drcode/webfui">WebFUI</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I'm the author of "<a href="http://landoflisp.com/">Land of Lisp</a>" and I love your framework. I built a somewhat similar framework a year ago <a href="https://github.com/drcode/webfui">WebFUI</a> aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)</p>
|
||||
|
||||
<p>Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
|
||||
<figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="/react/img/blog/landoflisp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+94
-72
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,98 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
August 5, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/vjeux">Vjeux</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.</p>
|
||||
<h2><a class="anchor" name="react-game-tutorial"></a>React Game Tutorial <a class="hash-link" href="#react-game-tutorial">#</a></h2>
|
||||
<p><a href="https://twitter.com/CalebCassel">Caleb Cassel</a> wrote a <a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html">step-by-step tutorial</a> about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
|
||||
<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/react/img/blog/dog-tutorial.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="reactify"></a>Reactify <a class="hash-link" href="#reactify">#</a></h2>
|
||||
<p><a href="http://andreypopp.com/">Andrey Popp</a> created a <a href="http://browserify.org/">Browserify</a> helper to compile JSX files.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Browserify v2 transform for <code>text/jsx</code>. Basic usage is:</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">% browserify -t reactify main.jsx
|
||||
</code></pre></div>
|
||||
<p><code>reactify</code> transform activates for files with either <code>.jsx</code> extension or <code>/** @jsx React.DOM */</code> pragma as a first line for any <code>.js</code> file.</p>
|
||||
|
||||
<p><a href="https://github.com/andreypopp/reactify">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-integration-with-este"></a>React Integration with Este <a class="hash-link" href="#react-integration-with-este">#</a></h2>
|
||||
<p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
|
||||
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-></span>
|
||||
<span class="nx">@div</span> <span class="p">[</span>
|
||||
<span class="nx">este</span><span class="p">.</span><span class="nx">demos</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">todoList</span> <span class="s">'items'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">]</span>
|
||||
<span class="k">if</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span>
|
||||
<span class="nx">@p</span> <span class="s">"</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span><span class="si">}</span><span class="s"> items."</span>
|
||||
<span class="nx">@form</span> <span class="s">'onSubmit'</span><span class="o">:</span> <span class="nx">@onFormSubmit</span><span class="p">,</span> <span class="p">[</span>
|
||||
<span class="nx">@input</span>
|
||||
<span class="s">'onChange'</span><span class="o">:</span> <span class="nx">@onChange</span>
|
||||
<span class="s">'value'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'text'</span><span class="p">]</span>
|
||||
<span class="s">'autoFocus'</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="s">'ref'</span><span class="o">:</span> <span class="s">'textInput'</span>
|
||||
<span class="nx">@button</span> <span class="s">"Add #</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">"</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">]</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee">Check it out on Github...</a></p>
|
||||
<h2><a class="anchor" name="react-stylus-boilerplate"></a>React Stylus Boilerplate <a class="hash-link" href="#react-stylus-boilerplate">#</a></h2>
|
||||
<p><a href="https://zaim.github.io/">Zaim Bakar</a> shared his boilerplate to get started with Stylus CSS processor.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.</p>
|
||||
|
||||
<ul>
|
||||
<li>Very minimal HTML boilerplate</li>
|
||||
<li>Uses Stylus, with nib included</li>
|
||||
<li>Uses two build targets:
|
||||
|
||||
<ul>
|
||||
<li><code>grunt build</code> to compile JSX and Stylus into a development build</li>
|
||||
<li><code>grunt dist</code> to minify and optimize the development build for production</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://github.com/zaim/react-stylus-boilerplate">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="webfui"></a>WebFUI <a class="hash-link" href="#webfui">#</a></h2>
|
||||
<p><a href="http://lisperati.com/">Conrad Barski</a>, author of the popular book <a href="http://landoflisp.com/">Land of Lisp</a>, wants to use React for his ClojureScript library called <a href="https://github.com/drcode/webfui">WebFUI</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I'm the author of "<a href="http://landoflisp.com/">Land of Lisp</a>" and I love your framework. I built a somewhat similar framework a year ago <a href="https://github.com/drcode/webfui">WebFUI</a> aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)</p>
|
||||
|
||||
<p>Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
|
||||
<figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="/react/img/blog/landoflisp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</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>
|
||||
@@ -367,76 +459,6 @@ If you were using React without JSX previously, your code should still work.</li
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
July 11, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Many of the questions we got following the public launch of React revolved around <code>props</code>, specifically that people wanted to do validation and to make sure their components had sensible defaults.</p>
|
||||
<h2><a class="anchor" name="validation"></a>Validation <a class="hash-link" href="#validation">#</a></h2>
|
||||
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
|
||||
|
||||
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="c1">// An optional string prop named "description".</span>
|
||||
<span class="nx">description</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A required enum prop named "category".</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">oneOf</span><span class="p">([</span><span class="s1">'News'</span><span class="p">,</span><span class="s1">'Photos'</span><span class="p">]).</span><span class="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A prop named "dialog" that requires an instance of Dialog.</span>
|
||||
<span class="nx">dialog</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">(</span><span class="nx">Dialog</span><span class="p">).</span><span class="nx">isRequired</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="default-values"></a>Default Values <a class="hash-link" href="#default-values">#</a></h2>
|
||||
<p>One common pattern we've seen with our React code is to do something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">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">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">value</span> <span class="o">||</span> <span class="s1">'default value'</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">value</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>
|
||||
<p>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getDefaultProps</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">value</span><span class="o">:</span> <span class="s1">'default value'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We will use the cached result of this function before each <code>render</code>. We also perform all validations before each <code>render</code> to ensure that you have all of the data you need in the right form before you try to use it.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+72
-95
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,76 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
July 11, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Many of the questions we got following the public launch of React revolved around <code>props</code>, specifically that people wanted to do validation and to make sure their components had sensible defaults.</p>
|
||||
<h2><a class="anchor" name="validation"></a>Validation <a class="hash-link" href="#validation">#</a></h2>
|
||||
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
|
||||
|
||||
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="c1">// An optional string prop named "description".</span>
|
||||
<span class="nx">description</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A required enum prop named "category".</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">oneOf</span><span class="p">([</span><span class="s1">'News'</span><span class="p">,</span><span class="s1">'Photos'</span><span class="p">]).</span><span class="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A prop named "dialog" that requires an instance of Dialog.</span>
|
||||
<span class="nx">dialog</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">(</span><span class="nx">Dialog</span><span class="p">).</span><span class="nx">isRequired</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="default-values"></a>Default Values <a class="hash-link" href="#default-values">#</a></h2>
|
||||
<p>One common pattern we've seen with our React code is to do something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">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">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">value</span> <span class="o">||</span> <span class="s1">'default value'</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">value</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>
|
||||
<p>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getDefaultProps</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">value</span><span class="o">:</span> <span class="s1">'default value'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We will use the cached result of this function before each <code>render</code>. We also perform all validations before each <code>render</code> to ensure that you have all of the data you need in the right form before you try to use it.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a>
|
||||
@@ -383,99 +453,6 @@
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
June 19, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/vjeux">Vjeux</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.</p>
|
||||
<h2><a class="anchor" name="some-quick-thoughts-on-react"></a>Some quick thoughts on React <a class="hash-link" href="#some-quick-thoughts-on-react">#</a></h2>
|
||||
<p><a href="http://www.andrewgreig.com/">Andrew Greig</a> made a blog post that gives a high level description of what React is.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.</p>
|
||||
|
||||
<p>Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.</p>
|
||||
|
||||
<p>It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.</p>
|
||||
|
||||
<p>I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.</p>
|
||||
|
||||
<p><a href="http://www.andrewgreig.com/637/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-and-socket.io-chat-application"></a>React and Socket.IO Chat Application <a class="hash-link" href="#react-and-socket.io-chat-application">#</a></h2>
|
||||
<p><a href="https://danialk.github.io/">Danial Khosravi</a> made a real-time chat application that interacts with the back-end using Socket.IO.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A week ago I was playing with AngularJS and <a href="https://github.com/btford/angular-socket-io-im">this little chat application</a> which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in <a href="http://www.echojs.com/">EchoJS</a> and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
|
||||
<figure><a href="https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="/react/img/blog/chatapp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-and-other-frameworks"></a>React and Other Frameworks <a class="hash-link" href="#react-and-other-frameworks">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]</p>
|
||||
|
||||
<p>We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.</p>
|
||||
|
||||
<p><a href="https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>In the same vein, <a href="https://twitter.com/markov_twain/status/345702941845499906">Markov Twain</a> re-implemented the examples on the front-page <a href="http://jsbin.com/azihiw/2/edit">with Ember</a> and <a href="https://twitter.com/vla">Vlad Yazhbin</a> re-implemented the tutorial <a href="http://jsfiddle.net/vla/Cdrse/">with Angular</a>.</p>
|
||||
<h2><a class="anchor" name="web-components-react-amp-x-tags"></a>Web Components: React & x-tags <a class="hash-link" href="#web-components-react-amp-x-tags">#</a></h2>
|
||||
<p>Mozilla and Google are actively working on Web Components. <a href="http://blog.vjeux.com/">Vjeux</a> wrote a proof of concept that shows how to implement them using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Using <a href="http://www.x-tags.org/">x-tags</a> from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote <a href="https://github.com/vjeux/react-xtags/">x-react</a> to have them being rendered in React.
|
||||
<figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="/react/img/blog/xreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-todomvc-example"></a>React TodoMVC Example <a class="hash-link" href="#react-todomvc-example">#</a></h2>
|
||||
<p><a href="http://todomvc.com/">TodoMVC.com</a> is a website that collects various implementations of the same basic Todo app. <a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an idiomatic React version.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.</p>
|
||||
|
||||
<p>To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
|
||||
<figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="/react/img/blog/todomvc.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react">Read the source code...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsx-is-not-html"></a>JSX is not HTML <a class="hash-link" href="#jsx-is-not-html">#</a></h2>
|
||||
<p>Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">Whitespace removal</a></li>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">HTML Entities</a></li>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">Comments</a></li>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">Custom HTML Attributes</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+95
-2
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,99 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
June 19, 2013
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/vjeux">Vjeux</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.</p>
|
||||
<h2><a class="anchor" name="some-quick-thoughts-on-react"></a>Some quick thoughts on React <a class="hash-link" href="#some-quick-thoughts-on-react">#</a></h2>
|
||||
<p><a href="http://www.andrewgreig.com/">Andrew Greig</a> made a blog post that gives a high level description of what React is.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.</p>
|
||||
|
||||
<p>Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.</p>
|
||||
|
||||
<p>It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.</p>
|
||||
|
||||
<p>I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.</p>
|
||||
|
||||
<p><a href="http://www.andrewgreig.com/637/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-and-socket.io-chat-application"></a>React and Socket.IO Chat Application <a class="hash-link" href="#react-and-socket.io-chat-application">#</a></h2>
|
||||
<p><a href="https://danialk.github.io/">Danial Khosravi</a> made a real-time chat application that interacts with the back-end using Socket.IO.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A week ago I was playing with AngularJS and <a href="https://github.com/btford/angular-socket-io-im">this little chat application</a> which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in <a href="http://www.echojs.com/">EchoJS</a> and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
|
||||
<figure><a href="https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="/react/img/blog/chatapp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-and-other-frameworks"></a>React and Other Frameworks <a class="hash-link" href="#react-and-other-frameworks">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]</p>
|
||||
|
||||
<p>We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.</p>
|
||||
|
||||
<p><a href="https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>In the same vein, <a href="https://twitter.com/markov_twain/status/345702941845499906">Markov Twain</a> re-implemented the examples on the front-page <a href="http://jsbin.com/azihiw/2/edit">with Ember</a> and <a href="https://twitter.com/vla">Vlad Yazhbin</a> re-implemented the tutorial <a href="http://jsfiddle.net/vla/Cdrse/">with Angular</a>.</p>
|
||||
<h2><a class="anchor" name="web-components-react-amp-x-tags"></a>Web Components: React & x-tags <a class="hash-link" href="#web-components-react-amp-x-tags">#</a></h2>
|
||||
<p>Mozilla and Google are actively working on Web Components. <a href="http://blog.vjeux.com/">Vjeux</a> wrote a proof of concept that shows how to implement them using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Using <a href="http://www.x-tags.org/">x-tags</a> from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote <a href="https://github.com/vjeux/react-xtags/">x-react</a> to have them being rendered in React.
|
||||
<figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="/react/img/blog/xreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-todomvc-example"></a>React TodoMVC Example <a class="hash-link" href="#react-todomvc-example">#</a></h2>
|
||||
<p><a href="http://todomvc.com/">TodoMVC.com</a> is a website that collects various implementations of the same basic Todo app. <a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an idiomatic React version.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.</p>
|
||||
|
||||
<p>To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
|
||||
<figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="/react/img/blog/todomvc.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react">Read the source code...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsx-is-not-html"></a>JSX is not HTML <a class="hash-link" href="#jsx-is-not-html">#</a></h2>
|
||||
<p>Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">Whitespace removal</a></li>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">HTML Entities</a></li>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">Comments</a></li>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">Custom HTML Attributes</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a>
|
||||
|
||||
+90
-74
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,94 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
July 3, 2015
|
||||
by
|
||||
|
||||
<a href="http://benalpert.com">Ben Alpert</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This week, many people in the React community are at <a href="https://www.react-europe.org/">ReactEurope</a> in the beautiful (and very warm) city of Paris, the second React conference that's been held to date. At our last conference, we released the first beta of React 0.13, and we figured we'd do the same today with our first beta of React 0.14, giving you something to play with if you're not at the conference or you're looking for something to do on the way home.</p>
|
||||
|
||||
<p>With React 0.14, we're continuing to let React mature and to make minor changes as the APIs continue to settle down. I'll talk only about the two largest changes in this blog post; when we publish the final release we'll be sure to update all of our documentation and include a full changelog.</p>
|
||||
|
||||
<p>You can install the new beta with <code>npm install react@0.14.0-beta1</code> and <code>npm install react-dom@0.14.0-beta1</code>. As mentioned in <a href="https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating react-tools</a>, we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.</p>
|
||||
<h2><a class="anchor" name="two-packages"></a>Two Packages <a class="hash-link" href="#two-packages">#</a></h2>
|
||||
<p>As we look at packages like <a href="https://github.com/facebook/react-native">react-native</a>, <a href="https://github.com/reactjs/react-art">react-art</a>, <a href="https://github.com/Flipboard/react-canvas">react-canvas</a>, and <a href="https://github.com/Izzimach/react-three">react-three</a>, it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM.</p>
|
||||
|
||||
<p>We think the true foundations of React are simply ideas of components and elements: being able to describe what you want to render in a declarative way. These are the pieces shared by all of these different packages. The parts of React specific to certain rendering targets aren't usually what we think of when we think of React. As one example, DOM diffing currently enables us to build React for the browser and make it fast enough to be useful, but if the DOM didn't have a stateful, imperative API, we might not need diffing at all.</p>
|
||||
|
||||
<p>To make this more clear and to make it easier to build more environments that React can render to, we're splitting the main <code>react</code> package into two: <code>react</code> and <code>react-dom</code>.</p>
|
||||
|
||||
<p>The <code>react</code> package contains <code>React.createElement</code>, <code>React.createClass</code> and <code>React.Component</code>, <code>React.PropTypes</code>, <code>React.Children</code>, and the other helpers related to elements and component classes. We think of these as the <a href="http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/"><em>isomorphic</em></a> or <a href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9"><em>universal</em></a> helpers that you need to build components.</p>
|
||||
|
||||
<p>The <code>react-dom</code> package contains <code>ReactDOM.render</code>, <code>ReactDOM.unmountComponentAtNode</code>, and <code>ReactDOM.findDOMNode</code>, and in <code>react-dom/server</code> we have server-side rendering support with <code>ReactDOMServer.renderToString</code> and <code>ReactDOMServer.renderToStaticMarkup</code>.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><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">ReactDOM</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-dom'</span><span class="p">);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Hello</span> <span class="nx">World</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span> <span class="o">/></span><span class="p">,</span> <span class="nx">node</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>We anticipate that most components will need to depend only on the <code>react</code> package, which is lightweight and doesn't include any of the actual rendering logic. To start, we expect people to render DOM-based components with our <code>react-dom</code> package, but there's nothing stopping someone from diving deep on performance and writing a <code>awesome-faster-react-dom</code> package which can render <em>the exact same DOM-based components</em>. By decoupling the component definitions from the rendering, this becomes possible.</p>
|
||||
|
||||
<p>More importantly, this paves the way to writing components that can be shared between the web version of React and React Native. This isn't yet easily possible, but we intend to make this easy in a future version so you can share React code between your website and native apps.</p>
|
||||
|
||||
<p>The addons have moved to separate packages as well: <code>react-addons-clone-with-props</code>, <code>react-addons-create-fragment</code>, <code>react-addons-css-transition-group</code>, <code>react-addons-linked-state-mixin</code>, <code>react-addons-pure-render-mixin</code>, <code>react-addons-shallow-compare</code>, <code>react-addons-transition-group</code>, and <code>react-addons-update</code>, plus <code>ReactDOM.unstable_batchedUpdates</code> in <code>react-dom</code>.</p>
|
||||
|
||||
<p>For now, please use the same version of <code>react</code> and <code>react-dom</code> in your apps to avoid versioning problems -- but we plan to remove this requirement later. (This release includes the old methods in the <code>react</code> package with a deprecation warning, but they'll be removed completely in 0.15.)</p>
|
||||
<h2><a class="anchor" name="dom-node-refs"></a>DOM node refs <a class="hash-link" href="#dom-node-refs">#</a></h2>
|
||||
<p>The other big change we're making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a <code>ref</code> to a DOM component and realized that the only useful thing you can do with it is call <code>this.refs.giraffe.getDOMNode()</code> to get the underlying DOM node. In this release, <code>this.refs.giraffe</code> <em>is</em> the actual DOM node.</p>
|
||||
|
||||
<p>Refs to custom component classes work exactly as before.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">Zoo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="nx">Giraffe</span><span class="err">'</span><span class="nx">s</span> <span class="nx">name</span><span class="o">:</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"giraffe"</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">showName</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Previously:</span>
|
||||
<span class="c1">// var input = this.refs.giraffe.getDOMNode();</span>
|
||||
<span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">giraffe</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This change also applies to the return result of <code>ReactDOM.render</code> when passing a DOM node as the top component. As with refs, this change does not affect custom components (eg. <code><MyFancyMenu></code> or <code><MyContextProvider></code>), which remain unaffected by this change.</p>
|
||||
|
||||
<p>Along with this change, we're also replacing <code>component.getDOMNode()</code> with <code>ReactDOM.findDOMNode(component)</code>. The <code>findDOMNode</code> method drills down to find which DOM node was rendered by a component, but it returns its argument when passed a DOM node so it's safe to call on a DOM component too. We introduced this function quietly in the last release, but now we're deprecating <code>.getDOMNode()</code> completely: it should be easy to change all existing calls in your code to be <code>ReactDOM.findDOMNode</code>. We also have an <a href="https://www.npmjs.com/package/react-codemod">automated codemod script</a> to help you with this transition. Note that the <code>findDOMNode</code> calls are unnecessary when you already have a DOM component ref (as in the example above), so you can (and should) skip them in most cases going forward.</p>
|
||||
|
||||
<p>We hope you're as excited about this release as we are! Let us know what you think of it.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a>
|
||||
@@ -358,78 +446,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.13.3.m
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
April 18, 2015
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Yesterday the <a href="/react/blog/2015/04/17/react-native-v0.4.html">React Native team shipped v0.4</a>. Those of us working on the web team just a few feet away couldn't just be shown up like that so we're shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.</p>
|
||||
|
||||
<p>The release is now available for download:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-0.13.2.js">https://fb.me/react-0.13.2.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-0.13.2.min.js">https://fb.me/react-0.13.2.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.2.js">https://fb.me/react-with-addons-0.13.2.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.2.min.js">https://fb.me/react-with-addons-0.13.2.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="https://fb.me/JSXTransformer-0.13.2.js">https://fb.me/JSXTransformer-0.13.2.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.13.2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<hr>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Added <code>strokeDashoffset</code>, <code>flexPositive</code>, <code>flexNegative</code> to the list of unitless CSS properties</li>
|
||||
<li>Added support for more DOM properties:
|
||||
|
||||
<ul>
|
||||
<li><code>scoped</code> - for <code><style></code> elements</li>
|
||||
<li><code>high</code>, <code>low</code>, <code>optimum</code> - for <code><meter></code> elements</li>
|
||||
<li><code>unselectable</code> - IE-specific property to prevent user selection</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Fixed a case where re-rendering after rendering null didn't properly pass context</li>
|
||||
<li>Fixed a case where re-rendering after rendering with <code>style={null}</code> didn't properly update <code>style</code></li>
|
||||
<li>Update <code>uglify</code> dependency to prevent a bug in IE8</li>
|
||||
<li>Improved warnings</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Immutabilty Helpers: Ensure it supports <code>hasOwnProperty</code> as an object key</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Improve documentation for new options</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+74
-65
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,78 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
April 18, 2015
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Yesterday the <a href="/react/blog/2015/04/17/react-native-v0.4.html">React Native team shipped v0.4</a>. Those of us working on the web team just a few feet away couldn't just be shown up like that so we're shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.</p>
|
||||
|
||||
<p>The release is now available for download:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-0.13.2.js">https://fb.me/react-0.13.2.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-0.13.2.min.js">https://fb.me/react-0.13.2.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.2.js">https://fb.me/react-with-addons-0.13.2.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.2.min.js">https://fb.me/react-with-addons-0.13.2.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="https://fb.me/JSXTransformer-0.13.2.js">https://fb.me/JSXTransformer-0.13.2.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.13.2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<hr>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Added <code>strokeDashoffset</code>, <code>flexPositive</code>, <code>flexNegative</code> to the list of unitless CSS properties</li>
|
||||
<li>Added support for more DOM properties:
|
||||
|
||||
<ul>
|
||||
<li><code>scoped</code> - for <code><style></code> elements</li>
|
||||
<li><code>high</code>, <code>low</code>, <code>optimum</code> - for <code><meter></code> elements</li>
|
||||
<li><code>unselectable</code> - IE-specific property to prevent user selection</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Fixed a case where re-rendering after rendering null didn't properly pass context</li>
|
||||
<li>Fixed a case where re-rendering after rendering with <code>style={null}</code> didn't properly update <code>style</code></li>
|
||||
<li>Update <code>uglify</code> dependency to prevent a bug in IE8</li>
|
||||
<li>Improved warnings</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Immutabilty Helpers: Ensure it supports <code>hasOwnProperty</code> as an object key</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Improve documentation for new options</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/04/17/react-native-v0.4.html">React Native v0.4</a>
|
||||
@@ -472,69 +544,6 @@
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
March 16, 2015
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>It's been less than a week since we shipped v0.13.0 but it's time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.</p>
|
||||
|
||||
<p>Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren't on the core team!</p>
|
||||
|
||||
<p>The release is now available for download:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-0.13.1.js">https://fb.me/react-0.13.1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-0.13.1.min.js">https://fb.me/react-0.13.1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.1.js">https://fb.me/react-with-addons-0.13.1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.1.min.js">https://fb.me/react-with-addons-0.13.1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="https://fb.me/JSXTransformer-0.13.1.js">https://fb.me/JSXTransformer-0.13.1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.13.1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<hr>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Don't throw when rendering empty <code><select></code> elements</li>
|
||||
<li>Ensure updating <code>style</code> works when transitioning from <code>null</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h3><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h3>
|
||||
<ul>
|
||||
<li>TestUtils: Don't warn about <code>getDOMNode</code> for ES6 classes</li>
|
||||
<li>TestUtils: Ensure wrapped full page components (<code><html></code>, <code><head></code>, <code><body></code>) are treated as DOM components</li>
|
||||
<li>Perf: Stop double-counting DOM components</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Fix option parsing for <code>--non-strict-es6module</code></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+65
-177
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,69 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
March 16, 2015
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>It's been less than a week since we shipped v0.13.0 but it's time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.</p>
|
||||
|
||||
<p>Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren't on the core team!</p>
|
||||
|
||||
<p>The release is now available for download:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-0.13.1.js">https://fb.me/react-0.13.1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-0.13.1.min.js">https://fb.me/react-0.13.1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.1.js">https://fb.me/react-with-addons-0.13.1.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.1.min.js">https://fb.me/react-with-addons-0.13.1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="https://fb.me/JSXTransformer-0.13.1.js">https://fb.me/JSXTransformer-0.13.1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.13.1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<hr>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Don't throw when rendering empty <code><select></code> elements</li>
|
||||
<li>Ensure updating <code>style</code> works when transitioning from <code>null</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h3><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h3>
|
||||
<ul>
|
||||
<li>TestUtils: Don't warn about <code>getDOMNode</code> for ES6 classes</li>
|
||||
<li>TestUtils: Ensure wrapped full page components (<code><html></code>, <code><head></code>, <code><body></code>) are treated as DOM components</li>
|
||||
<li>Perf: Stop double-counting DOM components</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Fix option parsing for <code>--non-strict-es6module</code></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a>
|
||||
@@ -441,181 +504,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0-r
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
February 24, 2015
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/sebmarkbage">Sebastian Markbåge</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we're adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.</p>
|
||||
|
||||
<p>If you use React in an idiomatic way, chances are, you’ll never see any of these warnings. In that case, you can skip this blog post. You can just enjoy the benefits! These changes will unlock simplified semantics, better error messages, stack traces and compiler optimizations!</p>
|
||||
<h2><a class="anchor" name="immutable-props"></a>Immutable Props <a class="hash-link" href="#immutable-props">#</a></h2>
|
||||
<p>In React 0.12, the props object was mutable. It allows you to do patterns like this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Foo</span> <span class="nx">bar</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">shouldUseFoo</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">foo</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
|
||||
<span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The problem is that we don’t have a convenient way to tell when you’re done mutating.</p>
|
||||
<h3><a class="anchor" name="problem-mutating-props-you-dont-own"></a>Problem: Mutating Props You Don’t Own <a class="hash-link" href="#problem-mutating-props-you-dont-own">#</a></h3>
|
||||
<p>If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">child</span><span class="p">;</span>
|
||||
<span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">element</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>You take a ReactElement through <code>props.child</code> and mutate its property before rendering it. If this component's state updates, this render function won't actually get a new ReactElement in <code>props.child</code>. It will be the same one. You're mutating the same props.</p>
|
||||
|
||||
<p>You could imagine that this would work. However, this disables the ability for any component to use <code>shouldComponentUpdate</code>. It looks like the component never changed because the previous value is always the same as the next one. Since the DOM layer does diffing, this pattern doesn't even work in this case. The change will never propagate down to the DOM except the first time.</p>
|
||||
|
||||
<p>Additionally, if this element is reused in other places or used to switch back and forth between two modes, then you have all kinds of weird race conditions.</p>
|
||||
|
||||
<p>It has always been broken to mutate the props of something passed into you. The problem is that we can’t warn you about this special case if you accidentally do this.</p>
|
||||
<h3><a class="anchor" name="problem-too-late-validation"></a>Problem: Too Late Validation <a class="hash-link" href="#problem-too-late-validation">#</a></h3>
|
||||
<p>In React 0.12, we do PropType validation very deep inside React during mounting. This means that by the time you get an error, the debugger stack is long gone. This makes it difficult to find complex issues during debugging. We have to do this since it is fairly common for extra props to be added between the call to React.createElement and the mount time. So the type is incomplete until then.</p>
|
||||
|
||||
<p>The static analysis in Flow is also impaired by this. There is no convenient place in the code where Flow can determine that the props are finalized.</p>
|
||||
<h3><a class="anchor" name="solution-immutable-props"></a>Solution: Immutable Props <a class="hash-link" href="#solution-immutable-props">#</a></h3>
|
||||
<p>Therefore, we would like to be able to freeze the element.props object so that it is immediately immutable at the JSX callsite (or createElement). In React 0.13 we will start warning you if you mutate <code>element.props</code> after this point.</p>
|
||||
|
||||
<p>You can generally refactor these pattern to simply use two different JSX calls:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">if</span> <span class="p">(</span><span class="nx">shouldUseFoo</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">Foo</span> <span class="nx">foo</span><span class="o">=</span><span class="p">{</span><span class="mi">10</span><span class="p">}</span> <span class="nx">bar</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">Foo</span> <span class="nx">bar</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>However, if you really need to dynamically build up your props you can just use a temporary object and spread it into JSX:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">props</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">bar</span><span class="o">:</span> <span class="kc">false</span> <span class="p">};</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">shouldUseFoo</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">props</span><span class="p">.</span><span class="nx">foo</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
|
||||
<span class="nx">props</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">Foo</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>It is still OK to do deep mutations of objects. E.g:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">return</span> <span class="o"><</span><span class="nx">Foo</span> <span class="nx">nestedObject</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">myModel</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>In this case it's still ok to mutate the myModel object in state. We recommend that you use fully immutable models. E.g. by using immutable-js. However, we realize that mutable models are still convenient in many cases. Therefore we're only considering shallow freezing the props object that belongs to the ReactElement itself. Not nested objects.</p>
|
||||
<h3><a class="anchor" name="solution-early-proptype-warnings"></a>Solution: Early PropType Warnings <a class="hash-link" href="#solution-early-proptype-warnings">#</a></h3>
|
||||
<p>We will also start warning you for PropTypes at the JSX or createElement callsite. This will help debugging as you’ll have the stack trace right there. Similarly, Flow also validates PropTypes at this callsite.</p>
|
||||
|
||||
<p>Note: There are valid patterns that clones a ReactElement and adds additional props to it. In that case these additional props needs to be optional.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element1</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Foo</span> <span class="o">/></span><span class="p">;</span> <span class="c1">// extra prop is optional</span>
|
||||
<span class="kd">var</span> <span class="nx">element2</span> <span class="o">=</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">element1</span><span class="p">,</span> <span class="p">{</span> <span class="nx">extra</span><span class="o">:</span> <span class="s1">'prop'</span> <span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="owner"></a>Owner <a class="hash-link" href="#owner">#</a></h2>
|
||||
<p>In React each child has both a "parent" and an “owner”. The owner is the component that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">Foo</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">><</span><span class="nx">span</span> <span class="o">/><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, the owner of the <code>span</code> is <code>Foo</code> but the parent is the <code>div</code>.</p>
|
||||
|
||||
<p>There is also an undocumented feature called "context" that also relies on the concept of an “owner” to pass hidden props down the tree.</p>
|
||||
<h3><a class="anchor" name="problem-the-semantics-are-opaque-and-confusing"></a>Problem: The Semantics are Opaque and Confusing <a class="hash-link" href="#problem-the-semantics-are-opaque-and-confusing">#</a></h3>
|
||||
<p>The problem is that these are hidden artifacts attached to the ReactElement. In fact, you probably didn’t even know about it. It silently changes semantics. Take this for example:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"foo"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="kr">class</span> <span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">bar</span> <span class="o">?</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"bar"</span> <span class="o">/></span> <span class="o">:</span> <span class="nx">foo</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>These two inputs have different owners, therefore React will not keep its state when the conditional switches. There is nothing in the code to indicate that. Similarly, if you use <code>React.addons.cloneWithProps</code>, the owner changes.</p>
|
||||
<h3><a class="anchor" name="problem-timing-matters"></a>Problem: Timing Matters <a class="hash-link" href="#problem-timing-matters">#</a></h3>
|
||||
<p>The owner is tracked by the currently executing stack. This means that the semantics of a ReactElement varies depending on when it is executed. Take this example:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">A</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">B</span> <span class="nx">renderer</span><span class="o">=</span><span class="p">{</span><span class="nx">text</span> <span class="o">=></span> <span class="o"><</span><span class="nx">span</span><span class="o">></span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="sr">/span>} /</span><span class="o">></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kr">class</span> <span class="nx">B</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">renderer</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The owner of the <code>span</code> is actually <code>B</code>, not <code>A</code> because of the timing of the callback. This all adds complexity and suffers from similar problems as mutation.</p>
|
||||
<h3><a class="anchor" name="problem-it-couples-jsx-to-react"></a>Problem: It Couples JSX to React <a class="hash-link" href="#problem-it-couples-jsx-to-react">#</a></h3>
|
||||
<p>Have you wondered why JSX depends on React? Couldn’t the transpiler have that built-in to its runtime? The reason you need to have <code>React.createElement</code> in scope is because we depend on internal state of React to capture the current "owner". Without this, you wouldn’t need to have React in scope.</p>
|
||||
<h3><a class="anchor" name="solution-make-context-parent-based-instead-of-owner-based"></a>Solution: Make Context Parent-Based Instead of Owner-Based <a class="hash-link" href="#solution-make-context-parent-based-instead-of-owner-based">#</a></h3>
|
||||
<p>The first thing we’re doing is warning you if you’re using the "owner" feature in a way that relies on it propagating through owners. Instead, we’re planning on propagating it through parents to its children. In almost all cases, this shouldn’t matter. In fact, parent-based contexts is simply a superset.</p>
|
||||
<h3><a class="anchor" name="solution-remove-the-semantic-implications-of-owner"></a>Solution: Remove the Semantic Implications of Owner <a class="hash-link" href="#solution-remove-the-semantic-implications-of-owner">#</a></h3>
|
||||
<p>It turns out that there are very few cases where owners are actually important part of state-semantics. As a precaution, we’ll warn you if it turns out that the owner is important to determine state. In almost every case this shouldn’t matter. Unless you’re doing some weird optimizations, you shouldn’t see this warning.</p>
|
||||
<h3><a class="anchor" name="pending-change-the-refs-semantics"></a>Pending: Change the refs Semantics <a class="hash-link" href="#pending-change-the-refs-semantics">#</a></h3>
|
||||
<p>Refs are still based on "owner". We haven’t fully solved this special case just yet.</p>
|
||||
|
||||
<p>In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.</p>
|
||||
<h2><a class="anchor" name="keyed-objects-as-maps"></a>Keyed Objects as Maps <a class="hash-link" href="#keyed-objects-as-maps">#</a></h2>
|
||||
<p>In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="o"><</span><span class="nx">span</span> <span class="o">/></span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="o"><</span><span class="nx">span</span> <span class="o">/></span><span class="p">}</span> <span class="p">}</span><span class="o"><</span><span class="err">/div></span>
|
||||
</code></pre></div><h3><a class="anchor" name="problem-relies-on-enumeration-order"></a>Problem: Relies on Enumeration Order <a class="hash-link" href="#problem-relies-on-enumeration-order">#</a></h3>
|
||||
<p>The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.</p>
|
||||
<h3><a class="anchor" name="problem-using-objects-as-maps-is-bad"></a>Problem: Using Objects as Maps is Bad <a class="hash-link" href="#problem-using-objects-as-maps-is-bad">#</a></h3>
|
||||
<p>It is generally accepted that using objects as maps screw up type systems, VM optimizations, compilers etc. It is much better to use a dedicated data structure like ES6 Maps.</p>
|
||||
|
||||
<p>More importantly, this can have important security implications. For example this has a potential security problem:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">items</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">item</span> <span class="o">=></span> <span class="nx">children</span><span class="p">[</span><span class="nx">item</span><span class="p">.</span><span class="nx">title</span><span class="p">]</span> <span class="o">=</span> <span class="o"><</span><span class="nx">span</span> <span class="o">/></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>
|
||||
</code></pre></div>
|
||||
<p>Imagine if <code>item.title === '__proto__'</code> for example.</p>
|
||||
<h3><a class="anchor" name="problem-cant-be-differentiated-from-arbitrary-objects"></a>Problem: Can’t be Differentiated from Arbitrary Objects <a class="hash-link" href="#problem-cant-be-differentiated-from-arbitrary-objects">#</a></h3>
|
||||
<p>Since these objects can have any keys with almost any value, we can’t differentiate them from a mistake. If you put some random object, we will try our best to traverse it and render it, instead of failing with a helpful warning. In fact, this is one of the few places where you can accidentally get an infinite loop in React.</p>
|
||||
|
||||
<p>To differentiate ReactElements from one of these objects, we have to tag them with <code>_isReactElement</code>. This is another issue preventing us from inlining ReactElements as simple object literals.</p>
|
||||
<h3><a class="anchor" name="solution-just-use-an-array-and-key"></a>Solution: Just use an Array and key={…} <a class="hash-link" href="#solution-just-use-an-array-and-key">#</a></h3>
|
||||
<p>Most of the time you can just use an array with keyed ReactElements.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">item</span> <span class="o">=></span> <span class="o"><</span><span class="nx">span</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span> <span class="o">/></span><span class="p">);</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>
|
||||
</code></pre></div><h3><a class="anchor" name="solution-react.addons.createfragment"></a>Solution: React.addons.createFragment <a class="hash-link" href="#solution-react.addons.createfragment">#</a></h3>
|
||||
<p>However, this is not always possible if you’re trying to add a prefix key to an unknown set (e.g. this.props.children). It is also not always the easiest upgrade path. Therefore, we are adding a helper to <code>React.addons</code> called <code>createFragment()</code>. This accepts a keyed object and returns an opaque type.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">createFragment</span><span class="p">({</span> <span class="nx">a</span><span class="o">:</span> <span class="o"><</span><span class="nx">div</span> <span class="o">/></span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span> <span class="p">})}</span><span class="o"><</span><span class="err">/div></span>
|
||||
</code></pre></div>
|
||||
<p>The exact signature of this kind of fragment will be determined later. It will likely be some kind of immutable sequence.</p>
|
||||
|
||||
<p>Note: This will still not be valid as the direct return value of <code>render()</code>. Unfortunately, they still need to be wrapped in a <code><div /></code> or some other element.</p>
|
||||
<h2><a class="anchor" name="compiler-optimizations-unlocked"></a>Compiler Optimizations: Unlocked! <a class="hash-link" href="#compiler-optimizations-unlocked">#</a></h2>
|
||||
<p>These changes also unlock several possible compiler optimizations for static content in React 0.14. These optimizations were previously only available to template-based frameworks. They will now also be possible for React code! Both for JSX and <code>React.createElement/Factory</code>*!</p>
|
||||
|
||||
<p>See these GitHub Issues for a deep dive into compiler optimizations:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react/issues/3226">Reuse Constant Value Types</a></li>
|
||||
<li><a href="https://github.com/facebook/react/issues/3227">Tagging ReactElements</a></li>
|
||||
<li><a href="https://github.com/facebook/react/issues/3228">Inline ReactElements</a></li>
|
||||
</ul>
|
||||
|
||||
<p>* If you use the recommended pattern of explicit React.createFactory calls on the consumer side - since they are easily statically analyzed.</p>
|
||||
<h2><a class="anchor" name="rationale"></a>Rationale <a class="hash-link" href="#rationale">#</a></h2>
|
||||
<p>I thought that these changes were particularly important because the mere existence of these patterns means that even components that DON’T use these patterns have to pay the price. There are other problematic patterns such as mutating state, but they’re at least localized to a component subtree so they don’t harm the ecosystem.</p>
|
||||
|
||||
<p>As always, we’d love to hear your feedback and if you have any trouble upgrading, please let us know.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+177
-61
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,181 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
February 24, 2015
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/sebmarkbage">Sebastian Markbåge</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we're adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.</p>
|
||||
|
||||
<p>If you use React in an idiomatic way, chances are, you’ll never see any of these warnings. In that case, you can skip this blog post. You can just enjoy the benefits! These changes will unlock simplified semantics, better error messages, stack traces and compiler optimizations!</p>
|
||||
<h2><a class="anchor" name="immutable-props"></a>Immutable Props <a class="hash-link" href="#immutable-props">#</a></h2>
|
||||
<p>In React 0.12, the props object was mutable. It allows you to do patterns like this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Foo</span> <span class="nx">bar</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">shouldUseFoo</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">foo</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
|
||||
<span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The problem is that we don’t have a convenient way to tell when you’re done mutating.</p>
|
||||
<h3><a class="anchor" name="problem-mutating-props-you-dont-own"></a>Problem: Mutating Props You Don’t Own <a class="hash-link" href="#problem-mutating-props-you-dont-own">#</a></h3>
|
||||
<p>If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">child</span><span class="p">;</span>
|
||||
<span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">element</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>You take a ReactElement through <code>props.child</code> and mutate its property before rendering it. If this component's state updates, this render function won't actually get a new ReactElement in <code>props.child</code>. It will be the same one. You're mutating the same props.</p>
|
||||
|
||||
<p>You could imagine that this would work. However, this disables the ability for any component to use <code>shouldComponentUpdate</code>. It looks like the component never changed because the previous value is always the same as the next one. Since the DOM layer does diffing, this pattern doesn't even work in this case. The change will never propagate down to the DOM except the first time.</p>
|
||||
|
||||
<p>Additionally, if this element is reused in other places or used to switch back and forth between two modes, then you have all kinds of weird race conditions.</p>
|
||||
|
||||
<p>It has always been broken to mutate the props of something passed into you. The problem is that we can’t warn you about this special case if you accidentally do this.</p>
|
||||
<h3><a class="anchor" name="problem-too-late-validation"></a>Problem: Too Late Validation <a class="hash-link" href="#problem-too-late-validation">#</a></h3>
|
||||
<p>In React 0.12, we do PropType validation very deep inside React during mounting. This means that by the time you get an error, the debugger stack is long gone. This makes it difficult to find complex issues during debugging. We have to do this since it is fairly common for extra props to be added between the call to React.createElement and the mount time. So the type is incomplete until then.</p>
|
||||
|
||||
<p>The static analysis in Flow is also impaired by this. There is no convenient place in the code where Flow can determine that the props are finalized.</p>
|
||||
<h3><a class="anchor" name="solution-immutable-props"></a>Solution: Immutable Props <a class="hash-link" href="#solution-immutable-props">#</a></h3>
|
||||
<p>Therefore, we would like to be able to freeze the element.props object so that it is immediately immutable at the JSX callsite (or createElement). In React 0.13 we will start warning you if you mutate <code>element.props</code> after this point.</p>
|
||||
|
||||
<p>You can generally refactor these pattern to simply use two different JSX calls:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">if</span> <span class="p">(</span><span class="nx">shouldUseFoo</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">Foo</span> <span class="nx">foo</span><span class="o">=</span><span class="p">{</span><span class="mi">10</span><span class="p">}</span> <span class="nx">bar</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">Foo</span> <span class="nx">bar</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>However, if you really need to dynamically build up your props you can just use a temporary object and spread it into JSX:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">props</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">bar</span><span class="o">:</span> <span class="kc">false</span> <span class="p">};</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">shouldUseFoo</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">props</span><span class="p">.</span><span class="nx">foo</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
|
||||
<span class="nx">props</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">Foo</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>It is still OK to do deep mutations of objects. E.g:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="k">return</span> <span class="o"><</span><span class="nx">Foo</span> <span class="nx">nestedObject</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">myModel</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>In this case it's still ok to mutate the myModel object in state. We recommend that you use fully immutable models. E.g. by using immutable-js. However, we realize that mutable models are still convenient in many cases. Therefore we're only considering shallow freezing the props object that belongs to the ReactElement itself. Not nested objects.</p>
|
||||
<h3><a class="anchor" name="solution-early-proptype-warnings"></a>Solution: Early PropType Warnings <a class="hash-link" href="#solution-early-proptype-warnings">#</a></h3>
|
||||
<p>We will also start warning you for PropTypes at the JSX or createElement callsite. This will help debugging as you’ll have the stack trace right there. Similarly, Flow also validates PropTypes at this callsite.</p>
|
||||
|
||||
<p>Note: There are valid patterns that clones a ReactElement and adds additional props to it. In that case these additional props needs to be optional.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">element1</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Foo</span> <span class="o">/></span><span class="p">;</span> <span class="c1">// extra prop is optional</span>
|
||||
<span class="kd">var</span> <span class="nx">element2</span> <span class="o">=</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">element1</span><span class="p">,</span> <span class="p">{</span> <span class="nx">extra</span><span class="o">:</span> <span class="s1">'prop'</span> <span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="owner"></a>Owner <a class="hash-link" href="#owner">#</a></h2>
|
||||
<p>In React each child has both a "parent" and an “owner”. The owner is the component that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">Foo</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">><</span><span class="nx">span</span> <span class="o">/><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, the owner of the <code>span</code> is <code>Foo</code> but the parent is the <code>div</code>.</p>
|
||||
|
||||
<p>There is also an undocumented feature called "context" that also relies on the concept of an “owner” to pass hidden props down the tree.</p>
|
||||
<h3><a class="anchor" name="problem-the-semantics-are-opaque-and-confusing"></a>Problem: The Semantics are Opaque and Confusing <a class="hash-link" href="#problem-the-semantics-are-opaque-and-confusing">#</a></h3>
|
||||
<p>The problem is that these are hidden artifacts attached to the ReactElement. In fact, you probably didn’t even know about it. It silently changes semantics. Take this for example:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"foo"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="kr">class</span> <span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">bar</span> <span class="o">?</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"bar"</span> <span class="o">/></span> <span class="o">:</span> <span class="nx">foo</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>These two inputs have different owners, therefore React will not keep its state when the conditional switches. There is nothing in the code to indicate that. Similarly, if you use <code>React.addons.cloneWithProps</code>, the owner changes.</p>
|
||||
<h3><a class="anchor" name="problem-timing-matters"></a>Problem: Timing Matters <a class="hash-link" href="#problem-timing-matters">#</a></h3>
|
||||
<p>The owner is tracked by the currently executing stack. This means that the semantics of a ReactElement varies depending on when it is executed. Take this example:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">A</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">B</span> <span class="nx">renderer</span><span class="o">=</span><span class="p">{</span><span class="nx">text</span> <span class="o">=></span> <span class="o"><</span><span class="nx">span</span><span class="o">></span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="sr">/span>} /</span><span class="o">></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kr">class</span> <span class="nx">B</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">renderer</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>The owner of the <code>span</code> is actually <code>B</code>, not <code>A</code> because of the timing of the callback. This all adds complexity and suffers from similar problems as mutation.</p>
|
||||
<h3><a class="anchor" name="problem-it-couples-jsx-to-react"></a>Problem: It Couples JSX to React <a class="hash-link" href="#problem-it-couples-jsx-to-react">#</a></h3>
|
||||
<p>Have you wondered why JSX depends on React? Couldn’t the transpiler have that built-in to its runtime? The reason you need to have <code>React.createElement</code> in scope is because we depend on internal state of React to capture the current "owner". Without this, you wouldn’t need to have React in scope.</p>
|
||||
<h3><a class="anchor" name="solution-make-context-parent-based-instead-of-owner-based"></a>Solution: Make Context Parent-Based Instead of Owner-Based <a class="hash-link" href="#solution-make-context-parent-based-instead-of-owner-based">#</a></h3>
|
||||
<p>The first thing we’re doing is warning you if you’re using the "owner" feature in a way that relies on it propagating through owners. Instead, we’re planning on propagating it through parents to its children. In almost all cases, this shouldn’t matter. In fact, parent-based contexts is simply a superset.</p>
|
||||
<h3><a class="anchor" name="solution-remove-the-semantic-implications-of-owner"></a>Solution: Remove the Semantic Implications of Owner <a class="hash-link" href="#solution-remove-the-semantic-implications-of-owner">#</a></h3>
|
||||
<p>It turns out that there are very few cases where owners are actually important part of state-semantics. As a precaution, we’ll warn you if it turns out that the owner is important to determine state. In almost every case this shouldn’t matter. Unless you’re doing some weird optimizations, you shouldn’t see this warning.</p>
|
||||
<h3><a class="anchor" name="pending-change-the-refs-semantics"></a>Pending: Change the refs Semantics <a class="hash-link" href="#pending-change-the-refs-semantics">#</a></h3>
|
||||
<p>Refs are still based on "owner". We haven’t fully solved this special case just yet.</p>
|
||||
|
||||
<p>In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.</p>
|
||||
<h2><a class="anchor" name="keyed-objects-as-maps"></a>Keyed Objects as Maps <a class="hash-link" href="#keyed-objects-as-maps">#</a></h2>
|
||||
<p>In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="o"><</span><span class="nx">span</span> <span class="o">/></span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="o"><</span><span class="nx">span</span> <span class="o">/></span><span class="p">}</span> <span class="p">}</span><span class="o"><</span><span class="err">/div></span>
|
||||
</code></pre></div><h3><a class="anchor" name="problem-relies-on-enumeration-order"></a>Problem: Relies on Enumeration Order <a class="hash-link" href="#problem-relies-on-enumeration-order">#</a></h3>
|
||||
<p>The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.</p>
|
||||
<h3><a class="anchor" name="problem-using-objects-as-maps-is-bad"></a>Problem: Using Objects as Maps is Bad <a class="hash-link" href="#problem-using-objects-as-maps-is-bad">#</a></h3>
|
||||
<p>It is generally accepted that using objects as maps screw up type systems, VM optimizations, compilers etc. It is much better to use a dedicated data structure like ES6 Maps.</p>
|
||||
|
||||
<p>More importantly, this can have important security implications. For example this has a potential security problem:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">items</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">item</span> <span class="o">=></span> <span class="nx">children</span><span class="p">[</span><span class="nx">item</span><span class="p">.</span><span class="nx">title</span><span class="p">]</span> <span class="o">=</span> <span class="o"><</span><span class="nx">span</span> <span class="o">/></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>
|
||||
</code></pre></div>
|
||||
<p>Imagine if <code>item.title === '__proto__'</code> for example.</p>
|
||||
<h3><a class="anchor" name="problem-cant-be-differentiated-from-arbitrary-objects"></a>Problem: Can’t be Differentiated from Arbitrary Objects <a class="hash-link" href="#problem-cant-be-differentiated-from-arbitrary-objects">#</a></h3>
|
||||
<p>Since these objects can have any keys with almost any value, we can’t differentiate them from a mistake. If you put some random object, we will try our best to traverse it and render it, instead of failing with a helpful warning. In fact, this is one of the few places where you can accidentally get an infinite loop in React.</p>
|
||||
|
||||
<p>To differentiate ReactElements from one of these objects, we have to tag them with <code>_isReactElement</code>. This is another issue preventing us from inlining ReactElements as simple object literals.</p>
|
||||
<h3><a class="anchor" name="solution-just-use-an-array-and-key"></a>Solution: Just use an Array and key={…} <a class="hash-link" href="#solution-just-use-an-array-and-key">#</a></h3>
|
||||
<p>Most of the time you can just use an array with keyed ReactElements.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">items</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">item</span> <span class="o">=></span> <span class="o"><</span><span class="nx">span</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span> <span class="o">/></span><span class="p">);</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>
|
||||
</code></pre></div><h3><a class="anchor" name="solution-react.addons.createfragment"></a>Solution: React.addons.createFragment <a class="hash-link" href="#solution-react.addons.createfragment">#</a></h3>
|
||||
<p>However, this is not always possible if you’re trying to add a prefix key to an unknown set (e.g. this.props.children). It is also not always the easiest upgrade path. Therefore, we are adding a helper to <code>React.addons</code> called <code>createFragment()</code>. This accepts a keyed object and returns an opaque type.</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">createFragment</span><span class="p">({</span> <span class="nx">a</span><span class="o">:</span> <span class="o"><</span><span class="nx">div</span> <span class="o">/></span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span> <span class="p">})}</span><span class="o"><</span><span class="err">/div></span>
|
||||
</code></pre></div>
|
||||
<p>The exact signature of this kind of fragment will be determined later. It will likely be some kind of immutable sequence.</p>
|
||||
|
||||
<p>Note: This will still not be valid as the direct return value of <code>render()</code>. Unfortunately, they still need to be wrapped in a <code><div /></code> or some other element.</p>
|
||||
<h2><a class="anchor" name="compiler-optimizations-unlocked"></a>Compiler Optimizations: Unlocked! <a class="hash-link" href="#compiler-optimizations-unlocked">#</a></h2>
|
||||
<p>These changes also unlock several possible compiler optimizations for static content in React 0.14. These optimizations were previously only available to template-based frameworks. They will now also be possible for React code! Both for JSX and <code>React.createElement/Factory</code>*!</p>
|
||||
|
||||
<p>See these GitHub Issues for a deep dive into compiler optimizations:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react/issues/3226">Reuse Constant Value Types</a></li>
|
||||
<li><a href="https://github.com/facebook/react/issues/3227">Tagging ReactElements</a></li>
|
||||
<li><a href="https://github.com/facebook/react/issues/3228">Inline ReactElements</a></li>
|
||||
</ul>
|
||||
|
||||
<p>* If you use the recommended pattern of explicit React.createFactory calls on the consumer side - since they are easily statically analyzed.</p>
|
||||
<h2><a class="anchor" name="rationale"></a>Rationale <a class="hash-link" href="#rationale">#</a></h2>
|
||||
<p>I thought that these changes were particularly important because the mere existence of these patterns means that even components that DON’T use these patterns have to pay the price. There are other problematic patterns such as mutating state, but they’re at least localized to a component subtree so they don’t harm the ecosystem.</p>
|
||||
|
||||
<p>As always, we’d love to hear your feedback and if you have any trouble upgrading, please let us know.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2015/02/20/introducing-relay-and-graphql.html">Introducing Relay and GraphQL</a>
|
||||
@@ -670,65 +845,6 @@ Facebook will make determinations on scholarship recipients in its sole discreti
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
December 18, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.</p>
|
||||
|
||||
<p>You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of <a href="http://flowtype.org/">Flow</a>, with only transform-related changes. Namely we added a flag to the <code>jsx</code> executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn't update for that release, you can safely skip it and move directly to v0.12.2.</p>
|
||||
|
||||
<p>The release is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-0.12.2.js">https://fb.me/react-0.12.2.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-0.12.2.min.js">https://fb.me/react-0.12.2.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.12.2.js">https://fb.me/react-with-addons-0.12.2.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-with-addons-0.12.2.min.js">https://fb.me/react-with-addons-0.12.2.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="https://fb.me/JSXTransformer-0.12.2.js">https://fb.me/JSXTransformer-0.12.2.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.12.2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower. <code>0.12.1</code> is also available in the same locations if need those.</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="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>
|
||||
<ul>
|
||||
<li>Added support for more HTML attributes: <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formTarget</code>, <code>marginHeight</code>, <code>marginWidth</code></li>
|
||||
<li>Added <code>strokeOpacity</code> to the list of unitless CSS properties</li>
|
||||
<li>Removed trailing commas (allows npm module to be bundled and used in IE8)</li>
|
||||
<li>Fixed bug resulting in error when passing <code>undefined</code> to <code>React.createElement</code> - now there is a useful warning</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>JSX-related transforms now always use double quotes for props and <code>displayName</code></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+61
-145
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,65 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
December 18, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.</p>
|
||||
|
||||
<p>You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of <a href="http://flowtype.org/">Flow</a>, with only transform-related changes. Namely we added a flag to the <code>jsx</code> executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn't update for that release, you can safely skip it and move directly to v0.12.2.</p>
|
||||
|
||||
<p>The release is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-0.12.2.js">https://fb.me/react-0.12.2.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-0.12.2.min.js">https://fb.me/react-0.12.2.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.12.2.js">https://fb.me/react-with-addons-0.12.2.js</a><br>
|
||||
Minified build for production: <a href="https://fb.me/react-with-addons-0.12.2.min.js">https://fb.me/react-with-addons-0.12.2.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="https://fb.me/JSXTransformer-0.12.2.js">https://fb.me/JSXTransformer-0.12.2.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.12.2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower. <code>0.12.1</code> is also available in the same locations if need those.</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="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>
|
||||
<ul>
|
||||
<li>Added support for more HTML attributes: <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formTarget</code>, <code>marginHeight</code>, <code>marginWidth</code></li>
|
||||
<li>Added <code>strokeOpacity</code> to the list of unitless CSS properties</li>
|
||||
<li>Removed trailing commas (allows npm module to be bundled and used in IE8)</li>
|
||||
<li>Fixed bug resulting in error when passing <code>undefined</code> to <code>React.createElement</code> - now there is a useful warning</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>JSX-related transforms now always use double quotes for props and <code>displayName</code></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/11/25/community-roundup-24.html">Community Round-up #24</a>
|
||||
@@ -432,149 +491,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.12.0.m
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/10/17/community-roundup-23.html">Community Round-up #23</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
October 17, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/loukan42">Lou Husson</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This round-up is a special edition on <a href="https://facebook.github.io/flux/">Flux</a>. If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!</p>
|
||||
<h2><a class="anchor" name="react-and-flux-at-forwardjs"></a>React And Flux at ForwardJS <a class="hash-link" href="#react-and-flux-at-forwardjs">#</a></h2>
|
||||
<p>Facebook engineers <a href="https://github.com/jingc">Jing Chen</a> and <a href="https://github.com/fisherwebdev">Bill Fisher</a> gave a talk about Flux and React at <a href="http://forwardjs.com/">ForwardJS</a>, and how using an application architecture with a unidirectional data flow helped solve recurring bugs.</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
|
||||
<h1><a class="anchor" name="yahoo"></a>Yahoo <a class="hash-link" href="#yahoo">#</a></h1>
|
||||
<p>Yahoo is converting Yahoo Mail to React and Flux and in the process, they open sourced several components. This will help you get an isomorphic application up and running.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/yahoo/flux-router-component">Flux Router Component</a></li>
|
||||
<li><a href="https://github.com/yahoo/dispatchr">Dispatchr</a></li>
|
||||
<li><a href="https://github.com/yahoo/fetchr">Fetchr</a></li>
|
||||
<li><a href="https://github.com/yahoo/flux-examples">Flux Examples</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="reflux"></a>Reflux <a class="hash-link" href="#reflux">#</a></h2>
|
||||
<p><a href="https://spoike.ghost.io/">Mikael Brassman</a> wrote <a href="https://github.com/spoike/refluxjs">Reflux</a>, a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains <a href="https://spoike.ghost.io/deconstructing-reactjss-flux/">the reasons why in a blog post</a>.</p>
|
||||
|
||||
<p><center>
|
||||
<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
|
||||
</center></p>
|
||||
<h2><a class="anchor" name="react-and-flux-interview"></a>React and Flux Interview <a class="hash-link" href="#react-and-flux-interview">#</a></h2>
|
||||
<p><a href="http://ianobermiller.com/">Ian Obermiller</a>, engineer at Facebook, <a href="http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/">made a lengthy interview</a> on the experience of using React and Flux in order to build probably the biggest React application ever written so far.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I’ve actually said this many times to my team too, I love React. It’s really great for making these complex applications. One thing that really surprised me with it is that React combined with a sane module system like CommonJS, and making sure that you actually modulize your stuff properly has scaled really well to a team of almost 10 developers working on hundreds of files and tens of thousands of lines of code.</p>
|
||||
|
||||
<p>Really, a fairly large code base... stuff just works. You don’t have to worry about mutating, and the state of the DOM just really makes stuff easy. Just conceptually it’s easier just to think about here’s what I have, here’s my data, here’s how it renders, I don’t care about anything else. For most cases that is really simplifying and makes it really fast to do stuff.</p>
|
||||
|
||||
<p><a href="http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/">Read the full interview...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="adobes-brackets-project-tree"></a>Adobe's Brackets Project Tree <a class="hash-link" href="#adobes-brackets-project-tree">#</a></h2>
|
||||
<p><a href="http://www.kevindangoor.com/">Kevin Dangoor</a> is converting the project tree of <a href="http://brackets.io/">Adobe's Bracket text editor</a> to React and Flux. He wrote about his experience <a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/">using Flux</a>.</p>
|
||||
|
||||
<p><center>
|
||||
<a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/"><img src="/react/img/blog/flux-diagram.png" width="400" /></a>
|
||||
</center></p>
|
||||
<h2><a class="anchor" name="async-requests-with-flux-revisited"></a>Async Requests with Flux Revisited <a class="hash-link" href="#async-requests-with-flux-revisited">#</a></h2>
|
||||
<p><a href="http://www.code-experience.com/the-code-experience/">Reto Schläpfer</a> came back to a Flux project he hasn't worked on for a month and <a href="http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/">saw many ways to improve the way he implemented Flux</a>. He summarized his learnings in a blog post.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The smarter way is to call the Web Api directly from an Action Creator and then make the Api dispatch an event with the request result as a payload. The Store(s) can choose to listen on those request actions and change their state accordingly.</p>
|
||||
|
||||
<p>Before I show some updated code snippets, let me explain why this is superior:</p>
|
||||
|
||||
<ul>
|
||||
<li><p>There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger.</p></li>
|
||||
<li><p>Asynchronously executed callbacks should not leak into Stores. The consequences of it are just too hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.</p></li>
|
||||
<li><p>Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right.</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="undo-redo-with-immutable-data-structures"></a>Undo-Redo with Immutable Data Structures <a class="hash-link" href="#undo-redo-with-immutable-data-structures">#</a></h2>
|
||||
<p><a href="https://github.com/ameyakarve">Ameya Karve</a> explained how to use <a href="https://github.com/swannodette/mori">Mori</a>, a library that provides immutable data structures, in order to <a href="http://ameyakarve.com/jekyll/update/2014/02/06/Undo-React-Flux-Mori.html">implement undo-redo</a>. This usually very challenging feature only takes a few lines of code with Flux!</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">undo</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">redoStates</span> <span class="o">=</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">conj</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">redoStates</span><span class="p">,</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">first</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span> <span class="o">=</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">drop</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">todosState</span> <span class="o">=</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">first</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">canUndo</span> <span class="o">=</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">)</span> <span class="o">></span> <span class="mi">1</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">canRedo</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">Mori</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">)</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">todos</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">todosState</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">todos</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div><h2><a class="anchor" name="flux-in-practice"></a>Flux in practice <a class="hash-link" href="#flux-in-practice">#</a></h2>
|
||||
<p><a href="https://twitter.com/garychambers108">Gary Chambers</a> wrote a <a href="https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a">guide to get started with Flux</a>. This is a very practical introduction to Flux.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>So, what does it actually mean to write an application in the Flux way? At that moment of inspiration, when faced with an empty text editor, how should you begin? This post follows the process of building a Flux-compliant application from scratch.</p>
|
||||
|
||||
<p><a href="https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a">Read the full guide...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="components-react-and-flux"></a>Components, React and Flux <a class="hash-link" href="#components-react-and-flux">#</a></h2>
|
||||
<p><a href="https://twitter.com/dan_abramov">Dan Abramov</a> working at Stampsy made a talk about React and Flux. It's a very good overview of the concepts at play.</p>
|
||||
|
||||
<iframe src="//slides.com/danabramov/components-react-flux-wip/embed" width="650" height="315" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="react-and-flux"></a>React and Flux <a class="hash-link" href="#react-and-flux">#</a></h2>
|
||||
<p><a href="https://github.com/christianalfoni">Christian Alfoni</a> wrote an article where <a href="https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html">he compares Backbone, Angular and Flux</a> on a simple example that's representative of a real project he worked on.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.</p>
|
||||
|
||||
<p>Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current "parent controller or models".</p>
|
||||
|
||||
<p><a href="https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="flux-step-by-step-approach"></a>Flux: Step by Step approach <a class="hash-link" href="#flux-step-by-step-approach">#</a></h2>
|
||||
<p><a href="https://github.com/durdn">Nicola Paolucci</a> from Atlassian wrote a great guide to help your getting understand <a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/">Flux step by step</a>.</p>
|
||||
|
||||
<p><center>
|
||||
<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
|
||||
</center></p>
|
||||
<h2><a class="anchor" name="delorean-back-to-the-future"></a>DeLorean: Back to the future! <a class="hash-link" href="#delorean-back-to-the-future">#</a></h2>
|
||||
<p><a href="https://github.com/deloreanjs/delorean">DeLorean</a> is a tiny Flux pattern implementation developed by <a href="https://github.com/f">Fatih Kadir Akin</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<ul>
|
||||
<li>Unidirectional data flow, it makes your app logic simpler than MVC</li>
|
||||
<li>Automatically listens to data changes and keeps your data updated</li>
|
||||
<li>Makes data more consistent across your whole application</li>
|
||||
<li>It's framework agnostic, completely. There's no view framework dependency</li>
|
||||
<li>Very small, just 4K gzipped</li>
|
||||
<li>Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others</li>
|
||||
<li>Improve your UI/data consistency using rollbacks</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="facebooks-ios-infrastructure"></a>Facebook's iOS Infrastructure <a class="hash-link" href="#facebooks-ios-infrastructure">#</a></h2>
|
||||
<p>Last but not least, Flux and React ideas are not limited to JavaScript inside of the browser. The iOS team at Facebook re-implemented Newsfeed using very similar patterns.</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>If you build your app with flux, you can swap out React for a canvas or svg view layer and keep 85% of your code. (or the thing after React)</p>— Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/507309645372076034">September 3, 2014</a></blockquote>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
+145
-111
@@ -66,6 +66,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/09/10/react-v0.14-rc1.html">React v0.14 Release Candidate</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/09/02/new-react-developer-tools.html">New React Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/08/13/reacteurope-roundup.html">ReactEurope Round-up</a></li>
|
||||
@@ -84,8 +86,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -97,6 +97,149 @@
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/10/17/community-roundup-23.html">Community Round-up #23</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
October 17, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/loukan42">Lou Husson</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This round-up is a special edition on <a href="https://facebook.github.io/flux/">Flux</a>. If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!</p>
|
||||
<h2><a class="anchor" name="react-and-flux-at-forwardjs"></a>React And Flux at ForwardJS <a class="hash-link" href="#react-and-flux-at-forwardjs">#</a></h2>
|
||||
<p>Facebook engineers <a href="https://github.com/jingc">Jing Chen</a> and <a href="https://github.com/fisherwebdev">Bill Fisher</a> gave a talk about Flux and React at <a href="http://forwardjs.com/">ForwardJS</a>, and how using an application architecture with a unidirectional data flow helped solve recurring bugs.</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
|
||||
<h1><a class="anchor" name="yahoo"></a>Yahoo <a class="hash-link" href="#yahoo">#</a></h1>
|
||||
<p>Yahoo is converting Yahoo Mail to React and Flux and in the process, they open sourced several components. This will help you get an isomorphic application up and running.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/yahoo/flux-router-component">Flux Router Component</a></li>
|
||||
<li><a href="https://github.com/yahoo/dispatchr">Dispatchr</a></li>
|
||||
<li><a href="https://github.com/yahoo/fetchr">Fetchr</a></li>
|
||||
<li><a href="https://github.com/yahoo/flux-examples">Flux Examples</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="reflux"></a>Reflux <a class="hash-link" href="#reflux">#</a></h2>
|
||||
<p><a href="https://spoike.ghost.io/">Mikael Brassman</a> wrote <a href="https://github.com/spoike/refluxjs">Reflux</a>, a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains <a href="https://spoike.ghost.io/deconstructing-reactjss-flux/">the reasons why in a blog post</a>.</p>
|
||||
|
||||
<p><center>
|
||||
<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
|
||||
</center></p>
|
||||
<h2><a class="anchor" name="react-and-flux-interview"></a>React and Flux Interview <a class="hash-link" href="#react-and-flux-interview">#</a></h2>
|
||||
<p><a href="http://ianobermiller.com/">Ian Obermiller</a>, engineer at Facebook, <a href="http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/">made a lengthy interview</a> on the experience of using React and Flux in order to build probably the biggest React application ever written so far.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I’ve actually said this many times to my team too, I love React. It’s really great for making these complex applications. One thing that really surprised me with it is that React combined with a sane module system like CommonJS, and making sure that you actually modulize your stuff properly has scaled really well to a team of almost 10 developers working on hundreds of files and tens of thousands of lines of code.</p>
|
||||
|
||||
<p>Really, a fairly large code base... stuff just works. You don’t have to worry about mutating, and the state of the DOM just really makes stuff easy. Just conceptually it’s easier just to think about here’s what I have, here’s my data, here’s how it renders, I don’t care about anything else. For most cases that is really simplifying and makes it really fast to do stuff.</p>
|
||||
|
||||
<p><a href="http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/">Read the full interview...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="adobes-brackets-project-tree"></a>Adobe's Brackets Project Tree <a class="hash-link" href="#adobes-brackets-project-tree">#</a></h2>
|
||||
<p><a href="http://www.kevindangoor.com/">Kevin Dangoor</a> is converting the project tree of <a href="http://brackets.io/">Adobe's Bracket text editor</a> to React and Flux. He wrote about his experience <a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/">using Flux</a>.</p>
|
||||
|
||||
<p><center>
|
||||
<a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/"><img src="/react/img/blog/flux-diagram.png" width="400" /></a>
|
||||
</center></p>
|
||||
<h2><a class="anchor" name="async-requests-with-flux-revisited"></a>Async Requests with Flux Revisited <a class="hash-link" href="#async-requests-with-flux-revisited">#</a></h2>
|
||||
<p><a href="http://www.code-experience.com/the-code-experience/">Reto Schläpfer</a> came back to a Flux project he hasn't worked on for a month and <a href="http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/">saw many ways to improve the way he implemented Flux</a>. He summarized his learnings in a blog post.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The smarter way is to call the Web Api directly from an Action Creator and then make the Api dispatch an event with the request result as a payload. The Store(s) can choose to listen on those request actions and change their state accordingly.</p>
|
||||
|
||||
<p>Before I show some updated code snippets, let me explain why this is superior:</p>
|
||||
|
||||
<ul>
|
||||
<li><p>There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger.</p></li>
|
||||
<li><p>Asynchronously executed callbacks should not leak into Stores. The consequences of it are just too hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.</p></li>
|
||||
<li><p>Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right.</p></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="undo-redo-with-immutable-data-structures"></a>Undo-Redo with Immutable Data Structures <a class="hash-link" href="#undo-redo-with-immutable-data-structures">#</a></h2>
|
||||
<p><a href="https://github.com/ameyakarve">Ameya Karve</a> explained how to use <a href="https://github.com/swannodette/mori">Mori</a>, a library that provides immutable data structures, in order to <a href="http://ameyakarve.com/jekyll/update/2014/02/06/Undo-React-Flux-Mori.html">implement undo-redo</a>. This usually very challenging feature only takes a few lines of code with Flux!</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">undo</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">redoStates</span> <span class="o">=</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">conj</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">redoStates</span><span class="p">,</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">first</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span> <span class="o">=</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">drop</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">todosState</span> <span class="o">=</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">first</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">canUndo</span> <span class="o">=</span> <span class="nx">Mori</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">)</span> <span class="o">></span> <span class="mi">1</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">canRedo</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">Mori</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">undoStates</span><span class="p">)</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">todos</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">todosState</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">todos</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</code></pre></div><h2><a class="anchor" name="flux-in-practice"></a>Flux in practice <a class="hash-link" href="#flux-in-practice">#</a></h2>
|
||||
<p><a href="https://twitter.com/garychambers108">Gary Chambers</a> wrote a <a href="https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a">guide to get started with Flux</a>. This is a very practical introduction to Flux.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>So, what does it actually mean to write an application in the Flux way? At that moment of inspiration, when faced with an empty text editor, how should you begin? This post follows the process of building a Flux-compliant application from scratch.</p>
|
||||
|
||||
<p><a href="https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a">Read the full guide...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="components-react-and-flux"></a>Components, React and Flux <a class="hash-link" href="#components-react-and-flux">#</a></h2>
|
||||
<p><a href="https://twitter.com/dan_abramov">Dan Abramov</a> working at Stampsy made a talk about React and Flux. It's a very good overview of the concepts at play.</p>
|
||||
|
||||
<iframe src="//slides.com/danabramov/components-react-flux-wip/embed" width="650" height="315" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="react-and-flux"></a>React and Flux <a class="hash-link" href="#react-and-flux">#</a></h2>
|
||||
<p><a href="https://github.com/christianalfoni">Christian Alfoni</a> wrote an article where <a href="https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html">he compares Backbone, Angular and Flux</a> on a simple example that's representative of a real project he worked on.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.</p>
|
||||
|
||||
<p>Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current "parent controller or models".</p>
|
||||
|
||||
<p><a href="https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="flux-step-by-step-approach"></a>Flux: Step by Step approach <a class="hash-link" href="#flux-step-by-step-approach">#</a></h2>
|
||||
<p><a href="https://github.com/durdn">Nicola Paolucci</a> from Atlassian wrote a great guide to help your getting understand <a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/">Flux step by step</a>.</p>
|
||||
|
||||
<p><center>
|
||||
<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
|
||||
</center></p>
|
||||
<h2><a class="anchor" name="delorean-back-to-the-future"></a>DeLorean: Back to the future! <a class="hash-link" href="#delorean-back-to-the-future">#</a></h2>
|
||||
<p><a href="https://github.com/deloreanjs/delorean">DeLorean</a> is a tiny Flux pattern implementation developed by <a href="https://github.com/f">Fatih Kadir Akin</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<ul>
|
||||
<li>Unidirectional data flow, it makes your app logic simpler than MVC</li>
|
||||
<li>Automatically listens to data changes and keeps your data updated</li>
|
||||
<li>Makes data more consistent across your whole application</li>
|
||||
<li>It's framework agnostic, completely. There's no view framework dependency</li>
|
||||
<li>Very small, just 4K gzipped</li>
|
||||
<li>Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others</li>
|
||||
<li>Improve your UI/data consistency using rollbacks</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="facebooks-ios-infrastructure"></a>Facebook's iOS Infrastructure <a class="hash-link" href="#facebooks-ios-infrastructure">#</a></h2>
|
||||
<p>Last but not least, Flux and React ideas are not limited to JavaScript inside of the browser. The iOS team at Facebook re-implemented Newsfeed using very similar patterns.</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>If you build your app with flux, you can swap out React for a canvas or svg view layer and keep 85% of your code. (or the thing after React)</p>— Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/507309645372076034">September 3, 2014</a></blockquote>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/10/16/react-v0.12-rc1.html">React v0.12 RC</a>
|
||||
@@ -756,115 +899,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.11.2.m
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
|
||||
|
||||
|
||||
<h1>
|
||||
|
||||
<a href="/react/blog/2014/09/12/community-round-up-22.html">Community Round-up #22</a>
|
||||
|
||||
</h1>
|
||||
|
||||
<p class="meta">
|
||||
September 12, 2014
|
||||
by
|
||||
|
||||
<a href="https://twitter.com/loukan42">Lou Husson</a>
|
||||
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!</p>
|
||||
|
||||
<table><tr><td>
|
||||
<blockquote width="300" class="twitter-tweet" data-cards="hidden" lang="en"><p>Our friends at <a href="https://twitter.com/Yahoo">@yahoo</a> talk about migrating Yahoo! Mail from YUI to ReactJS at the next <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup! <a href="http://t.co/Cu2AaE0sVE">http://t.co/Cu2AaE0sVE</a></p>— Facebook Open Source (@fbOpenSource) <a href="https://twitter.com/fbOpenSource/status/510258065900572672">September 12, 2014</a></blockquote>
|
||||
</td><td valign="top">
|
||||
<blockquote width="300" class="twitter-tweet" lang="en"><p>I guess <a href="https://twitter.com/reactjs">@reactjs</a> is getting into Firefox :-) Thanks <a href="https://twitter.com/n1k0">@n1k0</a> ! <a href="https://t.co/kipfUS0hu4">https://t.co/kipfUS0hu4</a></p>— David Bruant (@DavidBruant) <a href="https://twitter.com/DavidBruant/status/484956929933213696">July 4, 2014</a></blockquote>
|
||||
</td></tr><tr><td>
|
||||
<blockquote width="300" 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>
|
||||
</td><td>
|
||||
<blockquote width="300" 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>
|
||||
</td></tr></table>
|
||||
<h2><a class="anchor" name="reacts-architecture"></a>React's Architecture <a class="hash-link" href="#reacts-architecture">#</a></h2>
|
||||
<p><a href="http://blog.vjeux.com/">Vjeux</a>, from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the <a href="https://speakerdeck.com/vjeux/oscon-react-architecture">annotated slides</a> or <a href="http://thenewstack.io/author/chrisdawson/">Chris Dawson</a>'s notes titled <a href="http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/">JavaScript’s History and How it Led To React</a>.</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="v8-optimizations"></a>v8 optimizations <a class="hash-link" href="#v8-optimizations">#</a></h2>
|
||||
<p>Jakob Kummerow landed <a href="http://www.chromium.org/developers/speed-hall-of-fame#TOC-2014-06-18">two optimizations to V8</a> specifically targeted at optimizing React. That's really exciting to see browser vendors helping out on performance!</p>
|
||||
<h2><a class="anchor" name="reusable-components-by-khan-academy"></a>Reusable Components by Khan Academy <a class="hash-link" href="#reusable-components-by-khan-academy">#</a></h2>
|
||||
<p><a href="https://www.khanacademy.org/">Khan Academy</a> released <a href="https://khan.github.io/react-components/">many high quality standalone components</a> they are using. This is a good opportunity to see what React code used in production look like.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">TeX</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-components/js/tex.jsx'</span><span class="p">);</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">TeX</span><span class="o">></span><span class="err">\</span><span class="nx">nabla</span> <span class="err">\</span><span class="nx">cdot</span> <span class="nx">E</span> <span class="o">=</span> <span class="mi">4</span> <span class="err">\</span><span class="nx">pi</span> <span class="err">\</span><span class="nx">rho</span><span class="o"><</span><span class="err">/TeX>, domNode);</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">translated</span> <span class="o">=</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">$_</span> <span class="nx">first</span><span class="o">=</span><span class="s2">"Motoko"</span> <span class="nx">last</span><span class="o">=</span><span class="s2">"Kusanagi"</span><span class="o">></span>
|
||||
<span class="nx">Hello</span><span class="p">,</span> <span class="o">%</span><span class="p">(</span><span class="nx">first</span><span class="p">)</span><span class="nx">s</span> <span class="o">%</span><span class="p">(</span><span class="nx">last</span><span class="p">)</span><span class="nx">s</span><span class="o">!</span>
|
||||
<span class="o"><</span><span class="err">/$_></span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="react--browserify--gulp"></a>React + Browserify + Gulp <a class="hash-link" href="#react--browserify--gulp">#</a></h2>
|
||||
<p><a href="http://truongtx.me/">Trường</a> wrote a little guide to help your <a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/">getting started using React, Browserify and Gulp</a>.</p>
|
||||
|
||||
<figure><a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/"><img src="/react/img/blog/react-browserify-gulp.jpg" /></a></figure>
|
||||
<h2><a class="anchor" name="react-style"></a>React Style <a class="hash-link" href="#react-style">#</a></h2>
|
||||
<p>After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: <a href="https://github.com/SanderSpies/react-style">IntegratedCSS</a>. It seems weird at first but this is the direction where React is heading.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Button</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">normalStyle</span><span class="o">:</span> <span class="nx">ReactStyle</span><span class="p">(</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">backgroundColor</span><span class="o">:</span> <span class="nx">vars</span><span class="p">.</span><span class="nx">orange</span> <span class="p">};</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="nx">activeStyle</span><span class="o">:</span> <span class="nx">ReactStyle</span><span class="p">(</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">active</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">color</span><span class="o">:</span> <span class="s1">'yellow'</span><span class="p">,</span> <span class="nx">padding</span><span class="o">:</span> <span class="s1">'10px'</span> <span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">styles</span><span class="o">=</span><span class="p">{[</span><span class="k">this</span><span class="p">.</span><span class="nx">normalStyle</span><span class="p">(),</span> <span class="k">this</span><span class="p">.</span><span class="nx">activeStyle</span><span class="p">()]}</span><span class="o">></span>
|
||||
<span class="nx">Hello</span><span class="p">,</span> <span class="nx">I</span><span class="err">'</span><span class="nx">m</span> <span class="nx">styled</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="virtual-dom-in-elm"></a>Virtual DOM in Elm <a class="hash-link" href="#virtual-dom-in-elm">#</a></h2>
|
||||
<p><a href="http://evan.czaplicki.us">Evan Czaplicki</a> explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches.</p>
|
||||
|
||||
<p><a href="http://elm-lang.org/blog/Blazing-Fast-Html.elm">Read the full article</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="components-tutorial"></a>Components Tutorial <a class="hash-link" href="#components-tutorial">#</a></h2>
|
||||
<p>If you are getting started with React, <a href="http://www.joemaddalone.com/">Joe Maddalone</a> made a good tutorial on how to build your first component.</p>
|
||||
|
||||
<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="saving-time-amp-staying-sane"></a>Saving time & staying sane? <a class="hash-link" href="#saving-time-amp-staying-sane">#</a></h2>
|
||||
<p>When <a href="http://http://kentwilliam.com/">Kent William Innholt</a> who works at <a href="http://mpath.com/">M>Path</a> summed up his experience using React in an <a href="http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js">article</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>We're building an ambitious new web app, where the UI complexity represents most of the app's complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify.</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Big win</strong>: Tighter coupling of markup and behavior</li>
|
||||
<li><strong>Jury's still out</strong>: CSS lives outside React.js</li>
|
||||
<li><strong>Big win</strong>: Cascading updates and functional thinking</li>
|
||||
<li><strong>Jury's still out</strong>: Verbose propagation</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js">Read the article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="weather"></a>Weather <a class="hash-link" href="#weather">#</a></h2>
|
||||
<p>To finish this round-up, Andrew Gleave made a page that displays the <a href="https://github.com/andrewgleave/react-weather">Weather</a>. It's great to see that React is also used for small prototypes.</p>
|
||||
|
||||
<figure><a href="https://github.com/andrewgleave/react-weather"><img src="/react/img/blog/weather.png" /></a></figure>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user