Add new docs website (#10896)
Adds a new docs website, built with Gatsby JS, to replace the old Jekyll site. Source code for the new site lives in /www (although markdown and YML data still comes from the legacy /docs folder). Changes to either markdown or website source code can be previewed on Netlify. The react-js bot should automatically add comments to each PR with preview links. (This preview is generated by running the newly-added yarn build:docs command in the root package.json.) The majority of the changes in this PR are contained within the new /www directory. However some minor modifications have been made to existing content in the /docs directory: * Modified frontmatter author block to always be an array * Small markdown formatting tweaks
This commit is contained in:
Brian Vaughn
GitHub
parent
803b493314
commit
96fde8a09a
|
|
@ -17,4 +17,5 @@ coverage/
|
|||
scripts/bench/benchmarks/**/*.js
|
||||
scripts/bench/remote-repo/
|
||||
vendor/*
|
||||
www/public/*
|
||||
**/node_modules
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<PROJECT_ROOT>/node_modules/chrome-devtools-frontend/.*
|
||||
<PROJECT_ROOT>/node_modules/devtools-timeline-model/.*
|
||||
<PROJECT_ROOT>/node_modules/create-react-class/.*
|
||||
<PROJECT_ROOT>/www/node_modules/.*
|
||||
<PROJECT_ROOT>/.*/__mocks__/.*
|
||||
<PROJECT_ROOT>/.*/__tests__/.*
|
||||
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
<PROJECT_ROOT>/.*/docs/.*
|
||||
|
||||
[include]
|
||||
./www/node_modules/hex2rgba/
|
||||
|
||||
[libs]
|
||||
./node_modules/fbjs/flow/lib/dev.js
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
node_modules
|
||||
*~
|
||||
*.pyc
|
||||
static
|
||||
.grunt
|
||||
_SpecRunner.html
|
||||
__benchmarks__
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{"site_id":"f32c701b-ea0d-4350-8013-d3504b6441b5","path":"www/public"}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -2,87 +2,89 @@
|
|||
items:
|
||||
- id: tutorial
|
||||
title: Before We Start
|
||||
href: /tutorial/tutorial.html#before-we-start
|
||||
forceInternal: true
|
||||
subitems:
|
||||
- id: what-were-building
|
||||
- id: what-were-building
|
||||
title: What We're Building
|
||||
href: /react/tutorial/tutorial.html#what-were-building
|
||||
href: /tutorial/tutorial.html#what-were-building
|
||||
forceInternal: true
|
||||
- id: prerequisites
|
||||
title: Prerequisites
|
||||
href: /react/tutorial/tutorial.html#prerequisites
|
||||
href: /tutorial/tutorial.html#prerequisites
|
||||
forceInternal: true
|
||||
- id: how-to-follow-along
|
||||
title: How to Follow Along
|
||||
href: /react/tutorial/tutorial.html#how-to-follow-along
|
||||
href: /tutorial/tutorial.html#how-to-follow-along
|
||||
forceInternal: true
|
||||
- id: help-im-stuck
|
||||
title: Help, I'm Stuck!
|
||||
href: /react/tutorial/tutorial.html#help-im-stuck
|
||||
href: /tutorial/tutorial.html#help-im-stuck
|
||||
forceInternal: true
|
||||
- id: overview
|
||||
title: Overview
|
||||
href: /react/tutorial/tutorial.html#overview
|
||||
href: /tutorial/tutorial.html#overview
|
||||
forceInternal: true
|
||||
subitems:
|
||||
- id: what-is-react
|
||||
title: What is React?
|
||||
href: /react/tutorial/tutorial.html#what-is-react
|
||||
href: /tutorial/tutorial.html#what-is-react
|
||||
forceInternal: true
|
||||
- id: getting-started
|
||||
title: Getting Started
|
||||
href: /react/tutorial/tutorial.html#getting-started
|
||||
href: /tutorial/tutorial.html#getting-started
|
||||
forceInternal: true
|
||||
- id: passing-data-through-props
|
||||
title: Passing Data Through Props
|
||||
href: /react/tutorial/tutorial.html#passing-data-through-props
|
||||
href: /tutorial/tutorial.html#passing-data-through-props
|
||||
forceInternal: true
|
||||
- id: an-interactive-component
|
||||
title: An Interactive Component
|
||||
href: /react/tutorial/tutorial.html#an-interactive-component
|
||||
href: /tutorial/tutorial.html#an-interactive-component
|
||||
forceInternal: true
|
||||
- id: developer-tools
|
||||
- id: developer-tools
|
||||
title: Developer Tools
|
||||
href: /react/tutorial/tutorial.html#developer-tools
|
||||
href: /tutorial/tutorial.html#developer-tools
|
||||
forceInternal: true
|
||||
- id: lifting-state-up
|
||||
title: Lifting State Up
|
||||
href: /react/tutorial/tutorial.html#lifting-state-up
|
||||
href: /tutorial/tutorial.html#lifting-state-up
|
||||
forceInternal: true
|
||||
subitems:
|
||||
- id: why-immutability-is-important
|
||||
- id: why-immutability-is-important
|
||||
title: Why Immutability Is Important
|
||||
href: /react/tutorial/tutorial.html#why-immutability-is-important
|
||||
href: /tutorial/tutorial.html#why-immutability-is-important
|
||||
forceInternal: true
|
||||
- id: functional-components
|
||||
- id: functional-components
|
||||
title: Functional Components
|
||||
href: /react/tutorial/tutorial.html#functional-components
|
||||
href: /tutorial/tutorial.html#functional-components
|
||||
forceInternal: true
|
||||
- id: taking-turns
|
||||
title: Taking Turns
|
||||
href: /react/tutorial/tutorial.html#taking-turns
|
||||
href: /tutorial/tutorial.html#taking-turns
|
||||
forceInternal: true
|
||||
- id: declaring-a-winner
|
||||
title: Declaring a Winner
|
||||
href: /react/tutorial/tutorial.html#declaring-a-winner
|
||||
href: /tutorial/tutorial.html#declaring-a-winner
|
||||
forceInternal: true
|
||||
- id: storing-a-history
|
||||
title: Storing A History
|
||||
href: /react/tutorial/tutorial.html#storing-a-history
|
||||
href: /tutorial/tutorial.html#storing-a-history
|
||||
forceInternal: true
|
||||
subitems:
|
||||
- id: showing-the-moves
|
||||
title: Showing the Moves
|
||||
href: /react/tutorial/tutorial.html#showing-the-moves
|
||||
href: /tutorial/tutorial.html#showing-the-moves
|
||||
forceInternal: true
|
||||
- id: keys
|
||||
title: Keys
|
||||
href: /react/tutorial/tutorial.html#keys
|
||||
href: /tutorial/tutorial.html#keys
|
||||
forceInternal: true
|
||||
- id: implementing-time-travel
|
||||
- id: implementing-time-travel
|
||||
title: Implementing Time Travel
|
||||
href: /react/tutorial/tutorial.html#implementing-time-travel
|
||||
href: /tutorial/tutorial.html#implementing-time-travel
|
||||
forceInternal: true
|
||||
- id: wrapping-up
|
||||
title: Wrapping Up
|
||||
href: /react/tutorial/tutorial.html#wrapping-up
|
||||
href: /tutorial/tutorial.html#wrapping-up
|
||||
forceInternal: true
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: JSFiddle Integration
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
[JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Why did we build React?
|
||||
author: petehunt
|
||||
author: [petehunt]
|
||||
---
|
||||
|
||||
There are a lot of JavaScript MVC frameworks out there. Why did we build React
|
||||
|
|
@ -30,7 +30,7 @@ to render views, which we see as an advantage over templates for a few reasons:
|
|||
**no manual string concatenation** and therefore less surface area for XSS
|
||||
vulnerabilities.
|
||||
|
||||
We've also created [JSX](/react/docs/jsx-in-depth.html), an optional syntax
|
||||
We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax
|
||||
extension, in case you prefer the readability of HTML to raw JavaScript.
|
||||
|
||||
## Reactive updates are dead simple.
|
||||
|
|
@ -83,6 +83,6 @@ some pretty cool things with it:
|
|||
Head on over to [facebook.github.io/react](/react) to check out what we have
|
||||
built. Our documentation is geared towards building apps with the framework,
|
||||
but if you are interested in the nuts and bolts
|
||||
[get in touch](/react/support.html) with us!
|
||||
[get in touch](/support.html) with us!
|
||||
|
||||
Thanks for reading!
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #1"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
React was open sourced two weeks ago and it's time for a little round-up of what has been going on.
|
||||
|
|
@ -12,7 +12,7 @@ It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outsid
|
|||
> I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.
|
||||
>
|
||||
> The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
|
||||
> <figure>[](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html)</figure>
|
||||
> <figure><a href="http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html"><img src="../img/blog/khan-academy-editor.png"></a></figure>
|
||||
>
|
||||
> [Read the full post...](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outsid
|
|||
|
||||
## Origins of React
|
||||
|
||||
[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/react/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
|
||||
[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
|
||||
|
||||
> React isn't quite like any other popular JavaScript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #2"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
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.
|
||||
|
|
@ -24,7 +24,7 @@ Since the launch we have received a lot of feedback and are actively working on
|
|||
[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
|
||||
|
||||
> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) 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>[](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
|
||||
> <figure><a href="https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="../img/blog/chatapp.png"></a></figure>
|
||||
>
|
||||
> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/3457029
|
|||
Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React.
|
||||
|
||||
> Using [x-tags](http://www.x-tags.org/) 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 [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React.
|
||||
> <figure>[](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)</figure>
|
||||
> <figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="../img/blog/xreact.png"></a></figure>
|
||||
>
|
||||
> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.v
|
|||
> Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.
|
||||
>
|
||||
> 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>[](http://todomvc.com/labs/architecture-examples/react/)</figure>
|
||||
> <figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="../img/blog/todomvc.png"></a></figure>
|
||||
>
|
||||
> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react)
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.v
|
|||
|
||||
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:
|
||||
|
||||
- [Whitespace removal](/react/docs/jsx-is-not-html.html)
|
||||
- [HTML Entities](/react/docs/jsx-is-not-html.html)
|
||||
- [Comments](/react/docs/jsx-is-not-html.html)
|
||||
- [Custom HTML Attributes](/react/docs/jsx-is-not-html.html)
|
||||
- [Whitespace removal](/docs/jsx-is-not-html.html)
|
||||
- [HTML Entities](/docs/jsx-is-not-html.html)
|
||||
- [Comments](/docs/jsx-is-not-html.html)
|
||||
- [Custom HTML Attributes](/docs/jsx-is-not-html.html)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.3.3"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #3"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
|
||||
|
|
@ -9,7 +9,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
|
|||
|
||||
[Clay Allsopp](https://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
|
||||
|
||||
> [<img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
|
||||
> [<img style="float: right; margin: 0 0 10px 10px;" src="../img/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
|
||||
>
|
||||
> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
|
||||
>
|
||||
|
|
@ -24,24 +24,24 @@ The highlight of this week is that an interaction-heavy app has been ported to R
|
|||
> Grunt task for compiling Facebook React's .jsx templates into .js
|
||||
>
|
||||
> ```javascript
|
||||
grunt.initConfig({
|
||||
react: {
|
||||
app: {
|
||||
options: { extension: 'js' },
|
||||
files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
|
||||
```
|
||||
> grunt.initConfig({
|
||||
> react: {
|
||||
> app: {
|
||||
> options: { extension: 'js' },
|
||||
> files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
|
||||
> ```
|
||||
>
|
||||
> It also works great with `grunt-browserify`!
|
||||
>
|
||||
> ```javascript
|
||||
browserify: {
|
||||
options: {
|
||||
transform: [ require('grunt-react').browserify ]
|
||||
},
|
||||
app: {
|
||||
src: 'path/to/source/main.js',
|
||||
dest: 'path/to/target/output.js'
|
||||
```
|
||||
> browserify: {
|
||||
> options: {
|
||||
> transform: [ require('grunt-react').browserify ]
|
||||
> },
|
||||
> app: {
|
||||
> src: 'path/to/source/main.js',
|
||||
> dest: 'path/to/target/output.js'
|
||||
> ```
|
||||
>
|
||||
> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
|
||||
|
||||
|
|
@ -70,14 +70,14 @@ browserify: {
|
|||
> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
|
||||
>
|
||||
> ```javascript
|
||||
{div, h3, textarea} = React.DOM
|
||||
(div {className: 'MarkdownEditor'}, [
|
||||
(h3 {}, 'Input'),
|
||||
(textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
|
||||
@state.value
|
||||
)
|
||||
])
|
||||
```
|
||||
> {div, h3, textarea} = React.DOM
|
||||
> (div {className: 'MarkdownEditor'}, [
|
||||
> (h3 {}, 'Input'),
|
||||
> (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
|
||||
> @state.value
|
||||
> )
|
||||
> ])
|
||||
> ```
|
||||
>
|
||||
> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "New in React v0.4: Autobind by Default"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #4"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
|
||||
|
|
@ -18,11 +18,12 @@ React reconciliation process appears to be very well suited to implement a text
|
|||
The best part is the demo of how React reconciliation process makes live editing more user-friendly.
|
||||
|
||||
> Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
|
||||
> <figure>[<img src="/react/img/blog/monkeys.gif" width="70%" />](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)</figure>
|
||||
|
||||
[](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
|
||||
|
||||
## React Snippets
|
||||
|
||||
Over the past several weeks, members of our team, [Pete Hunt](http://www.petehunt.net/) and [Paul O'Shannessy](http://zpao.com/), answered many questions that were asked in the [React group](https://groups.google.com/forum/#!forum/reactjs). They give a good overview of how to integrate React with other libraries and APIs through the use of [Mixins](/react/docs/reusable-components.html) and [Lifecycle Methods](/react/docs/working-with-the-browser.html).
|
||||
Over the past several weeks, members of our team, [Pete Hunt](http://www.petehunt.net/) and [Paul O'Shannessy](http://zpao.com/), answered many questions that were asked in the [React group](https://groups.google.com/forum/#!forum/reactjs). They give a good overview of how to integrate React with other libraries and APIs through the use of [Mixins](/docs/reusable-components.html) and [Lifecycle Methods](/docs/working-with-the-browser.html).
|
||||
|
||||
> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk)
|
||||
>
|
||||
|
|
@ -54,4 +55,4 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
|
|||
[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
|
||||
|
||||
> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
|
||||
> <figure>[](https://tomocchino.github.io/react-snake/)</figure>
|
||||
> <figure><a href="https://tomocchino.github.io/react-snake/"><img src="../img/blog/snake.png"></a></figure>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "New in React v0.4: Prop Validation and Default Values"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.4.0"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!
|
||||
|
|
@ -10,7 +10,7 @@ This release could not have happened without the support of our growing communit
|
|||
|
||||
React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.
|
||||
|
||||
When you're ready, [go download it](/react/downloads.html)!
|
||||
When you're ready, [go download it](/docs/installation.html)!
|
||||
|
||||
|
||||
### React
|
||||
|
|
@ -18,10 +18,10 @@ When you're ready, [go download it](/react/downloads.html)!
|
|||
* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
|
||||
* Support for more DOM elements and attributes (e.g., `<canvas>`)
|
||||
* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
|
||||
* `prop` improvements: validation and default values. [Read our blog post for details...](/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
|
||||
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/react/docs/multiple-components.html)
|
||||
* Removed `React.autoBind`. [Read our blog post for details...](/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
|
||||
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](/react/docs/forms.html)
|
||||
* `prop` improvements: validation and default values. [Read our blog post for details...](/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
|
||||
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/docs/multiple-components.html)
|
||||
* Removed `React.autoBind`. [Read our blog post for details...](/blog/2013/07/02/react-v0-4-autobind-by-default.html)
|
||||
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](/docs/forms.html)
|
||||
* We've implemented an improved synthetic event system that conforms to the W3C spec.
|
||||
* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as its second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #5"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
We launched the [React Facebook Page](https://www.facebook.com/react) along with the React v0.4 launch. 700 people already liked it to get updated on the project :)
|
||||
|
|
@ -75,7 +75,7 @@ React.renderComponent(
|
|||
|
||||
[Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke), React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.
|
||||
|
||||
<figure><iframe width="100%" height="400" src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="650" height="400" src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
|
||||
## Docs
|
||||
|
|
@ -84,15 +84,15 @@ React.renderComponent(
|
|||
|
||||
> Guides
|
||||
>
|
||||
> * [Why React?](/react/docs/why-react.html)
|
||||
> * [Displaying Data](/react/docs/displaying-data.html)
|
||||
> * [JSX in Depth](/react/docs/jsx-in-depth.html)
|
||||
> * [JSX Gotchas](/react/docs/jsx-gotchas.html)
|
||||
> * [Interactivity and Dynamic UIs](/react/docs/interactivity-and-dynamic-uis.html)
|
||||
> * [Multiple Components](/react/docs/multiple-components.html)
|
||||
> * [Reusable Components](/react/docs/reusable-components.html)
|
||||
> * [Forms](/react/docs/forms.html)
|
||||
> * [Working With the Browser](/react/docs/working-with-the-browser.html)
|
||||
> * [More About Refs](/react/docs/more-about-refs.html)
|
||||
> * [Tooling integration](/react/docs/tooling-integration.html)
|
||||
> * [Reference](/react/docs/top-level-api.html)
|
||||
> * [Why React?](/docs/why-react.html)
|
||||
> * [Displaying Data](/docs/displaying-data.html)
|
||||
> * [JSX in Depth](/docs/jsx-in-depth.html)
|
||||
> * [JSX Gotchas](/docs/jsx-gotchas.html)
|
||||
> * [Interactivity and Dynamic UIs](/docs/interactivity-and-dynamic-uis.html)
|
||||
> * [Multiple Components](/docs/multiple-components.html)
|
||||
> * [Reusable Components](/docs/reusable-components.html)
|
||||
> * [Forms](/docs/forms.html)
|
||||
> * [Working With the Browser](/docs/working-with-the-browser.html)
|
||||
> * [More About Refs](/docs/more-about-refs.html)
|
||||
> * [Tooling integration](/docs/tooling-integration.html)
|
||||
> * [Reference](/docs/top-level-api.html)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.4.1"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.
|
||||
|
|
@ -21,4 +21,4 @@ React v0.4.1 is a small update, mostly containing correctness fixes. Some code h
|
|||
* Improved environment detection so it can be run in a non-browser environment.
|
||||
|
||||
|
||||
[Download it now!](/react/downloads.html)
|
||||
[Download it now!](/downloads.html)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Use React and JSX in Ruby on Rails"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: [react-rails](https://github.com/facebook/react-rails).
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #6"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
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.
|
||||
|
|
@ -8,7 +8,7 @@ This is the first Community Round-up where none of the items are from Facebook/I
|
|||
## React Game Tutorial
|
||||
|
||||
[Caleb Cassel](https://twitter.com/CalebCassel) wrote a [step-by-step tutorial](https://rawgithub.com/calebcassel/react-demo/master/part1.html) about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
|
||||
<figure>[](https://rawgithub.com/calebcassel/react-demo/master/part1.html)</figure>
|
||||
<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="../img/blog/dog-tutorial.png"></a></figure>
|
||||
|
||||
|
||||
## Reactify
|
||||
|
|
@ -18,8 +18,8 @@ This is the first Community Round-up where none of the items are from Facebook/I
|
|||
> Browserify v2 transform for `text/jsx`. Basic usage is:
|
||||
>
|
||||
> ```
|
||||
% browserify -t reactify main.jsx
|
||||
```
|
||||
> % browserify -t reactify main.jsx
|
||||
> ```
|
||||
>
|
||||
> `reactify` transform activates for files with either `.jsx` extension or `/** @jsx React.DOM */` pragma as a first line for any `.js` file.
|
||||
>
|
||||
|
|
@ -74,6 +74,6 @@ este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.
|
|||
> I'm the author of "[Land of Lisp](http://landoflisp.com/)" and I love your framework. I built a somewhat similar framework a year ago [WebFUI](https://github.com/drcode/webfui) 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.)
|
||||
>
|
||||
> 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>[](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)</figure>
|
||||
<figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="../img/blog/landoflisp.png"></a></figure>
|
||||
>
|
||||
> [Read the full post...](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Use React and JSX in Python Applications"
|
||||
author: kmeht
|
||||
author: [kmeht]
|
||||
---
|
||||
|
||||
Today we're happy to announce the initial release of [PyReact](https://github.com/facebook/react-python), which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #7"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
It's been three months since we open sourced React and it is going well. Some stats so far:
|
||||
|
|
@ -10,14 +10,14 @@ It's been three months since we open sourced React and it is going well. Some st
|
|||
* [226 posts on Google Group](https://groups.google.com/forum/#!forum/reactjs)
|
||||
* [76 GitHub projects using React](https://gist.github.com/vjeux/6335762)
|
||||
* [30 contributors](https://github.com/facebook/react/graphs/contributors)
|
||||
* [15 blog posts](/react/blog/)
|
||||
* [15 blog posts](/blog/)
|
||||
* 2 early adopters: [Khan Academy](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)
|
||||
|
||||
|
||||
## Wolfenstein Rendering Engine Ported to React
|
||||
|
||||
[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183) file for the implementation.
|
||||
<figure>[](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)</figure>
|
||||
<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="../img/blog/wolfenstein_react.png"></a></figure>
|
||||
|
||||
|
||||
## React & Meteor
|
||||
|
|
@ -51,7 +51,7 @@ It's been three months since we open sourced React and it is going well. Some st
|
|||
[Jordan Walke](https://github.com/jordwalke) implemented a complete React project creator called [react-page](https://github.com/facebook/react-page/). It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
|
||||
|
||||
> Easy Application Development with React JavaScript
|
||||
> <figure>[](https://github.com/facebook/react-page/)</figure>
|
||||
> <figure><a href="https://github.com/facebook/react-page/"><img src="../img/blog/react-page.png"></a></figure>
|
||||
>
|
||||
> **Why Server Rendering?**
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #8"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
A lot has happened in the month since our last update. Here are some of the more interesting things we've found. But first, we have a couple updates before we share links.
|
||||
|
|
@ -54,13 +54,13 @@ While this is not going to work for all the attributes since they are camelCased
|
|||
## Markdown in React
|
||||
|
||||
[Sophie Alpert](http://sophiebits.com/) converted [marked](https://github.com/chjj/marked), a Markdown JavaScript implementation, in React: [marked-react](https://github.com/sophiebits/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.
|
||||
<figure>[](https://github.com/sophiebits/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457)</figure>
|
||||
<figure><a href="https://github.com/sophiebits/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="../img/blog/markdown_refactor.png"></a></figure>
|
||||
|
||||
|
||||
## Unite from BugBusters
|
||||
|
||||
[Renault John Lecoultre](https://twitter.com/renajohn) wrote [Unite](https://www.bugbuster.com/), an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
|
||||
<figure>[](https://unite.bugbuster.com/)</figure>
|
||||
<figure><a href="https://unite.bugbuster.com/"><img src="../img/blog/unite.png"></a></figure>
|
||||
|
||||
## #reactjs IRC Logs
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
title: "React v0.5"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` 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 few exceptions](https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
|
||||
|
||||
The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/react/docs/addons.html).
|
||||
The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/docs/addons.html).
|
||||
|
||||
## Thanks to Our Community
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ It's been awesome to see the things that people are building with React, and we
|
|||
|
||||
### React with Addons (New!)
|
||||
|
||||
* 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. [Read more in the docs](/react/docs/addons.html).
|
||||
* 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. [Read more in the docs](/docs/addons.html).
|
||||
|
||||
### JSX
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.5.1"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: "Community Round-up #9"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## React Hackathon Winner
|
||||
|
|
@ -15,7 +15,7 @@ We organized a React hackathon last week-end in the Facebook Seattle office. 50
|
|||
> The game itself is pretty simple. People join the "room" by going to [http://qu.izti.me](http://qu.izti.me/) on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.
|
||||
>
|
||||
> In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
|
||||
><figure>[](http://bold-it.com/javascript/facebook-react-example/)</figure>
|
||||
><figure><a href="http://bold-it.com/javascript/facebook-react-example/"><img src="../img/blog/quiztime.png"></a></figure>
|
||||
>
|
||||
> [Read More...](http://bold-it.com/javascript/facebook-react-example/)
|
||||
|
||||
|
|
@ -59,8 +59,8 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
|
|||
> A wrapper around JSHint to allow linting of files containing JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
|
||||
>
|
||||
> ```
|
||||
npm install -g jsxhint
|
||||
```
|
||||
> npm install -g jsxhint
|
||||
> ```
|
||||
>
|
||||
> [Check it out on GitHub...](https://github.com/CondeNast/JSXHint)
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ npm install -g jsxhint
|
|||
> The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.
|
||||
>
|
||||
> With Turbolinks alone, the entire <body> would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
|
||||
><figure>[](https://turbo-react.herokuapp.com/)</figure>
|
||||
><figure><a href="https://turbo-react.herokuapp.com/"><img src="../img/blog/turboreact.png"></a></figure>
|
||||
>
|
||||
> [Check out the demo...](https://turbo-react.herokuapp.com/)
|
||||
|
||||
|
|
@ -88,10 +88,10 @@ npm install -g jsxhint
|
|||
> Let's call it Table (to avoid any confusion what the component is about).
|
||||
>
|
||||
> ```javascript
|
||||
var Table = React.createClass({
|
||||
/*stuff goeth here*/
|
||||
});
|
||||
```
|
||||
> var Table = React.createClass({
|
||||
> /*stuff goeth here*/
|
||||
> });
|
||||
> ```
|
||||
>
|
||||
> You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #10"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.
|
||||
|
|
@ -26,7 +26,7 @@ The best part is that no drastic changes have been required to support all those
|
|||
|
||||
[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
|
||||
|
||||
<figure><iframe width="100%" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="650" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
|
||||
## Server-side React with PHP
|
||||
|
|
@ -47,7 +47,7 @@ The best part is that no drastic changes have been required to support all those
|
|||
> [**Read part 2 ...**](http://www.phpied.com/server-side-react-with-php-part-2/)
|
||||
>
|
||||
> Rendered markup on the server:
|
||||
> <figure>[](http://www.phpied.com/server-side-react-with-php-part-2/)</figure>
|
||||
> <figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="../img/blog/react-php.png"></a></figure>
|
||||
|
||||
|
||||
## TodoMVC Benchmarks
|
||||
|
|
@ -92,7 +92,7 @@ The fact that you can control when components are rendered is a very important c
|
|||
## Guess the filter
|
||||
|
||||
[Connor McSheffrey](http://conr.me) implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
|
||||
<figure>[](http://guessthefilter.com/)</figure>
|
||||
<figure><a href="http://guessthefilter.com/"><img src="../img/blog/guess_filter.jpg"></a></figure>
|
||||
|
||||
|
||||
## React vs FruitMachine
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #11"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!
|
||||
|
|
@ -9,25 +9,25 @@ This round-up is the proof that React has taken off from its Facebook's root: it
|
|||
|
||||
[Steve Luscher](https://github.com/steveluscher) working at [LeanPub](https://leanpub.com/) made a 30 min talk at [Super VanJS](https://twitter.com/vanjs). He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.
|
||||
|
||||
<figure><iframe width="100%" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="650" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
|
||||
## React Tips
|
||||
|
||||
[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](/react/tips/introduction.html)!
|
||||
[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](/tips/introduction.html)!
|
||||
|
||||
- [Inline Styles](/react/tips/inline-styles.html)
|
||||
- [If-Else in JSX](/react/tips/if-else-in-JSX.html)
|
||||
- [Self-Closing Tag](/react/tips/self-closing-tag.html)
|
||||
- [Maximum Number of JSX Root Nodes](/react/tips/maximum-number-of-jsx-root-nodes.html)
|
||||
- [Shorthand for Specifying Pixel Values in style props](/react/tips/style-props-value-px.html)
|
||||
- [Type of the Children props](/react/tips/children-props-type.html)
|
||||
- [Value of null for Controlled Input](/react/tips/controlled-input-null-value.html)
|
||||
- [`componentWillReceiveProps` Not Triggered After Mounting](/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
|
||||
- [Props in getInitialState Is an Anti-Pattern](/react/tips/props-in-getInitialState-as-anti-pattern.html)
|
||||
- [DOM Event Listeners in a Component](/react/tips/dom-event-listeners.html)
|
||||
- [Load Initial Data via AJAX](/react/tips/initial-ajax.html)
|
||||
- [False in JSX](/react/tips/false-in-jsx.html)
|
||||
- [Inline Styles](/tips/inline-styles.html)
|
||||
- [If-Else in JSX](/tips/if-else-in-JSX.html)
|
||||
- [Self-Closing Tag](/tips/self-closing-tag.html)
|
||||
- [Maximum Number of JSX Root Nodes](/tips/maximum-number-of-jsx-root-nodes.html)
|
||||
- [Shorthand for Specifying Pixel Values in style props](/tips/style-props-value-px.html)
|
||||
- [Type of the Children props](/tips/children-props-type.html)
|
||||
- [Value of null for Controlled Input](/tips/controlled-input-null-value.html)
|
||||
- [`componentWillReceiveProps` Not Triggered After Mounting](/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
|
||||
- [Props in getInitialState Is an Anti-Pattern](/tips/props-in-getInitialState-as-anti-pattern.html)
|
||||
- [DOM Event Listeners in a Component](/tips/dom-event-listeners.html)
|
||||
- [Load Initial Data via AJAX](/tips/initial-ajax.html)
|
||||
- [False in JSX](/tips/false-in-jsx.html)
|
||||
|
||||
|
||||
## Intro to the React Framework
|
||||
|
|
@ -35,7 +35,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
|
|||
[Pavan Podila](http://blog.pixelingene.com/) wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.
|
||||
|
||||
> Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
|
||||
<figure>[](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)</figure>
|
||||
<figure><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660"><img src="../img/blog/tutsplus.png"></a></figure>
|
||||
>
|
||||
> [Read the full article ...](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
|
|||
## Genesis Skeleton
|
||||
|
||||
[Eric Clemmons](https://ericclemmons.github.io/) is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
|
||||
<figure>[](http://genesis-skeleton.com/)</figure>
|
||||
<figure><a href="http://genesis-skeleton.com/"><img src="../img/blog/genesis_skeleton.png"></a>a></figure>
|
||||
|
||||
|
||||
## AgFlow Talk
|
||||
|
|
@ -82,10 +82,10 @@ This round-up is the proof that React has taken off from its Facebook's root: it
|
|||
## Photo Gallery
|
||||
|
||||
[Maykel Loomans](http://miekd.com/), designer at Instagram, wrote a gallery for photos he shot using React.
|
||||
<figure>[](http://photos.miekd.com/xoxo2013/)</figure>
|
||||
<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="../img/blog/xoxo2013.png"></a>a></figure>
|
||||
|
||||
|
||||
## Random Tweet
|
||||
|
||||
<img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
|
||||
<img src="../img/blog/steve_reverse.gif" style="float: right;" />
|
||||
<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>— Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.5.2, v0.4.2"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a `key`. Typically "safe" data is used for a `key`, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.8"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
I'll start by answering the obvious question:
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
---
|
||||
title: "Community Round-up #12"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/react/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](https://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
|
||||
React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](https://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
|
||||
|
||||
## The Future of JavaScript MVC
|
||||
|
||||
[David Nolen](https://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
|
||||
[David Nolen](https://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
|
||||
|
||||
> We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.
|
||||
>
|
||||
> Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
|
||||
>
|
||||
> A whole lot.
|
||||
> <figure>[](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
|
||||
> <figure><a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"><img src="../img/blog/om-backbone.png"></a></figure>
|
||||
>
|
||||
> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
|
||||
|
||||
|
|
@ -22,31 +22,31 @@ React got featured on the front-page of Hacker News thanks to the Om library. If
|
|||
|
||||
## Scroll Position with React
|
||||
|
||||
Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](/react/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](/react/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
|
||||
Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
|
||||
|
||||
> We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
|
||||
>
|
||||
> ```
|
||||
componentWillUpdate: function() {
|
||||
var node = this.getDOMNode();
|
||||
this.shouldScrollBottom =
|
||||
(node.scrollTop + node.offsetHeight) === node.scrollHeight;
|
||||
},
|
||||
componentDidUpdate: function() {
|
||||
if (this.shouldScrollBottom) {
|
||||
var node = this.getDOMNode();
|
||||
node.scrollTop = node.scrollHeight
|
||||
}
|
||||
},
|
||||
```
|
||||
> componentWillUpdate: function() {
|
||||
> var node = this.getDOMNode();
|
||||
> this.shouldScrollBottom =
|
||||
> (node.scrollTop + node.offsetHeight) === node.scrollHeight;
|
||||
> },
|
||||
> componentDidUpdate: function() {
|
||||
> if (this.shouldScrollBottom) {
|
||||
> var node = this.getDOMNode();
|
||||
> node.scrollTop = node.scrollHeight
|
||||
> }
|
||||
> },
|
||||
> ```
|
||||
>
|
||||
> [Check out the blog article...](http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html)
|
||||
|
||||
|
||||
## Lights Out
|
||||
|
||||
React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](/react/docs/animation.html) to implement animations.
|
||||
<figure>[](https://chenglou.github.io/react-lights-out/)</figure>
|
||||
React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](/docs/animation.html) to implement animations.
|
||||
<figure><a href="https://chenglou.github.io/react-lights-out/"><img src="../img/blog/lights-out.png"></a></figure>
|
||||
|
||||
[Try it out!](https://chenglou.github.io/react-lights-out/)
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
|
|||
## Reactive Table Bookmarklet
|
||||
|
||||
[Stoyan Stefanov](http://www.phpied.com/) wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json.
|
||||
<figure>[](http://www.phpied.com/reactivetable-bookmarklet/)</figure>
|
||||
<figure><a href="http://www.phpied.com/reactivetable-bookmarklet/"><img src="../img/blog/reactive-bookmarklet.png"></a></figure>
|
||||
|
||||
[Check out the blog post...](http://www.phpied.com/reactivetable-bookmarklet/)
|
||||
|
||||
|
|
@ -91,9 +91,9 @@ hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
|
|||
## JSX Compiler
|
||||
|
||||
Ever wanted to have a quick way to see what a JSX tag would be converted to? [Tim Yung](http://www.yungsters.com/) made a page for it.
|
||||
<figure>[](/react/jsx-compiler.html)</figure>
|
||||
<figure><a href="/react/jsx-compiler.html"><img src="../img/blog/jsx-compiler.png"></a></figure>
|
||||
|
||||
[Try it out!](/react/jsx-compiler.html)
|
||||
[Try it out!](/jsx-compiler.html)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #13"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!
|
||||
|
|
@ -19,7 +19,7 @@ Happy holidays! This blog post is a little-late Christmas present for all the Re
|
|||
|
||||
[Stoyan Stefanov](http://www.phpied.com/) talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.
|
||||
|
||||
<figure><iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
|
||||
## JSX: E4X The Good Parts
|
||||
|
|
@ -94,7 +94,7 @@ var MyComponent = React.createClass({
|
|||
[David Chang](http://davidandsuzi.com/) working at [HasOffer](http://www.hasoffers.com/) wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.
|
||||
|
||||
> Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that's 67% faster). You'll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it's 433ms, which is more than half of the total time!
|
||||
> <figure>[](http://davidandsuzi.com/ngreact-react-components-in-angular/)</figure>
|
||||
> <figure><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/"><img src="../img/blog/ngreact.png"></a></figure>
|
||||
>
|
||||
> [Read the full article...](http://davidandsuzi.com/ngreact-react-components-in-angular/)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
---
|
||||
title: "React Chrome Developer Tools"
|
||||
author: sebmarkbage
|
||||
author: [sebmarkbage]
|
||||
---
|
||||
|
||||
With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), an extension to the Chrome Developer Tools. [Download them from the Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).
|
||||
|
||||
<figure><iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.
|
||||
|
||||
Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.
|
||||
|
||||
When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
|
||||
<figure>[](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)</figure>
|
||||
<figure><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="../img/blog/react-dev-tools.jpg"></a></figure>
|
||||
|
||||
We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept [pull requests on GitHub](https://github.com/facebook/react-devtools).
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #14"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.
|
||||
|
|
@ -21,14 +21,14 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
|
|||
## Animal Sounds
|
||||
|
||||
[Josh Duck](http://joshduck.com/) used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
|
||||
<figure>[](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)</figure>
|
||||
[](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
|
||||
|
||||
[Download the app...](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
|
||||
|
||||
|
||||
## React Rails Tutorial
|
||||
|
||||
[Selem Delul](http://selem.im) bundled the [React Tutorial](/react/tutorial/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
|
||||
[Selem Delul](http://selem.im) bundled the [React Tutorial](/tutorial/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
|
||||
|
||||
> ```
|
||||
git clone https://github.com/necrodome/react-rails-tutorial
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #15"
|
||||
author: jgebhardt
|
||||
author: [jgebhardt]
|
||||
---
|
||||
|
||||
Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of JavaScript MVC Frameworks"](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
|
||||
|
|
@ -34,7 +34,7 @@ React's one-way data-binding naturally lends itself to a functional programming
|
|||
|
||||
Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #16"
|
||||
author: jgebhardt
|
||||
author: [jgebhardt]
|
||||
---
|
||||
|
||||
There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.
|
||||
|
|
@ -15,7 +15,7 @@ Got five minutes to pitch React to your coworkers? John Lynch ([@johnrlynch](htt
|
|||
|
||||
## React's diff algorithm
|
||||
|
||||
React core team member Christopher Chedeau ([@vjeux](https://twitter.com/vjeux)) explores the innards of React's tree diffing algorithm in this [extensive and well-illustrated post](http://calendar.perfplanet.com/2013/diff/). <figure>[](http://calendar.perfplanet.com/2013/diff/)</figure>
|
||||
React core team member Christopher Chedeau ([@vjeux](https://twitter.com/vjeux)) explores the innards of React's tree diffing algorithm in this [extensive and well-illustrated post](http://calendar.perfplanet.com/2013/diff/). <figure>[](http://calendar.perfplanet.com/2013/diff/)</figure>
|
||||
|
||||
While we're talking about tree diffing: Matt Esch ([@MatthewEsch](https://twitter.com/MatthewEsch)) created [this project](https://github.com/Matt-Esch/virtual-dom), which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ Eric Florenzano ([@ericflo](https://twitter.com/ericflo)) sheds some light on wh
|
|||
> [Read the full post...](http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/)
|
||||
|
||||
## Building a complex React component
|
||||
[Matt Harrison](http://matt-harrison.com/) walks through the process of [creating an SVG-based Resistance Calculator](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/) using React. <figure>[](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
|
||||
[Matt Harrison](http://matt-harrison.com/) walks through the process of [creating an SVG-based Resistance Calculator](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/) using React. <figure>[](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.9 RC
|
||||
author: sophiebits
|
||||
author: [sophiebits]
|
||||
---
|
||||
|
||||
We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.9
|
||||
author: sophiebits
|
||||
author: [sophiebits]
|
||||
---
|
||||
|
||||
I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!
|
||||
|
|
@ -24,7 +24,7 @@ We've also published version `0.9.0` of the `react` and `react-tools` packages o
|
|||
|
||||
This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.
|
||||
|
||||
We've also added to the add-ons build [React.addons.TestUtils](/react/docs/test-utils.html), a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.
|
||||
We've also added to the add-ons build [React.addons.TestUtils](/docs/test-utils.html), a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.
|
||||
|
||||
We've also made several other improvements and a few breaking changes; the full changelog is provided below.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #17"
|
||||
author: jgebhardt
|
||||
author: [jgebhardt]
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ Sberbank, Russia's largest bank, recently switched large parts of their site to
|
|||
### Makona Editor
|
||||
|
||||
John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
|
||||
<figure>[](https://johnthethird.github.io/makona-editor/)</figure>
|
||||
[](https://johnthethird.github.io/makona-editor/)
|
||||
|
||||
### Create Chrome extensions using React
|
||||
React is in no way limited to just web pages. Brandon Tilley ([@BinaryMuse](https://twitter.com/BinaryMuse)) just released a detailed walk-through of [how he built his Chrome extension "Fast Tab Switcher" using React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html).
|
||||
|
|
@ -41,7 +41,7 @@ Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a si
|
|||
|
||||
### SVG-based graphical node editor
|
||||
[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](https://forresto.github.io/prototyping/react/) in React.
|
||||
<figure>[](https://forresto.github.io/prototyping/react/)</figure>
|
||||
[](https://forresto.github.io/prototyping/react/)
|
||||
|
||||
|
||||
### Ultimate Tic-Tac-Toe Game in React
|
||||
|
|
@ -55,7 +55,7 @@ Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React ver
|
|||
|
||||
Emanuele shared this awesome demo video with us:
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #18"
|
||||
author: jgebhardt
|
||||
author: [jgebhardt]
|
||||
---
|
||||
|
||||
In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.
|
||||
|
|
@ -75,7 +75,7 @@ Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [exp
|
|||
|
||||
React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
## React and Web Components
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
title: React v0.10 RC
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
[v0.9 has only been out for a month](/react/blog/2014/02/20/react-v0.9.html), but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
|
||||
[v0.9 has only been out for a month](/blog/2014/02/20/react-v0.9.html), but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
|
||||
|
||||
The release candidate is available for download from the CDN:
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ The plan for v0.11 is that we will go fully to "descriptors". Method calls on th
|
|||
|
||||
#### New Features
|
||||
* Added warnings to help migrate towards descriptors
|
||||
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
|
||||
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
|
||||
* Added support for more attributes:
|
||||
* `srcSet` for `<img>` to specify images at different pixel ratios
|
||||
* `textAnchor` for SVG
|
||||
|
|
@ -65,7 +65,7 @@ The plan for v0.11 is that we will go fully to "descriptors". Method calls on th
|
|||
|
||||
### Addons
|
||||
|
||||
* `update` function to deal with immutable data. [Read the docs](/react/docs/update.html)
|
||||
* `update` function to deal with immutable data. [Read the docs](/docs/update.html)
|
||||
|
||||
### react-tools
|
||||
* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
title: React v0.10
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Hot on the heels of the [release candidate earlier this week](/react/blog/2014/03/19/react-v0.10-rc1.html), we're ready to call v0.10 done. The only major issue we discovered had to do with the `react-tools` package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.
|
||||
Hot on the heels of the [release candidate earlier this week](/blog/2014/03/19/react-v0.10-rc1.html), we're ready to call v0.10 done. The only major issue we discovered had to do with the `react-tools` package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.
|
||||
|
||||
The release is available for download from the CDN:
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ The plan for v0.11 is that we will go fully to "descriptors". Method calls on th
|
|||
|
||||
#### New Features
|
||||
* Added warnings to help migrate towards descriptors
|
||||
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
|
||||
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
|
||||
* Added support for more attributes:
|
||||
* `srcSet` for `<img>` to specify images at different pixel ratios
|
||||
* `textAnchor` for SVG
|
||||
|
|
@ -65,7 +65,7 @@ The plan for v0.11 is that we will go fully to "descriptors". Method calls on th
|
|||
|
||||
### Addons
|
||||
|
||||
* `update` function to deal with immutable data. [Read the docs](/react/docs/update.html)
|
||||
* `update` function to deal with immutable data. [Read the docs](/docs/update.html)
|
||||
|
||||
### react-tools
|
||||
* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: The Road to 1.0
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Use React and JSX in ASP.NET MVC"
|
||||
author: Daniel15
|
||||
author: [Daniel15]
|
||||
---
|
||||
|
||||
Today we're happy to announce the initial release of
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ author: [fisherwebdev, jingc]
|
|||
|
||||
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:
|
||||
|
||||
<figure><iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
title: "One Year of Open-Source React"
|
||||
author: chenglou
|
||||
author: [chenglou]
|
||||
---
|
||||
|
||||
Today marks the one-year open-source anniversary of React.
|
||||
|
||||
It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k GitHub stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](/react/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
|
||||
It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k GitHub stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
|
||||
|
||||
Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](https://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](/react/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
|
||||
Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](https://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
|
||||
|
||||
Fast forward one year, React has strongly [grown in popularity](https://news.ycombinator.com/item?id=7489959). Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the [individual contributors](https://github.com/facebook/react/graphs/contributors) who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #19"
|
||||
author: chenglou
|
||||
author: [chenglou]
|
||||
---
|
||||
|
||||
## React Meetups!
|
||||
|
|
@ -23,11 +23,11 @@ These are some of the links that often pop up on the #reactjs IRC channel. If yo
|
|||
|
||||
The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn't have imagined something like [Bruce Hauman](http://rigsomelight.com)'s [Flappy Bird ClojureScript port](http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html), whose interactive programming has been made possible through React:
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
|
||||
|
||||
[](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)
|
||||
[](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)
|
||||
|
||||
Give us a shoutout on IRC or [React Google Groups](https://groups.google.com/forum/#!forum/reactjs) if you've used React in some Interesting places.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.11 RC
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.11
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
**Update:** We missed a few important changes in our initial post and changelog. We've updated this post with details about [Descriptors](#descriptors) and [Prop Type Validation](#prop-type-validation).
|
||||
|
|
@ -100,7 +100,7 @@ Keyboard and mouse events also now include a normalized `e.getModifierState()` t
|
|||
|
||||
## Descriptors
|
||||
|
||||
In our [v0.10 release notes](/react/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
|
||||
In our [v0.10 release notes](/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
|
||||
|
||||
Along with this change to descriptors, `React.isValidComponent` and `React.PropTypes.component` now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of `MyComponent()`, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.11.1
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Today we're releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they've begun upgrading.
|
||||
|
|
@ -11,7 +11,7 @@ There are several fixes we're including in v0.11.1 that are focused around the n
|
|||
|
||||
The final fix we're including is to better support a workaround for some IE8 behavior. The edge-case bug we're fixing was also present in v0.9 and v0.10, so while it wasn't a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.
|
||||
|
||||
We'd also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around [Descriptors](/react/blog/2014/07/17/react-v0.11.html#descriptors) and [Prop Type Validation](/react/blog/2014/07/17/react-v0.11.html#prop-type-validation).
|
||||
We'd also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around [Descriptors](/blog/2014/07/17/react-v0.11.html#descriptors) and [Prop Type Validation](/blog/2014/07/17/react-v0.11.html#prop-type-validation).
|
||||
|
||||
The release is available for download from the CDN:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #20"
|
||||
author: LoukaN
|
||||
author: [LoukaN]
|
||||
---
|
||||
|
||||
It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)
|
||||
|
|
@ -9,14 +9,14 @@ It's an exciting time for React as there are now more commits from open source c
|
|||
|
||||
[Atom, GitHub's code editor, is now using React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.
|
||||
|
||||
[<img src="/react/img/blog/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
|
||||
[<img src="../img/blog/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
|
||||
|
||||
|
||||
## Why Does React Scale?
|
||||
|
||||
At the last [JSConf.us](http://2014.jsconf.us/), Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the [annotated slides](https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014).
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Live Editing
|
||||
|
|
@ -63,7 +63,7 @@ If you missed the last [London React Meetup](http://www.meetup.com/London-React-
|
|||
- React on Rails - How to use React with Ruby on Rails to build isomorphic apps
|
||||
- Building an isomorphic, real-time to-do list with moped and node.js
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
In related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Francisco/events/195518392/) will be from Prezi: [“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”](https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135). While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ In related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Fr
|
|||
|
||||
One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write [React component adapters for KendoUI](http://www.ifandelse.com/using-reactjs-and-kendoui-together/).
|
||||
|
||||
<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="/react/img/blog/kendoui.png" /></a></figure>
|
||||
<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="../img/blog/kendoui.png" /></a></figure>
|
||||
|
||||
|
||||
## Acorn JSX
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Flux: Actions and the Dispatcher"
|
||||
author: fisherwebdev
|
||||
author: [fisherwebdev]
|
||||
---
|
||||
|
||||
Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
|
||||
|
|
@ -23,7 +23,7 @@ Different actions are identified by a type attribute. When all of the stores rec
|
|||
|
||||
Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
|
||||
|
||||
<img src="/react/img/blog/flux-diagram.png" style="width: 100%;" />
|
||||
<img src="../img/blog/flux-diagram.png" style="width: 100%;" />
|
||||
|
||||
|
||||
Why We Need a Dispatcher
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Community Round-up #21"
|
||||
author: LoukaN
|
||||
author: [LoukaN]
|
||||
---
|
||||
|
||||
## React Router
|
||||
|
|
@ -23,7 +23,7 @@ React.renderComponent((
|
|||
|
||||
Areeb Malik, from Facebook, talks about his experience using React. "On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test JavaScript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale"
|
||||
|
||||
[](https://skillsmatter.com/skillscasts/5429-going-big-with-react)
|
||||
[](https://skillsmatter.com/skillscasts/5429-going-big-with-react)
|
||||
|
||||
<!--
|
||||
<iframe allowfullscreen="" data-progress="true" frameborder="0" height="390" id="vimeo-player" mozallowfullscreen="" src="//player.vimeo.com/video/100245392?api=1&title=0" webkitallowfullscreen="" width="640"></iframe>
|
||||
|
|
@ -69,21 +69,21 @@ var App = React.createClass({
|
|||
|
||||
Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to [compile JSX with Sweet.js using Readtables](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables).
|
||||
|
||||
[](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables)
|
||||
[](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables)
|
||||
|
||||
|
||||
## First Look: Getting Started with React
|
||||
|
||||
[Kirill Buga](http://modernweb.com/authors/kirill-buga/) wrote an article on Modern Web explaining how [React is different from traditional MVC](http://modernweb.com/2014/07/23/getting-started-reactjs/) used by most JavaScript applications
|
||||
|
||||
<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="/react/img/blog/first-look.png" /></a></figure>
|
||||
<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="../img/blog/first-look.png" /></a></figure>
|
||||
|
||||
|
||||
## React Draggable
|
||||
|
||||
[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
|
||||
|
||||
[](https://mzabriskie.github.io/react-draggable/example/)
|
||||
[](https://mzabriskie.github.io/react-draggable/example/)
|
||||
|
||||
|
||||
## HTML Parser2 React
|
||||
|
|
@ -104,7 +104,7 @@ var parsedComponent = reactParser(html, React);
|
|||
|
||||
If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Random Tweets
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Introducing the JSX Specification"
|
||||
author: sebmarkbage
|
||||
author: [sebmarkbage]
|
||||
---
|
||||
|
||||
At Facebook we've been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We've also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: "Community Round-up #22"
|
||||
layout: post
|
||||
author: LoukaN
|
||||
author: [LoukaN]
|
||||
---
|
||||
|
||||
This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!
|
||||
|
|
@ -20,7 +20,7 @@ This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb a
|
|||
|
||||
[Vjeux](http://blog.vjeux.com/), 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 [annotated slides](https://speakerdeck.com/vjeux/oscon-react-architecture) or [Chris Dawson](http://thenewstack.io/author/chrisdawson/)'s notes titled [JavaScript’s History and How it Led To React](http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/).
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## v8 optimizations
|
||||
|
|
@ -48,7 +48,7 @@ var translated = (
|
|||
|
||||
[Trường](http://truongtx.me/) wrote a little guide to help your [getting started using React, Browserify and Gulp](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/).
|
||||
|
||||
<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>
|
||||
<figure><a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/"><img src="../img/blog/react-browserify-gulp.jpg" /></a></figure>
|
||||
|
||||
|
||||
## React Style
|
||||
|
|
@ -89,7 +89,7 @@ var Button = React.createClass({
|
|||
|
||||
If you are getting started with React, [Joe Maddalone](http://www.joemaddalone.com/) made a good tutorial on how to build your first component.
|
||||
|
||||
<iframe width="100%" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Saving time & staying sane?
|
||||
|
|
@ -111,4 +111,4 @@ When [Kent William Innholt](http://http://kentwilliam.com/) who works at [M>Path
|
|||
To finish this round-up, Andrew Gleave made a page that displays the [Weather](https://github.com/andrewgleave/react-weather). It's great to see that React is also used for small prototypes.
|
||||
|
||||
|
||||
<figure><a href="https://github.com/andrewgleave/react-weather"><img src="/react/img/blog/weather.png" /></a></figure>
|
||||
<figure><a href="https://github.com/andrewgleave/react-weather"><img src="../img/blog/weather.png" /></a></figure>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.11.2
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Today we're releasing React v0.11.2 to add a few small features.
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: "Testing Flux Applications"
|
||||
author: fisherwebdev
|
||||
author: [fisherwebdev]
|
||||
---
|
||||
|
||||
**A more up-to-date version of this post is available as part of the [Flux documentation](https://facebook.github.io/flux/docs/testing-flux-applications.html).**
|
||||
|
||||
[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/react/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](https://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](https://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
|
||||
[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](https://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](https://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
|
||||
|
||||
|
||||
Testing with Jest
|
||||
|
|
@ -315,7 +315,7 @@ render: function() {
|
|||
},
|
||||
```
|
||||
|
||||
To learn how to test React components themselves, check out the [Jest tutorial for React](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/react/docs/test-utils.html).
|
||||
To learn how to test React components themselves, check out the [Jest tutorial for React](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/docs/test-utils.html).
|
||||
|
||||
|
||||
Further Reading
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Introducing React Elements"
|
||||
author: sebmarkbage
|
||||
author: [sebmarkbage]
|
||||
redirect_from: "blog/2014/10/14/introducting-react-elements.html"
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.12 RC"
|
||||
author: sebmarkbage
|
||||
author: [sebmarkbage]
|
||||
---
|
||||
|
||||
We are finally ready to share the work we've been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we're shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we've highlighted the interesting and breaking changes below.
|
||||
|
|
@ -22,7 +22,7 @@ We've also published version `0.12.0-rc1` of the `react` and `react-tools` packa
|
|||
|
||||
## React Elements
|
||||
|
||||
The biggest conceptual change we made in v0.12 is the move to React Elements. [We talked about this topic in depth earlier this week](/react/blog/2014/10/14/introducting-react-elements.html). If you haven't already, you should read up on the exciting changes in there!
|
||||
The biggest conceptual change we made in v0.12 is the move to React Elements. [We talked about this topic in depth earlier this week](/blog/2014/10/14/introducting-react-elements.html). If you haven't already, you should read up on the exciting changes in there!
|
||||
|
||||
|
||||
## JSX Changes
|
||||
|
|
@ -39,7 +39,7 @@ We have wanted to do this since before we even open sourced React. No more `/**
|
|||
|
||||
### JSX for Function Calls is No Longer Supported
|
||||
|
||||
The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/react/blog/2014/10/14/introducting-react-elements.html).
|
||||
The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/blog/2014/10/14/introducting-react-elements.html).
|
||||
|
||||
The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was a convenient shortcut for many people but we believe the gains will be worth it.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: "Community Round-up #23"
|
||||
layout: post
|
||||
author: LoukaN
|
||||
author: [LoukaN]
|
||||
---
|
||||
|
||||
This round-up is a special edition on [Flux](https://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
|
||||
|
|
@ -10,7 +10,7 @@ This round-up is a special edition on [Flux](https://facebook.github.io/flux/).
|
|||
|
||||
Facebook engineers [Jing Chen](https://github.com/jingc) and [Bill Fisher](https://github.com/fisherwebdev) gave a talk about Flux and React at [ForwardJS](http://forwardjs.com/), and how using an application architecture with a unidirectional data flow helped solve recurring bugs.
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
# Yahoo
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
|
|||
[Mikael Brassman](https://spoike.ghost.io/) wrote [Reflux](https://github.com/spoike/refluxjs), a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains [the reasons why in a blog post](https://spoike.ghost.io/deconstructing-reactjss-flux/).
|
||||
|
||||
<center>
|
||||
<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
|
||||
<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="../img/blog/reflux-flux.png" width="400" /></a>
|
||||
</center>
|
||||
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
|
|||
[Kevin Dangoor](http://www.kevindangoor.com/) is converting the project tree of [Adobe's Bracket text editor](http://brackets.io/) to React and Flux. He wrote about his experience [using Flux](http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/).
|
||||
|
||||
<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>
|
||||
<a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/"><img src="../img/blog/flux-diagram.png" width="400" /></a>
|
||||
</center>
|
||||
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ undo: function() {
|
|||
[Nicola Paolucci](https://github.com/durdn) from Atlassian wrote a great guide to help your getting understand [Flux step by step](https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
|
||||
|
||||
<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>
|
||||
<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="../img/blog/flux-chart.png" width="400" /></a>
|
||||
</center>
|
||||
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ undo: function() {
|
|||
|
||||
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.
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Random Tweet
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React.js Conf
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: React v0.12
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!
|
||||
|
||||
We have talked a lot about some of the bigger changes in this release. [We introduced new terminology](/react/blog/2014/10/14/introducing-react-elements.html) and changed APIs to clean up and simplify some of the concepts of React. [We also made several changes to JSX](/react/blog/2014/10/16/react-v0.12-rc1.html) and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.
|
||||
We have talked a lot about some of the bigger changes in this release. [We introduced new terminology](/blog/2014/10/14/introducing-react-elements.html) and changed APIs to clean up and simplify some of the concepts of React. [We also made several changes to JSX](/blog/2014/10/16/react-v0.12-rc1.html) and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.
|
||||
|
||||
|
||||
The release is available for download:
|
||||
|
|
@ -23,7 +23,7 @@ We've also published version `0.12.0` of the `react` and `react-tools` packages
|
|||
|
||||
## New Terminology & Updated APIs
|
||||
|
||||
v0.12 is bringing about some new terminology. [We introduced](/react/blog/2014/10/14/introducing-react-elements.html) this 2 weeks ago and we've also documented it in [a new section of the documentation](/react/docs/glossary.html). As a part of this, we also corrected many of our top-level APIs to align with the terminology. `Component` has been removed from all of our `React.render*` methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with `render` methods in your component classes, we decided to keep the top-level functions short and sweet. `React.renderComponent` is now `React.render`.
|
||||
v0.12 is bringing about some new terminology. [We introduced](/blog/2014/10/14/introducing-react-elements.html) this 2 weeks ago and we've also documented it in [a new section of the documentation](/docs/glossary.html). As a part of this, we also corrected many of our top-level APIs to align with the terminology. `Component` has been removed from all of our `React.render*` methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with `render` methods in your component classes, we decided to keep the top-level functions short and sweet. `React.renderComponent` is now `React.render`.
|
||||
|
||||
We also corrected some other misnomers. `React.isValidComponent` actually determines if the argument is a ReactElement, so it has been renamed to `React.isValidElement`. In the same vein, `React.PropTypes.component` is now `React.PropTypes.element` and `React.PropTypes.renderable` is now `React.PropTypes.node`.
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ The old methods will still work but will warn upon first use. They will be remov
|
|||
|
||||
## JSX Changes
|
||||
|
||||
[We talked more in depth about these before](/react/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes), so here are the highlights.
|
||||
[We talked more in depth about these before](/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes), so here are the highlights.
|
||||
|
||||
* No more `/** @jsx React.DOM */`!
|
||||
* We no longer transform to a straight function call. `<Component/>` now becomes `React.createElement(Component)`
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React.js Conf Updates
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
Yesterday was the [React.js Conf](http://conf.reactjs.com/index.html) call for presenters submission deadline. We were
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: "Community Round-up #24"
|
||||
layout: post
|
||||
author: steveluscher
|
||||
author: [steveluscher]
|
||||
---
|
||||
|
||||
## Keep it Simple
|
||||
|
|
@ -14,11 +14,11 @@ Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic
|
|||
|
||||
I ([steveluscher](https://github.com/steveluscher)) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
James Pearce ([jamesgpearce](https://github.com/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.
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
## All About Isomorphism
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson
|
|||
|
||||
Jonathan Beebe ([somethingkindawierd](https://github.com/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
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
If you take a peek under the covers, you'll find that React powers [Carousel](https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/), Dropbox's new photo and video gallery app.
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ We enjoyed a cinematic/narrative experience with this React-powered, interactive
|
|||
|
||||
Spend the next 60 seconds watching Daniel Woelfel ([dwwoelfel](https://github.com/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](http://blog.circleci.com/local-state-global-concerns/) reported to him by his users.
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
## Community Components
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.12.2
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React.js Conf Diversity Scholarship
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.
|
||||
|
|
@ -11,7 +11,7 @@ I'm really excited about this and I hope you are too! The full announcement is b
|
|||
|
||||
The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!
|
||||
|
||||
Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the [website](http://conf.reactjs.com/) and [previous](/react/blog/2014/10/27/react-js-conf.html) [updates](/react/blog/2014/11/24/react-js-conf-updates.html) on our blog.
|
||||
Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the [website](http://conf.reactjs.com/) and [previous](/blog/2014/10/27/react-js-conf.html) [updates](/blog/2014/11/24/react-js-conf-updates.html) on our blog.
|
||||
|
||||
At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
|
||||
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.13.0 Beta 1
|
||||
author: sebmarkbage
|
||||
author: [sebmarkbage]
|
||||
---
|
||||
|
||||
React 0.13 has a lot of nice features but there is one particular feature that I'm really excited about. I couldn't wait for React.js Conf to start tomorrow morning.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: React.js Conf Round-up 2015
|
||||
layout: post
|
||||
author: steveluscher
|
||||
author: [steveluscher]
|
||||
---
|
||||
|
||||
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.
|
||||
|
|
@ -16,7 +16,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -100,7 +100,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -112,7 +112,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -136,7 +136,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -148,7 +148,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -160,7 +160,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
<strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -182,7 +182,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
<strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -193,7 +193,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
<strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -204,7 +204,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
<strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -215,7 +215,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
<strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -226,7 +226,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
<strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -237,7 +237,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
|||
<strong>Tom Occhino</strong>, <strong>Sophie Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&A session.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -257,7 +257,7 @@ And, in case you missed a session, you can borrow **Michael Chan’s** [drawings
|
|||
</div>
|
||||
<div class="skinny-col">
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Humbled by the React team and community. Found <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> very mindful, practical and just real.</p>— xnoɹǝʃ uɐıɹq (@brianleroux) <a href="https://twitter.com/brianleroux/status/560972130112655360">January 30, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.</p>— Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: [React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.</p>— Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>]
|
||||
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.</p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/561232290273980416">January 30, 2015</a></blockquote>
|
||||
<blockquote class="twitter-tweet" lang="en"><p>I really love the community shout outs by <a href="https://twitter.com/Vjeux">@vjeux</a> between talks at <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a>!</p>— Andrew Rota (@AndrewRota) <a href="https://twitter.com/AndrewRota/status/560927339522297856">January 29, 2015</a></blockquote>
|
||||
</div>
|
||||
|
|
@ -266,4 +266,4 @@ And, in case you missed a session, you can borrow **Michael Chan’s** [drawings
|
|||
|
||||
**All proceeds from React.js Conf 2015 were donated to the wonderful programs at [code.org](http://code.org)**. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.
|
||||
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
title: "Introducing Relay and GraphQL"
|
||||
layout: post
|
||||
author: wincent
|
||||
author: [wincent]
|
||||
---
|
||||
|
||||
## Data fetching for React applications
|
||||
|
||||
There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At [React.js Conf](http://conf.reactjs.com/) we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.
|
||||
|
||||
<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
The two projects — Relay and GraphQL — have been in use in production at Facebook for some time, and we're excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
title: "React v0.13 RC"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
date: 2015-02-24 14:00
|
||||
---
|
||||
|
||||
Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!
|
||||
|
||||
We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in [our beta announcement](/react/blog/2015/01/27/react-v0.13.0-beta-1.html). We're really excited about this! Sebastian also posted earlier this morning about [some of the other changes coming focused around ReactElement](/react/blog/2015/02/24/streamlining-react-elements.html). The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.
|
||||
We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in [our beta announcement](/blog/2015/01/27/react-v0.13.0-beta-1.html). We're really excited about this! Sebastian also posted earlier this morning about [some of the other changes coming focused around ReactElement](/blog/2015/02/24/streamlining-react-elements.html). The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.
|
||||
|
||||
|
||||
The release candidate is available for download:
|
||||
|
|
@ -39,7 +39,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
|
|||
|
||||
#### New Features
|
||||
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
|
||||
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
|
||||
* New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`)
|
||||
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` -- this means that you no longer need to use `this._pendingState`, which is now gone.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Streamlining React Elements"
|
||||
author: sebmarkbage
|
||||
author: [sebmarkbage]
|
||||
date: 2015-02-24 11:00
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.13 RC2"
|
||||
author: sebmarkbage
|
||||
author: [sebmarkbage]
|
||||
---
|
||||
|
||||
Thanks to everybody who has already been testing the release candidate. We've received some good feedback and as a result we're going to do a second release candidate. The changes are minimal. We haven't changed the behavior of any APIs we exposed in the previous release candidate. Here's a summary of the changes:
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: "Community Round-up #25"
|
||||
layout: post
|
||||
author: matthewjohnston4
|
||||
author: [matthewjohnston4]
|
||||
---
|
||||
|
||||
## React 101
|
||||
|
|
@ -12,7 +12,7 @@ Interest in React has been exploding recently, so it's a good time to explore so
|
|||
|
||||
[Formidable Labs](https://github.com/FormidableLabs) and [Seattle JS](http://www.meetup.com/seattlejs/) recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:
|
||||
|
||||
<iframe width="100%" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[AEFlash](https://github.com/aearly) writes up [some best practices and tips](http://aeflash.com/2015-02/react-tips-and-best-practices.html) to help you avoid potential pitfalls when developing with React.
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ A team from New Zealand called [Atomic](https://atomic.io/) is [building web and
|
|||
|
||||
[Polarr](https://github.com/Polarrco) have rebuilt [their browser-based photo editor](http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here) with React.
|
||||
|
||||
<center><a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here"><img src="/react/img/blog/polarr.jpg"></a></center>
|
||||
<center><a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here"><img src="../img/blog/polarr.jpg"></a></center>
|
||||
|
||||
## It's F8!
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: "React v0.13"
|
||||
author: sophiebits
|
||||
author: [sophiebits]
|
||||
---
|
||||
|
||||
Today, we're happy to release React v0.13!
|
||||
|
||||
The most notable new feature is [support for ES6 classes](/react/blog/2015/01/27/react-v0.13.0-beta-1.html), which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace `React.createClass` completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate `React.createClass`.
|
||||
The most notable new feature is [support for ES6 classes](/blog/2015/01/27/react-v0.13.0-beta-1.html), which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace `React.createClass` completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate `React.createClass`.
|
||||
|
||||
At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We've always thought that performance isn't the most important reason to choose React, but we're still planning more optimizations to **make React even faster**.
|
||||
|
||||
|
|
@ -45,9 +45,9 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
|
|||
|
||||
#### New Features
|
||||
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
|
||||
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
|
||||
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
|
||||
* Support for iterators and immutable-js sequences as children.
|
||||
|
|
@ -62,7 +62,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
|
|||
|
||||
#### New Features
|
||||
|
||||
* [`React.addons.createFragment` was added](/react/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
* [`React.addons.createFragment` was added](/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
|
||||
#### Deprecations
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.13.1"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
title: "Building The Facebook News Feed With Relay"
|
||||
author: josephsavona
|
||||
author: [josephsavona]
|
||||
---
|
||||
|
||||
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/v/9sc8Pyc51uU).
|
||||
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/v/9sc8Pyc51uU).
|
||||
|
||||
We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ We're working hard to prepare GraphQL and Relay for public release. In the meant
|
|||
|
||||
The diagram below shows the main parts of the Relay architecture on the client and the server:
|
||||
|
||||
<img src="/react/img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" />
|
||||
<img src="../img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" />
|
||||
|
||||
The main pieces are as follows:
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ This post will focus on **Relay components** that describe encapsulated units of
|
|||
|
||||
To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a `<NewsFeed>` that renders a list of `<Story>` items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:
|
||||
|
||||
<img src="/react/img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" />
|
||||
<img src="../img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" />
|
||||
|
||||
<br/>
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ export default Relay.createContainer(Story, {
|
|||
|
||||
Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
|
||||
|
||||
<img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
|
||||
<img src="../img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
|
||||
|
||||
Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a fragment is defined. In this case we'll add a GraphQL fragment for `story`:
|
||||
|
||||
|
|
@ -122,7 +122,7 @@ Relay guarantees that all data required to render a component will be available
|
|||
|
||||
The diagram below shows how Relay containers make data available to our React components:
|
||||
|
||||
<img src="/react/img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" />
|
||||
<img src="../img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" />
|
||||
|
||||
<br/>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Introducing React Native"
|
||||
author: sophiebits
|
||||
author: [sophiebits]
|
||||
---
|
||||
|
||||
In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We're happy to announce that we're open-sourcing React Native and you can start building your apps with it today.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: "Community Round-up #26"
|
||||
layout: post
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!
|
||||
|
|
@ -13,16 +13,14 @@ We open sourced React Native last week and the community reception blew away all
|
|||
|
||||
**Give us 6 months**. At Facebook, we strive to only open-source projects that we are using in production. While the Android backend for React Native is starting to work (see video below at 37min), it hasn't been shipped to any users yet. There's a lot of work that goes into open-sourcing a project, and we want to do it right so that you have a great experience when using it.
|
||||
|
||||
<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Ray Wenderlich - Property Finder
|
||||
|
||||
If you are getting started with React Native, you should absolutely [use this tutorial](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript) from Colin Eberhardt. It goes through all the steps to make a reasonably complete app.
|
||||
|
||||
<center>
|
||||
[](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript)
|
||||
</center>
|
||||
[](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript)
|
||||
|
||||
Colin also [blogged about his experience using React Native](http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html) for a few weeks and gives his thoughts on why you would or wouldn't use it.
|
||||
|
||||
|
|
@ -38,27 +36,21 @@ Spencer Ahrens and I had the great pleasure to talk about React Native on [The C
|
|||
|
||||
Less than 24 hours after React Native was open sourced, Simarpreet Singh built an [Hacker News reader app from scratch](https://github.com/iSimar/HackerNews-React-Native). It's unbelievable how fast he was able to pull it off!
|
||||
|
||||
<center>
|
||||
[](https://github.com/iSimar/HackerNews-React-Native)
|
||||
</center>
|
||||
[](https://github.com/iSimar/HackerNews-React-Native)
|
||||
|
||||
|
||||
## Parse + React
|
||||
|
||||
There's a huge ecosystem of JavaScript modules on npm and React Native was designed to work well with the ones that don't have DOM dependencies. Parse is a great example; you can `npm install parse` on your React Native project and it'll work as is. :) We still have [a](https://github.com/facebook/react-native/issues/406) [few](https://github.com/facebook/react-native/issues/370) [issues](https://github.com/facebook/react-native/issues/316) to solve; please create an issue if your favorite library doesn't work out of the box.
|
||||
|
||||
<center>
|
||||
[](http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/)
|
||||
</center>
|
||||
[](http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/)
|
||||
|
||||
|
||||
## tcomb-form-native
|
||||
|
||||
Giulio Canti is the author of the [tcomb-form library](https://github.com/gcanti/tcomb-form) for React. He already [ported it to React Native](https://github.com/gcanti/tcomb-form-native) and it looks great!
|
||||
|
||||
<center>
|
||||
[](https://github.com/gcanti/tcomb-form-native)
|
||||
</center>
|
||||
[](https://github.com/gcanti/tcomb-form-native)
|
||||
|
||||
|
||||
## Facebook Login with React Native
|
||||
|
|
@ -70,9 +62,7 @@ One of the reason we built React Native is to be able to use all the libraries i
|
|||
|
||||
Jay Garcia spent a lot of time during the beta working on a NES music player with React Native. He wrote a blog post to share his experience and explains some code snippets.
|
||||
|
||||
<center>
|
||||
[](http://moduscreate.com/react-native-has-landed/)
|
||||
</center>
|
||||
[](http://moduscreate.com/react-native-has-landed/)
|
||||
|
||||
|
||||
## React Native with Babel and webpack
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: "React Native v0.4"
|
||||
layout: post
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
It's been three weeks since we open sourced React Native and there's been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus [35 plugins](http://react.parts/native-ios) and [1 app in the app store](http://herman.asia/building-a-flashcard-app-with-react-native)! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
title: "React v0.13.2"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Yesterday the [React Native team shipped v0.4](/react/blog/2015/04/17/react-native-v0.4.html). 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.
|
||||
Yesterday the [React Native team shipped v0.4](/blog/2015/04/17/react-native-v0.4.html). 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.
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "GraphQL Introduction"
|
||||
author: schrockn
|
||||
author: [schrockn]
|
||||
---
|
||||
|
||||
At the React.js conference in late January 2015, we revealed our next major technology in the React family: [Relay](http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html).
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.13.3"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Today we're sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: `context`. We also improved developer ergonomics just a little bit, making some warnings better.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React Native Release Process"
|
||||
author: vjeux
|
||||
author: [vjeux]
|
||||
---
|
||||
|
||||
The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to *move fast with stable infra*, we are introducing a real release process with a two-week release schedule.
|
||||
|
|
@ -19,4 +19,4 @@ You now have three ways to get React Native. You should chose the one you want b
|
|||
|
||||
If you want more details, I highly recommend this video that explains how Facebook mobile release process works and why it was setup this way.
|
||||
|
||||
<iframe width="100%" height="300" src="https://www.youtube.com/embed/mOyoTUETmSM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="300" src="https://www.youtube.com/embed/mOyoTUETmSM" frameborder="0" allowfullscreen></iframe>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Deprecating JSTransform and react-tools"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
Today we're announcing the deprecation of react-tools and JSTransform.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React v0.14 Beta 1
|
||||
author: sophiebits
|
||||
author: [sophiebits]
|
||||
---
|
||||
|
||||
This week, many people in the React community are at [ReactEurope](https://www.react-europe.org/) 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.
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
title: "New React Devtools Beta"
|
||||
author: jaredly
|
||||
author: [jaredly]
|
||||
---
|
||||
|
||||
We've made an entirely new version of the devtools, and we want you to try it
|
||||
out!
|
||||
|
||||
|
||||
|
||||
|
||||
## Why entirely new?
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ Yeah!
|
|||
|
||||
### The Tree View
|
||||
|
||||
|
||||
|
||||
|
||||
- Much richer view of your props, including the contents of objects and arrays
|
||||
- Custom components are emphasized, native components are de-emphasized
|
||||
|
|
@ -52,14 +52,14 @@ Yeah!
|
|||
Select the search bar (or press "/"), and start searching for a component by
|
||||
name.
|
||||
|
||||
|
||||
|
||||
|
||||
### The Side Pane
|
||||
|
||||
- Now shows the `context` for a component
|
||||
- Right-click to store a prop/state value as a global variable
|
||||
|
||||
|
||||
|
||||
|
||||
## How do I install it?
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Relay Technical Preview"
|
||||
author: josephsavona
|
||||
author: [josephsavona]
|
||||
---
|
||||
|
||||
# Relay
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
---
|
||||
title: "ReactEurope Round-up"
|
||||
layout: post
|
||||
author: matthewjohnston4
|
||||
author: [matthewjohnston4]
|
||||
---
|
||||
|
||||
Last month, the first React.js European conference took place in the city of Paris, at ReactEurope. Attendees were treated to a range of talks covering React, React Native, Flux, Relay, and GraphQL. Big thanks to everyone involved with organizing the conference, to all the attendees, and everyone who gave their time to speak - it wouldn't have been possible without the help and support of the React community.
|
||||
|
||||
[Christopher Chedeau](https://github.com/vjeux) gave the opening keynote to the conference:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/PAA9O4E1IM4" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/PAA9O4E1IM4" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Spencer Ahrens](https://github.com/sahrens) walks through building an advanced gestural UI leveraging the unique power of the React Native layout and animation systems to build a complex and fluid experience:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/xDlfrcM6YBk" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/xDlfrcM6YBk" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Lee Byron](https://github.com/leebyron) explores GraphQL, its core principles, how it works, and what makes it a powerful tool:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/WQLzZf34FJ8" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/WQLzZf34FJ8" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Joseph Savona](https://github.com/josephsavona) explores the problems Relay solves, its architecture and the query lifecycle, and how can you use Relay to build more scalable apps. There are examples of how Relay powers applications as complex as the Facebook News Feed:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/IrgHurBjQbg" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/IrgHurBjQbg" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Nick Schrock](https://github.com/schrockn) and [Dan Schafer](https://github.com/dschafer) take a deeper dive into putting GraphQL to work. How can we build a GraphQL API to work with an existing REST API or server-side data model? What are best practices when building a GraphQL API, and how do they differ from traditional REST best practices? How does Facebook use GraphQL? Most importantly, what does a complete and coherent GraphQL API looks like, and how can we get started building one?
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/gY48GW87Feo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/gY48GW87Feo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Sebastian Markbåge](https://github.com/sebmarkbage) talks about why the DOM is flawed and how it is becoming a second-class citizen in the land of React apps:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/Zemce4Y1Y-A" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/Zemce4Y1Y-A" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Sebastian McKenzie](https://github.com/sebmck) goes over how existing JSX build pipeline infrastructure can be further utilised to perform even more significant code transformations such as transpilation, optimisation, profiling and more, reducing bugs, making your code faster and you as a developer more productive and happy:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/OFuDvqZmUrE" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/OFuDvqZmUrE" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Cheng Lou](https://github.com/chenglou) gives a talk on the past, the present and the future of animation, and the place React can potentially take in this:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/1tavDv5hXpo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/1tavDv5hXpo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
And there was a Q&A session with the whole team covering a range of React topics:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/CRJZBZ_-6hQ" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/CRJZBZ_-6hQ" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
And there were lots of great talks from the React community:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
title: "New React Developer Tools"
|
||||
layout: post
|
||||
author: sophiebits
|
||||
author: [sophiebits]
|
||||
---
|
||||
|
||||
A month ago, we [posted a beta](/react/blog/2015/08/03/new-react-devtools-beta.html) of the new React developer tools. Today, we're releasing the first stable version of the new devtools. We're calling it version 0.14, but it's a full rewrite so we think of it more like a 2.0 release.
|
||||
A month ago, we [posted a beta](/blog/2015/08/03/new-react-devtools-beta.html) of the new React developer tools. Today, we're releasing the first stable version of the new devtools. We're calling it version 0.14, but it's a full rewrite so we think of it more like a 2.0 release.
|
||||
|
||||
|
||||
|
||||
|
||||
It contains a handful of new features, including:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
title: "React v0.14 Release Candidate"
|
||||
author: sophiebits
|
||||
author: [sophiebits]
|
||||
---
|
||||
|
||||
We’re happy to announce our first release candidate for React 0.14! We gave you a [sneak peek in July](/react/blog/2015/07/03/react-v0.14-beta-1.html) 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.
|
||||
We’re happy to announce our first release candidate for React 0.14! We gave you a [sneak peek in July](/blog/2015/07/03/react-v0.14-beta-1.html) 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.
|
||||
|
||||
Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ These builds are also available in the `react` package on bower.
|
|||
|
||||
- #### Deprecation of react-tools
|
||||
|
||||
The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
|
||||
- #### Compiler optimizations
|
||||
|
||||
|
|
@ -124,8 +124,8 @@ As always, we have a few breaking changes in this release. Whenever we make larg
|
|||
|
||||
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:
|
||||
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/react/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/react/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
|
||||
|
||||
And these two changes did not warn in 0.13 but should be easy to find and clean up:
|
||||
|
|
@ -140,9 +140,9 @@ And these two changes did not warn in 0.13 but should be easy to find and clean
|
|||
If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically.
|
||||
|
||||
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/react/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
|
||||
|
||||
### Notable enhancements
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
title: "Community Round-up #27 – Relay Edition"
|
||||
title: "Community Round-up #27 – Relay Edition"
|
||||
layout: post
|
||||
author: steveluscher
|
||||
author: [steveluscher]
|
||||
---
|
||||
|
||||
In the weeks following the [open-source release](/react/blog/2015/08/11/relay-technical-preview.html) of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let's take a look at some of the things we've achieved, together!
|
||||
In the weeks following the [open-source release](/blog/2015/08/11/relay-technical-preview.html) of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let's take a look at some of the things we've achieved, together!
|
||||
|
||||
## Teaching servers to speak GraphQL
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ Joe McBride ([joemcbride](https://github.com/joemcbride)) has an up-and-running
|
|||
Interact with this [visual tour of Relay's architecture](http://sgwilym.github.io/relay-visual-learners/) by Sam Gwilym ([sgwilym](https://github.com/sgwilym)).
|
||||
|
||||
<a href="http://sgwilym.github.io/relay-visual-learners/">
|
||||
<img src="/react/img/blog/relay-visual-architecture-tour.png" alt="Relay for visual learners" style="max-width:100%">
|
||||
<img src="../img/blog/relay-visual-architecture-tour.png" alt="Relay for visual learners" style="max-width:100%">
|
||||
</a>
|
||||
|
||||
Sam has already launched a product that leverages Relay's data-fetching, optimistic responses, pagination, and mutations – all atop a Ruby GraphQL server: [new.comique.co](http://new.comique.co/)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.14"
|
||||
author: sophiebits
|
||||
author: [sophiebits]
|
||||
---
|
||||
|
||||
We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.
|
||||
|
|
@ -131,7 +131,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
|
|||
|
||||
- #### Deprecation of react-tools
|
||||
|
||||
The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
|
||||
- #### Compiler optimizations
|
||||
|
||||
|
|
@ -151,8 +151,8 @@ In almost all cases, we change our APIs gradually and warn for at least one rele
|
|||
|
||||
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:
|
||||
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/react/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/react/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
|
||||
|
||||
### New deprecations, introduced with a warning
|
||||
|
|
@ -164,9 +164,9 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) to change your code automatically.
|
||||
|
||||
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/react/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
|
||||
|
||||
### Notable enhancements
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "Reactiflux is moving to Discord"
|
||||
author: benigeri
|
||||
author: [benigeri]
|
||||
---
|
||||
|
||||
TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: [http://join.reactiflux.com](http://join.reactiflux.com/)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.14.1"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
After a couple weeks of having more people use v0.14, we're ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.14.2"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the `react-dom` package, we moved `react` from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using `react` as a peer dependency.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React v0.14.3"
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
It's time for another installment of React patch releases! We didn't break anything in v0.14.2 but we do have a couple of other bugs we're fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it's still valuable to support. So we're now building `react-dom-server.js`, which will be shipped to Bower and in the `dist/` directory of the `react-dom` package on npm. This file works the same way as `react-dom.js` and therefore requires that the primary React build has already been included on the page.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: React.js Conf 2016 Diversity Scholarship
|
||||
author: zpao
|
||||
author: [zpao]
|
||||
---
|
||||
|
||||
I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it's important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "isMounted is an Antipattern"
|
||||
author: jimfb
|
||||
author: [jimfb]
|
||||
---
|
||||
|
||||
As we move closer to officially deprecating isMounted, it's worth understanding why the function is an antipattern, and how to write code without the isMounted function.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: "React Components, Elements, and Instances"
|
||||
author: gaearon
|
||||
author: [gaearon]
|
||||
---
|
||||
|
||||
The difference between **components, their instances, and elements** confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?
|
||||
|
|
@ -350,13 +350,13 @@ React will ask the `Form` component what element tree it returns, given those `p
|
|||
}
|
||||
```
|
||||
|
||||
This is a part of the process that React calls [reconciliation](/react/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/react/docs/top-level-api.html#reactdom.render) or [`setState()`](/react/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
|
||||
This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
|
||||
|
||||
This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/react/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
|
||||
This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
|
||||
|
||||
You might have noticed that this blog entry talks a lot about components and elements, and not so much about the instances. The truth is, instances have much less importance in React than in most object-oriented UI frameworks.
|
||||
|
||||
Only components declared as classes have instances, and you never create them directly: React does that for you. While [mechanisms for a parent component instance to access a child component instance](/react/docs/more-about-refs.html) exist, they are only used for imperative actions (such as setting focus on a field), and should generally be avoided.
|
||||
Only components declared as classes have instances, and you never create them directly: React does that for you. While [mechanisms for a parent component instance to access a child component instance](/docs/more-about-refs.html) exist, they are only used for imperative actions (such as setting focus on a field), and should generally be avoided.
|
||||
|
||||
React takes care of creating an instance for every class component, so you can write components in an object-oriented way with methods and local state, but other than that, instances are not very important in the React’s programming model and are managed by React itself.
|
||||
|
||||
|
|
@ -368,16 +368,16 @@ A *component* can be declared in several different ways. It can be a class with
|
|||
|
||||
When a component receives some props as an input, it is because a particular parent component returned an element with its `type` and these props. This is why people say that the props flows one way in React: from parents to children.
|
||||
|
||||
An *instance* is what you refer to as `this` in the component class you write. It is useful for [storing local state and reacting to the lifecycle events](/react/docs/component-api.html).
|
||||
An *instance* is what you refer to as `this` in the component class you write. It is useful for [storing local state and reacting to the lifecycle events](/docs/component-api.html).
|
||||
|
||||
Functional components don’t have instances at all. Class components have instances, but you never need to create a component instance directly—React takes care of this.
|
||||
|
||||
Finally, to create elements, use [`React.createElement()`](/react/docs/top-level-api.html#react.createelement), [JSX](/react/docs/jsx-in-depth.html), or an [element factory helper](/react/docs/top-level-api.html#react.createfactory). Don’t write elements as plain objects in the real code—just know that they are plain objects under the hood.
|
||||
Finally, to create elements, use [`React.createElement()`](/docs/top-level-api.html#react.createelement), [JSX](/docs/jsx-in-depth.html), or an [element factory helper](/docs/top-level-api.html#react.createfactory). Don’t write elements as plain objects in the real code—just know that they are plain objects under the hood.
|
||||
|
||||
## Further Reading
|
||||
|
||||
* [Introducing React Elements](/react/blog/2014/10/14/introducing-react-elements.html)
|
||||
* [Streamlining React Elements](/react/blog/2015/02/24/streamlining-react-elements.html)
|
||||
* [React (Virtual) DOM Terminology](/react/docs/glossary.html)
|
||||
* [Introducing React Elements](/blog/2014/10/14/introducing-react-elements.html)
|
||||
* [Streamlining React Elements](/blog/2015/02/24/streamlining-react-elements.html)
|
||||
* [React (Virtual) DOM Terminology](/docs/glossary.html)
|
||||
|
||||
[^1]: All React elements require an additional ``$$typeof: Symbol.for('react.element')`` field declared on the object for [security reasons](https://github.com/facebook/react/pull/4832). It is omitted in the examples above. This blog entry uses inline objects for elements to give you an idea of what’s happening underneath but the code won’t run as is unless you either add `$$typeof` to the elements, or change the code to use `React.createElement()` or JSX.
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue