From 9774f127f8e62bb1e3941b00e1cf452857ae53fe Mon Sep 17 00:00:00 2001 From: Circle CI Date: Thu, 9 Mar 2017 19:08:17 -0800 Subject: [PATCH] Rebuild website --- 404.html | 1 + acknowledgements.html | 1 + blog/2013/06/02/jsfiddle-integration.html | 1 + blog/2013/06/05/why-react.html | 17 +- blog/2013/06/12/community-roundup.html | 17 +- blog/2013/06/19/community-roundup-2.html | 25 +- blog/2013/06/21/react-v0-3-3.html | 13 +- blog/2013/06/27/community-roundup-3.html | 25 +- .../07/02/react-v0-4-autobind-by-default.html | 9 +- blog/2013/07/03/community-roundup-4.html | 17 +- ...-4-prop-validation-and-default-values.html | 9 +- blog/2013/07/17/react-v0-4-0.html | 13 +- blog/2013/07/23/community-roundup-5.html | 25 +- blog/2013/07/26/react-v0-4-1.html | 9 +- .../use-react-and-jsx-in-ruby-on-rails.html | 17 +- blog/2013/08/05/community-roundup-6.html | 21 +- ...-react-and-jsx-in-python-applications.html | 13 +- blog/2013/08/26/community-roundup-7.html | 13 +- blog/2013/09/24/community-roundup-8.html | 25 +- blog/2013/10/03/community-roundup-9.html | 25 +- blog/2013/10/16/react-v0.5.0.html | 19 +- blog/2013/10/29/react-v0-5-1.html | 11 +- blog/2013/11/06/community-roundup-10.html | 33 +- blog/2013/11/18/community-roundup-11.html | 37 ++- blog/2013/12/18/react-v0.5.2-v0.4.2.html | 1 + blog/2013/12/19/react-v0.8.0.html | 19 +- blog/2013/12/23/community-roundup-12.html | 37 ++- blog/2013/12/30/community-roundup-13.html | 33 +- .../01/02/react-chrome-developer-tools.html | 1 + blog/2014/01/06/community-roundup-14.html | 33 +- blog/2014/02/05/community-roundup-15.html | 45 ++- blog/2014/02/15/community-roundup-16.html | 41 ++- blog/2014/02/16/react-v0.9-rc1.html | 29 +- blog/2014/02/20/react-v0.9.html | 33 +- blog/2014/02/24/community-roundup-17.html | 77 +++-- blog/2014/03/14/community-roundup-18.html | 61 +++- blog/2014/03/19/react-v0.10-rc1.html | 25 +- blog/2014/03/21/react-v0.10.html | 25 +- blog/2014/03/28/the-road-to-1.0.html | 33 +- blog/2014/04/04/reactnet.html | 5 +- blog/2014/05/06/flux.html | 1 + .../05/29/one-year-of-open-source-react.html | 1 + blog/2014/06/27/community-roundup-19.html | 37 ++- blog/2014/07/13/react-v0.11-rc1.html | 49 ++- blog/2014/07/17/react-v0.11.html | 57 +++- blog/2014/07/25/react-v0.11.1.html | 13 +- blog/2014/07/28/community-roundup-20.html | 41 ++- .../30/flux-actions-and-the-dispatcher.html | 17 +- blog/2014/08/03/community-roundup-21.html | 43 ++- .../03/introducing-the-jsx-specification.html | 1 + blog/2014/09/12/community-round-up-22.html | 37 ++- blog/2014/09/16/react-v0.11.2.html | 15 +- .../2014/09/24/testing-flux-applications.html | 25 +- .../10/14/introducing-react-elements.html | 39 ++- blog/2014/10/16/react-v0.12-rc1.html | 45 ++- blog/2014/10/17/community-roundup-23.html | 57 +++- blog/2014/10/27/react-js-conf.html | 1 + blog/2014/10/28/react-v0.12.html | 65 +++- blog/2014/11/24/react-js-conf-updates.html | 1 + blog/2014/11/25/community-roundup-24.html | 47 ++- blog/2014/12/18/react-v0.12.2.html | 11 +- .../react-js-conf-diversity-scholarship.html | 13 +- blog/2015/01/27/react-v0.13.0-beta-1.html | 25 +- blog/2015/02/18/react-conf-roundup-2015.html | 9 +- .../02/20/introducing-relay-and-graphql.html | 27 +- blog/2015/02/24/react-v0.13-rc1.html | 39 ++- .../02/24/streamlining-react-elements.html | 81 +++-- blog/2015/03/03/react-v0.13-rc2.html | 5 +- blog/2015/03/04/community-roundup-25.html | 23 +- blog/2015/03/10/react-v0.13.html | 43 ++- blog/2015/03/16/react-v0.13.1.html | 21 +- ...ing-the-facebook-news-feed-with-relay.html | 33 +- blog/2015/03/26/introducing-react-native.html | 1 + blog/2015/03/30/community-roundup-26.html | 45 ++- blog/2015/04/17/react-native-v0.4.html | 9 +- blog/2015/04/18/react-v0.13.2.html | 23 +- blog/2015/05/01/graphql-introduction.html | 21 +- blog/2015/05/08/react-v0.13.3.html | 19 +- .../05/22/react-native-release-process.html | 1 + ...precating-jstransform-and-react-tools.html | 15 +- blog/2015/07/03/react-v0.14-beta-1.html | 9 +- blog/2015/08/03/new-react-devtools-beta.html | 41 ++- blog/2015/08/11/relay-technical-preview.html | 19 +- blog/2015/08/13/reacteurope-roundup.html | 1 + .../2015/09/02/new-react-developer-tools.html | 5 +- blog/2015/09/10/react-v0.14-rc1.html | 46 ++- blog/2015/09/14/community-roundup-27.html | 29 +- .../10/01/react-render-and-top-level-api.html | 9 +- blog/2015/10/07/react-v0.14.html | 50 ++- .../19/reactiflux-is-moving-to-discord.html | 57 +++- blog/2015/10/28/react-v0.14.1.html | 19 +- blog/2015/11/02/react-v0.14.2.html | 7 +- blog/2015/11/18/react-v0.14.3.html | 19 +- ...ct-js-conf-2016-diversity-scholarship.html | 13 +- blog/2015/12/16/ismounted-antipattern.html | 1 + ...act-components-elements-and-instances.html | 37 ++- blog/2015/12/29/react-v0.14.4.html | 15 +- ...-implies-B-does-not-imply-B-implies-A.html | 1 + .../2016/01/12/discontinuing-ie8-support.html | 1 + blog/2016/02/19/new-versioning-scheme.html | 21 +- blog/2016/03/07/react-v15-rc1.html | 43 ++- blog/2016/03/16/react-v15-rc2.html | 5 +- blog/2016/03/29/react-v0.14.8.html | 7 +- blog/2016/04/07/react-v15.html | 62 ++-- blog/2016/04/08/react-v15.0.1.html | 11 +- .../introducing-reacts-error-code-system.html | 1 + .../2016/07/13/mixins-considered-harmful.html | 73 +++-- .../22/create-apps-with-no-configuration.html | 47 ++- blog/2016/08/05/relay-state-of-the-state.html | 29 +- blog/2016/09/28/our-first-50000-stars.html | 25 +- blog/2016/11/16/react-v15.4.0.html | 39 ++- blog/all.html | 1 + blog/index.html | 209 +++++++++---- blog/page10/index.html | 148 ++++++--- blog/page11/index.html | 118 +++++-- blog/page12/index.html | 177 ++++++++--- blog/page13/index.html | 132 ++++++-- blog/page14/index.html | 150 ++++++--- blog/page15/index.html | 85 ++++-- blog/page16/index.html | 237 ++++++++++---- blog/page17/index.html | 145 ++++++--- blog/page18/index.html | 97 ++++-- blog/page19/index.html | 91 ++++-- blog/page2/index.html | 82 +++-- blog/page20/index.html | 81 +++-- blog/page21/index.html | 69 +++-- blog/page22/index.html | 57 +++- blog/page3/index.html | 77 +++-- blog/page4/index.html | 73 +++-- blog/page5/index.html | 160 +++++++--- blog/page6/index.html | 105 +++++-- blog/page7/index.html | 61 +++- blog/page8/index.html | 107 +++++-- blog/page9/index.html | 124 ++++++-- community/conferences.html | 86 ++++-- community/support.html | 21 +- community/videos.html | 56 +++- contributing/codebase-overview.html | 97 ++++-- contributing/design-principles.html | 53 +++- contributing/how-to-contribute.html | 83 +++-- contributing/implementation-notes.html | 57 +++- css/react.css | 2 +- docs/addons.html | 13 +- docs/animation.html | 63 +++- docs/components-and-props.html | 21 +- docs/composition-vs-inheritance.html | 13 +- docs/conditional-rendering.html | 17 +- docs/conferences-it-IT.html | 8 +- docs/conferences-ko-KR.html | 8 +- docs/conferences-zh-CN.html | 16 +- docs/context.html | 25 +- docs/create-fragment.html | 9 +- docs/dom-elements.html | 49 ++- docs/error-decoder.html | 1 + docs/events.html | 71 +++-- docs/forms.html | 21 +- docs/handling-events.html | 1 + docs/hello-world.html | 5 +- docs/higher-order-components.html | 37 ++- docs/installation.html | 57 +++- docs/introducing-jsx.html | 25 +- docs/jsx-in-depth.html | 65 +++- docs/lifting-state-up.html | 127 ++++---- docs/lists-and-keys.html | 25 +- docs/optimizing-performance.html | 52 ++-- docs/perf.html | 53 +++- docs/pure-render-mixin.html | 1 + docs/react-api.html | 153 +++++++--- docs/react-component.html | 103 +++++-- docs/react-dom-server.html | 15 +- docs/react-dom.html | 23 +- docs/react-without-es6.html | 17 +- docs/react-without-jsx.html | 1 + docs/reconciliation.html | 33 +- docs/refs-and-the-dom.html | 29 +- docs/rendering-elements.html | 13 +- docs/shallow-compare.html | 5 +- docs/state-and-lifecycle.html | 33 +- docs/test-utils.html | 85 ++++-- docs/thinking-in-react.html | 33 +- docs/two-way-binding-helpers.html | 21 +- docs/typechecking-with-proptypes.html | 13 +- docs/uncontrolled-components.html | 5 +- docs/update.html | 35 ++- docs/videos-it-IT.html | 64 +++- docs/videos-ko-KR.html | 64 +++- docs/videos-zh-CN.html | 64 +++- docs/web-components.html | 9 +- feed.xml | 289 +++++++++++++----- img/docs/react-devtools-state.gif | Bin 705195 -> 580901 bytes index.html | 1 + js/ErrorDecoderComponent.js | 4 +- js/anchor-links.js | 29 ++ jsx-compiler.html | 1 + tutorial/tutorial.html | 84 +++-- warnings/dont-call-proptypes.html | 17 +- warnings/invalid-aria-prop.html | 1 + warnings/legacy-factories.html | 17 +- warnings/refs-must-have-owner.html | 9 +- warnings/special-props.html | 1 + warnings/unknown-prop.html | 1 + 201 files changed, 5912 insertions(+), 1876 deletions(-) create mode 100644 js/anchor-links.js diff --git a/404.html b/404.html index 149fd743bc..3fe9e1b951 100644 --- a/404.html +++ b/404.html @@ -129,6 +129,7 @@
+ -

CoffeeScript integration #

+ +

CoffeeScript integration

+

Vjeux used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.

@@ -162,7 +172,9 @@

Read the full post...

-

Tutorial in Plain Javascript #

+ +

Tutorial in Plain Javascript

+

We've seen a lot of people comparing React with various frameworks. Ricardo Tomasi decided to re-implement the tutorial without any framework, just plain Javascript.

@@ -256,6 +268,7 @@
+ -

Remarkable React #

+ +

Remarkable React

+

Stoyan Stefanov gave a talk at BrazilJS about React and wrote an article with the content of the presentation. He goes through the difficulties of writing active apps using the DOM API and shows how React handles it.

@@ -139,13 +145,19 @@

Read More ...

-

Markdown in React #

+ +

Markdown in React

+

Ben Alpert converted marked, a Markdown Javascript implementation, in React: marked-react. Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to escape will not introduce an XSS vulnerability.

-

Unite from BugBusters #

+ +

Unite from BugBusters

+

Renault John Lecoultre wrote Unite, an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.

-

#reactjs IRC Logs #

+ +

#reactjs IRC Logs

+

Vjeux re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.

View the source on JSFiddle...

@@ -235,6 +247,7 @@
+ -

Genesis Skeleton #

+ +

Genesis Skeleton

+

Eric Clemmons is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.

-

AgFlow Talk #

+ +

AgFlow Talk

+

Robert Zaremba working on AgFlow recently talked in Poland about React.

@@ -148,7 +160,9 @@
-

JSX #

+ +

JSX

+

Todd Kennedy working at Condé Nast wrote JSXHint and explains in a blog post his perspective on JSX.

@@ -159,10 +173,14 @@ Is this some sort of template language? Specifically no. This might have been th

Read the full article...

-

Photo Gallery #

+ +

Photo Gallery

+

Maykel Loomans, designer at Instagram, wrote a gallery for photos he shot using React.

-

Random Tweet #

+ +

Random Tweet

+

@@ -251,6 +269,7 @@ Is this some sort of template language? Specifically no. This might have been th
+ @@ -109,7 +111,9 @@

James Pearce (jamesgpearce) carried Big-Coffee all the way to Raleigh, NC. At the All Things Open conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.

-

All About Isomorphism #

+ +

All About Isomorphism

+

Michael Ridgway (mridgway) shows us how Yahoo! (who recently moved Yahoo! Mail to React) renders their React+Flux application, server-side.

@@ -117,9 +121,13 @@

Péter Márton (hekike) helps us brew a cold one (literally) using an application that's server-client isomorphic and indexable. Demo and sample code included – cold ones sold separately.

And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker (nhunzaker) server renders data visualizations as SVG with React.

-

React Router Mows the Lawn #

+ +

React Router Mows the Lawn

+

Ryan Florence (rpflorence) and Michael Jackson (mjackson) unveiled a new API for React Router that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've rolled your ideas into their latest release.

-

React in Practice #

+ +

React in Practice

+

Jonathan Beebe (somethingkindawierd) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's Nodevember conference in Nashville

@@ -127,25 +135,39 @@

If you take a peek under the covers, you'll find that React powers Carousel, Dropbox's new photo and video gallery app.

We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “The Vanishing Game” and see for yourself.

-

Be Kind, Rewind #

+ +

Be Kind, Rewind

+

Spend the next 60 seconds watching Daniel Woelfel (dwwoelfel) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to reproduce bugs reported to him by his users.

-

Community Components #

+ +

Community Components

+

Tom Chen (tomchentw) brings us a react-google-maps component, and a way to syntax highlight source code using Prism and the react-prism component, for good measure.

Jed Watson (jedwatson) helps you manage touch, tap, and press events using the react-tappable component.

To find these, and more community-built components, consult the React Components and React Rocks component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword react-component to your package.json to get listed on React Components, and submit a link to React Rocks.

-

Waiter, There's a CSS In My JavaScript #

+ +

Waiter, There's a CSS In My JavaScript

+

The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau (vjeux) talks about some of the fundamental style management challenges we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused react-style.

-

Test Isolation #

+ +

Test Isolation

+

Yahoo! shows us how they make use of iframe elements to unit test React components in isolation.

-

You've Got The Hang of Flux, Now Let's Flow #

+ +

You've Got The Hang of Flux, Now Let's Flow

+

Facebook Open Source released Flow this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to type check React applications. There's never been a better reason to start making use of propTypes in your component specifications!

-

Countdown to React.js Conf 2014 #

+ +

Countdown to React.js Conf 2014

+

We're counting down the days until React.js Conf at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.

-

React Meetups Around the World #

+ +

React Meetups Around the World

+
@@ -253,6 +275,7 @@
+ -

What is Relay? #

+ +

What is Relay?

+

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on this.props.

Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.

-

What is GraphQL? #

+ +

What is GraphQL?

+

GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years.

On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.

-

The value proposition #

+ +

The value proposition

+

Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.

By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it's not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload.

@@ -133,11 +141,15 @@
  • Simplified server implementation: Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources.
  • Uniform mutations: There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you'll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate "optimistic" update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back.
    • -

    How does it relate to Flux? #

    + +

    How does it relate to Flux?

    +

    In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.

    At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.

    -

    Open source plans #

    + +

    Open source plans

    +

    We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).

    In the meantime, we'll be providing more and more information in the form of blog posts (and in other channels). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.

    @@ -229,6 +241,7 @@
    + -

    What is Relay? #

    + +

    What is Relay?

    +

    Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

    Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on this.props.

    Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.

    -

    What is GraphQL? #

    + +

    What is GraphQL?

    +

    GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years.

    On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.

    -

    The value proposition #

    + +

    The value proposition

    +

    Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.

    By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it's not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload.

    @@ -341,11 +388,15 @@
  • Simplified server implementation: Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources.
  • Uniform mutations: There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you'll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate "optimistic" update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back.
    • -

    How does it relate to Flux? #

    + +

    How does it relate to Flux?

    +

    In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.

    At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.

    -

    Open source plans #

    + +

    Open source plans

    +

    We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).

    In the meantime, we'll be providing more and more information in the form of blog posts (and in other channels). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.

    @@ -382,7 +433,9 @@

    It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.

    -

    The talks #

    + +

    The talks

    +

    Keynote #

    @@ -615,7 +668,9 @@
    -

    Reactions #

    + +

    Reactions

    +

    The conference is over, but the conversation has just begun.

    Mihai Parparita detailed his efforts to hack his way to a React.js Conf ticket; James Long blogged about his first encounter with React Native; Eric Florenzano talked about how he perceives the impact of Relay, GraphQL, and React Native on software development; Margaret Staples blogged about her experience of being on-campus at Facebook HQ; Jeff Barczewski tied his experience of attending the conference up with a bow in this blog post filled with photos, videos, and links; Kevin Old left us with his takeaways; Paul Wittmann found React Native freshly on his radar; and finally, undeterred by not being able to attend the conference in person, Justin Ball summarized it from afar.

    @@ -678,13 +733,17 @@

    We just published a beta version of React v0.13.0 to npm! You can install it with npm install react@0.13.0-beta.1. Since this is a pre-release, we don't have proper release notes ready.

    So what is that one feature I'm so excited about that I just couldn't wait to share?

    -

    Plain JavaScript Classes!! #

    + +

    Plain JavaScript Classes!!

    +

    JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.

    We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.

    In React 0.13.0 you no longer need to use React.createClass to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with react-tools by making use of the harmony option: jsx --harmony.

    -

    ES6 Classes #

    class HelloMessage extends React.Component {
+
+
    ES6 Classes
    
+
    class HelloMessage extends React.Component {
   render() {
     return <div>Hello {this.props.name}</div>;
   }
@@ -711,7 +770,9 @@
 }
 Counter.propTypes = { initialCount: React.PropTypes.number };
 Counter.defaultProps = { initialCount: 0 };
-
    ES7+ Property Initializers #
    
+
    +

    ES7+ Property Initializers

    +

    Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:

    // Future Version
 export class Counter extends React.Component {
@@ -731,7 +792,9 @@
 }

    This was inspired by TypeScript's property initializers.

    -

    Autobinding #

    + +

    Autobinding

    +

    React.createClass has a built-in magic feature that bound all methods to this automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.

    Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.

    @@ -753,7 +816,9 @@ } ... } -

    Mixins #

    + +

    Mixins

    +

    Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.

    There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn't help that effort.

    @@ -767,7 +832,9 @@

    The classic React.createClass style of creating classes will continue to work just fine.

    -

    Other Languages! #

    + +

    Other Languages!

    +

    Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.

    You can also use CoffeeScript classes:

    @@ -842,19 +909,25 @@ Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.

    To apply for the scholarship, please visit the Application Page: https://www.surveymonkey.com/s/XVJGK6R

    -

    Award Includes #

    + +

    Award Includes

    + -

    Important Dates #

    + +

    Important Dates

    + -

    Eligibility #

    + +

    Eligibility

    + -

    Step 4: Identify Where Your State Should Live #

    + +

    Step 4: Identify Where Your State Should Live

    +

    See the Pen Thinking In React: Step 4 by Kevin Lacker (@lacker) on CodePen.

    @@ -206,7 +218,9 @@

    Cool, so we've decided that our state lives in FilterableProductTable. First, add an instance property this.state = {filterText: '', inStockOnly: false} to FilterableProductTable's constructor to reflect the initial state of your application. Then, pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

    You can start seeing how your application will behave: set filterText to "ball" and refresh your app. You'll see that the data table is updated correctly.

    -

    Step 5: Add Inverse Data Flow #

    + +

    Step 5: Add Inverse Data Flow

    +

    See the Pen Thinking In React: Step 5 on CodePen.

    @@ -220,7 +234,9 @@

    Let's think about what we want to happen. We want to make sure that whenever the user changes the form, we update the state to reflect the user input. Since components should only update their own state, FilterableProductTable will pass callbacks to SearchBar that will fire whenever the state should be updated. We can use the onChange event on the inputs to be notified of it. The callbacks passed by FilterableProductTable will call setState(), and the app will be updated.

    Though this sounds complex, it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.

    -

    And That's It #

    + +

    And That's It

    +

    Hopefully, this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :)

    @@ -527,6 +543,7 @@
    +