SSL/TLSize all the things! (convert http:// to https:// where appropriate)
Update links to use https:// where it is supported. There's probably a lot more that could be fixed, but these are the core ones I found (especially the download links in order to prevent MITM attacks). Note that there are some fb.me links that will redirect to http:// even while accessed over https://, but this seemed like the best way to fix those for now. NOTE: Only non-third-party files were modified. There are references to http:// URLs in vendored/third-party files, but seems appropriate to fix upstream for those rather than editing the files. Also, copy one image locally to the blog, as it was hotlinking to a site that did not support https://. Last, use youtube-nocookie.com instead of youtube.com for video embeds, as the former doesn't try to set a cookie on load (privacy enhancement).
Reed Loden committed
Apr 18, 2015 at 15:41 UTC
3e8951e8c7dcb44035c8524c0fd82967652d41dd
141 files changed
+428
-428
CHANGELOG.md
+8
-8
@@ -68,7 +68,7 @@
68
69
#### New Features
70
71
-* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
71
+* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
72
* 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.
73
* 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.
74
* 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`).
@@ -304,7 +304,7 @@
304
305
#### New Features
306
* Added warnings to help migrate towards descriptors
307
-* 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`](http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
307
+* 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`](https://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
308
* Added support for more attributes:
309
* `srcSet` for `<img>` to specify images at different pixel ratios
310
* `textAnchor` for SVG
@@ -316,7 +316,7 @@
316
317
### Addons
318
319
-* `update` function to deal with immutable data. [Read the docs](http://facebook.github.io/react/docs/update.html)
319
+* `update` function to deal with immutable data. [Read the docs](https://facebook.github.io/react/docs/update.html)
320
321
### react-tools
322
* 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).
@@ -478,7 +478,7 @@
478
479
### React with Addons (New!)
480
481
-* 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](http://facebook.github.io/react/docs/addons.html).
481
+* 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](https://facebook.github.io/react/docs/addons.html).
482
483
### JSX
484
@@ -511,10 +511,10 @@
511
* 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.
512
* Support for more DOM elements and attributes (e.g., `<canvas>`)
513
* 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.
514
-* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
515
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
516
-* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
517
-* 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...](http://facebook.github.io/react/docs/forms.html)
514
+* `prop` improvements: validation and default values. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
515
+* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://facebook.github.io/react/docs/multiple-components.html)
516
+* Removed `React.autoBind`. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
517
+* 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...](https://facebook.github.io/react/docs/forms.html)
518
* We've implemented an improved synthetic event system that conforms to the W3C spec.
519
* 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 it's 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.
520
CONTRIBUTING.md
+3
-3
@@ -1,6 +1,6 @@
1
# Contributing to React
2
3
-React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
3
+React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://www.facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
4
5
## Our Development Process
6
@@ -45,8 +45,8 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
45
46
## How to Get in Touch
47
48
-* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
49
-* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)
48
+* IRC - [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
49
+* Mailing list - [reactjs on Google Groups](https://groups.google.com/group/reactjs)
50
51
## Style Guide
52
README.md
+8
-8
@@ -1,18 +1,18 @@
1
-# [React](http://facebook.github.io/react) [](https://travis-ci.org/facebook/react)
1
+# [React](https://facebook.github.io/react) [](https://travis-ci.org/facebook/react)
2
3
React is a JavaScript library for building user interfaces.
4
5
* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
6
-* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](http://facebook.github.io/react-native/).
6
+* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](https://facebook.github.io/react-native/).
7
* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
8
9
**NEW**! Check out our newest project [React Native](https://github.com/facebook/react-native), which uses React and JavaScript to create native mobile apps.
10
11
-[Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html).
11
+[Learn how to use React in your own project.](https://facebook.github.io/react/docs/getting-started.html).
12
13
## Examples
14
15
-We have several examples [on the website](http://facebook.github.io/react/). Here is the first one to get you started:
15
+We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started:
16
17
```js
18
var HelloMessage = React.createClass({
@@ -29,7 +29,7 @@ React.render(
29
30
This example will render "Hello John" into a container on the page.
31
32
-You'll notice that we used an HTML-like syntax; [we call it JSX](http://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
32
+You'll notice that we used an HTML-like syntax; [we call it JSX](https://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
33
34
## Installation
35
@@ -37,12 +37,12 @@ The fastest way to get started is to serve JavaScript from the CDN (also availab
37
38
```html
39
<!-- The core React library -->
40
-<script src="http://fb.me/react-0.13.2.js"></script>
40
+<script src="https://fb.me/react-0.13.2.js"></script>
41
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
42
-<script src="http://fb.me/JSXTransformer-0.13.2.js"></script>
42
+<script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
43
```
44
45
-We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.13.2.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
45
+We've also built a [starter kit](https://facebook.github.io/react/downloads/react-0.13.2.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
46
47
If you'd like to use [bower](http://bower.io), it's as easy as:
48
docs/_config.yml
+1
-1
@@ -1,7 +1,7 @@
1
---
2
name: React
3
description: A JavaScript library for building user interfaces
4
-url: http://facebook.github.io
4
+url: https://facebook.github.io
5
baseurl: "/react"
6
permalink: "/blog/:year/:month/:day/:title.html"
7
paginate_path: "/blog/page:num/"
docs/_data/nav_docs.yml
+2
-2
@@ -91,7 +91,7 @@
91
items:
92
- id: flux-overview
93
title: Flux Overview
94
- href: http://facebook.github.io/flux/docs/overview.html
94
+ href: https://facebook.github.io/flux/docs/overview.html
95
- id: flux-todo-list
96
title: Flux TodoMVC Tutorial
97
- href: http://facebook.github.io/flux/docs/todo-list.html
97
+ href: https://facebook.github.io/flux/docs/todo-list.html
docs/_layouts/default.html
+3
-3
@@ -8,8 +8,8 @@
8
<meta name="viewport" content="width=device-width">
9
<meta property="og:title" content="{{ page.title }} | React">
10
<meta property="og:type" content="website">
11
- <meta property="og:url" content="http://facebook.github.io/react{{ page.url }}">
12
- <meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
11
+ <meta property="og:url" content="https://facebook.github.io/react{{ page.url }}">
12
+ <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
13
<meta property="og:description" content="A JavaScript library for building user interfaces">
14
<meta property="fb:app_id" content="623268441017527">
15
@@ -53,7 +53,7 @@
53
54
<ul class="nav-site nav-site-external">
55
<li><a href="https://github.com/facebook/react">GitHub</a>
56
- <li><a href="http://facebook.github.io/react-native/">React Native</a>
56
+ <li><a href="https://facebook.github.io/react-native/">React Native</a>
57
</ul>
58
</div>
59
</div>
docs/_posts/2013-06-02-jsfiddle-integration.md
+1
-1
@@ -3,7 +3,7 @@ title: JSFiddle Integration
3
author: Christopher Chedeau
4
---
5
6
-[JSFiddle](http://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.
6
+[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](https://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](https://jsfiddle.net/vjeux/VkebS/) is also available.
7
8
9
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>— JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
docs/_posts/2013-06-05-why-react.md
+3
-3
@@ -40,7 +40,7 @@ React really shines when your data changes over time.
40
In a traditional JavaScript application, you need to look at what data changed
41
and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
42
which provides a declarative interface via directives and data binding [requires
43
-a linking function to manually update DOM nodes](http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
43
+a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
44
45
React takes a different approach.
46
@@ -56,7 +56,7 @@ to the DOM.
56
> lightweight description of what the DOM should look like.
57
58
We call this process **reconciliation**. Check out
59
-[this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of
59
+[this jsFiddle](https://jsfiddle.net/fv6RD/3/) to see an example of
60
reconciliation in action.
61
62
Because this re-render is so fast (around 1ms for TodoMVC), the developer
@@ -74,7 +74,7 @@ some pretty cool things with it:
74
- We've built internal prototypes that run React apps in a web worker and use
75
React to drive **native iOS views** via an Objective-C bridge.
76
- You can run React
77
- [on the server](http://github.com/petehunt/react-server-rendering-example)
77
+ [on the server](https://github.com/petehunt/react-server-rendering-example)
78
for SEO, performance, code sharing and overall flexibility.
79
- Events behave in a consistent, standards-compliant way in all browsers
80
(including IE8) and automatically use
docs/_posts/2013-06-12-community-roundup.md
+2
-2
@@ -38,10 +38,10 @@ It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of
38
39
## Origins of React
40
41
-[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
41
+[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:
42
43
> 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.
44
>
45
> React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.
46
>
47
-> [Read the full post...](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)
47
+> [Read the full post...](https://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)
docs/_posts/2013-06-19-community-roundup-2.md
+9
-9
@@ -21,12 +21,12 @@ Since the launch we have received a lot of feedback and are actively working on
21
22
## React and Socket.IO Chat Application
23
24
-[Danial Khosravi](http://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
24
+[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
25
26
> 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.
27
-> <figure>[](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
27
+> <figure>[](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
28
>
29
-> [Read the full post...](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
29
+> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
30
31
## React and Other Frameworks
32
@@ -36,9 +36,9 @@ Since the launch we have received a lot of feedback and are actively working on
36
>
37
> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
38
>
39
-> [Read the full post...](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
39
+> [Read the full post...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
40
41
-In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
41
+In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](https://jsfiddle.net/vla/Cdrse/).
42
43
## Web Components: React & x-tags
44
@@ -64,7 +64,7 @@ Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.v
64
65
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:
66
67
- - [Whitespace removal](http://facebook.github.io/react/docs/jsx-is-not-html.html)
68
- - [HTML Entities](http://facebook.github.io/react/docs/jsx-is-not-html.html)
69
- - [Comments](http://facebook.github.io/react/docs/jsx-is-not-html.html)
70
- - [Custom HTML Attributes](http://facebook.github.io/react/docs/jsx-is-not-html.html)
67
+ - [Whitespace removal](/react/docs/jsx-is-not-html.html)
68
+ - [HTML Entities](/react/docs/jsx-is-not-html.html)
69
+ - [Comments](/react/docs/jsx-is-not-html.html)
70
+ - [Custom HTML Attributes](/react/docs/jsx-is-not-html.html)
docs/_posts/2013-06-27-community-roundup-3.md
+2
-2
@@ -7,7 +7,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
7
8
## Moving From Backbone To React
9
10
-[Clay Allsopp](http://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
10
+[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.
11
12
> [<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.
13
>
@@ -19,7 +19,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
19
20
## Grunt Task for JSX
21
22
-[Eric Clemmons](http://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
22
+[Eric Clemmons](https://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
23
24
> Grunt task for compiling Facebook React's .jsx templates into .js
25
>
docs/_posts/2013-07-02-react-v0-4-autobind-by-default.md
+1
-1
@@ -8,7 +8,7 @@ React v0.4 is very close to completion. As we finish it off, we'd like to share
8
9
## What is React.autoBind?
10
11
-If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](http://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
11
+If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](https://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
12
13
Before we launched React, we would write this:
14
docs/_posts/2013-07-03-community-roundup-4.md
+5
-5
@@ -26,12 +26,12 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
26
27
> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk)
28
>
29
-> * [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
29
+> * [JSFiddle](https://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
30
>
31
> [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo)
32
>
33
-> * [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
34
-> * [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
33
+> * [JSFiddle](https://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
34
+> * [JSFiddle](https://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
35
>
36
> [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4)
37
>
@@ -41,7 +41,7 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
41
>
42
> [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4)
43
>
44
-> * [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
44
+> * [JSFiddle](https://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
45
46
## Introduction to React Screencast
47
@@ -54,4 +54,4 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
54
[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
55
56
> [Check the source on Github](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
57
-> <figure>[](http://tomocchino.github.io/react-snake/)</figure>
57
+> <figure>[](https://tomocchino.github.io/react-snake/)</figure>
docs/_posts/2013-07-17-react-v0-4-0.md
+5
-5
@@ -6,7 +6,7 @@ author: Paul O'Shannessy
6
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!
7
8
9
-This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](http://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
9
+This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](https://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
10
11
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.
12
@@ -18,10 +18,10 @@ When you're ready, [go download it](/react/downloads.html)!
18
* 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.
19
* Support for more DOM elements and attributes (e.g., `<canvas>`)
20
* 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.
21
-* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
22
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
23
-* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
24
-* 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...](http://facebook.github.io/react/docs/forms.html)
21
+* `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)
22
+* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/react/docs/multiple-components.html)
23
+* Removed `React.autoBind`. [Read our blog post for details...](/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
24
+* 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)
25
* We've implemented an improved synthetic event system that conforms to the W3C spec.
26
* 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.
27
docs/_posts/2013-07-23-community-roundup-5.md
+2
-2
@@ -52,7 +52,7 @@ Learning a new library is always easier when you have working examples you can p
52
53
## React Chosen Wrapper
54
55
-[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](http://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
55
+[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](https://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
56
57
```javascript
58
React.renderComponent(
@@ -75,7 +75,7 @@ React.renderComponent(
75
76
[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.
77
78
-<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
78
+<figure><iframe width="650" height="400" src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
79
80
81
## Docs
docs/_posts/2013-08-05-community-roundup-6.md
+1
-1
@@ -54,7 +54,7 @@ este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.
54
55
## React Stylus Boilerplate
56
57
-[Zaim Bakar](http://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
57
+[Zaim Bakar](https://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
58
59
> This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.
60
>
docs/_posts/2013-08-26-community-roundup-7.md
+1
-1
@@ -10,7 +10,7 @@ It's been three months since we open sourced React and it is going well. Some st
10
* [226 posts on Google Group](https://groups.google.com/forum/#!forum/reactjs)
11
* [76 Github projects using React](https://gist.github.com/vjeux/6335762)
12
* [30 contributors](https://github.com/facebook/react/graphs/contributors)
13
-* [15 blog posts](http://facebook.github.io/react/blog/)
13
+* [15 blog posts](/react/blog/)
14
* 2 early adopters: [Khan Academy](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)
15
16
docs/_posts/2013-11-05-thinking-in-react.md
+3
-3
@@ -30,7 +30,7 @@ Our JSON API returns some data that looks like this:
30
31
The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
32
33
-But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](http://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
33
+But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
34
35
Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same *information architecture* which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
36
@@ -66,11 +66,11 @@ You can build top-down or bottom-up. That is, you can either start with building
66
67
At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `renderComponent()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.
68
69
-Simply refer to the [React docs](http://facebook.github.io/react/docs/) if you need help executing this step.
69
+Simply refer to the [React docs](/react/docs/) if you need help executing this step.
70
71
### A brief interlude: props vs state
72
73
-There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
73
+There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
74
75
## Step 3: Identify the minimal (but complete) representation of UI state
76
docs/_posts/2013-11-06-community-roundup-10.md
+1
-1
@@ -26,7 +26,7 @@ The best part is that no drastic changes have been required to support all those
26
27
[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
28
29
-<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
29
+<figure><iframe width="600" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
30
31
32
## Server-side React with PHP
docs/_posts/2013-11-18-community-roundup-11.md
+15
-15
@@ -9,25 +9,25 @@ This round-up is the proof that React has taken off from its Facebook's root: it
9
10
[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.
11
12
-<figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
12
+<figure><iframe width="600" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
13
14
15
## React Tips
16
17
-[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](http://facebook.github.io/react/tips/introduction.html)!
17
+[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)!
18
19
-- [Inline Styles](http://facebook.github.io/react/tips/inline-styles.html)
20
-- [If-Else in JSX](http://facebook.github.io/react/tips/if-else-in-JSX.html)
21
-- [Self-Closing Tag](http://facebook.github.io/react/tips/self-closing-tag.html)
22
-- [Maximum Number of JSX Root Nodes](http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html)
23
-- [Shorthand for Specifying Pixel Values in style props](http://facebook.github.io/react/tips/style-props-value-px.html)
24
-- [Type of the Children props](http://facebook.github.io/react/tips/children-props-type.html)
25
-- [Value of null for Controlled Input](http://facebook.github.io/react/tips/controlled-input-null-value.html)
26
-- [`componentWillReceiveProps` Not Triggered After Mounting](http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
27
-- [Props in getInitialState Is an Anti-Pattern](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)
28
-- [DOM Event Listeners in a Component](http://facebook.github.io/react/tips/dom-event-listeners.html)
29
-- [Load Initial Data via AJAX](http://facebook.github.io/react/tips/initial-ajax.html)
30
-- [False in JSX](http://facebook.github.io/react/tips/false-in-jsx.html)
19
+- [Inline Styles](/react/tips/inline-styles.html)
20
+- [If-Else in JSX](/react/tips/if-else-in-JSX.html)
21
+- [Self-Closing Tag](/react/tips/self-closing-tag.html)
22
+- [Maximum Number of JSX Root Nodes](/react/tips/maximum-number-of-jsx-root-nodes.html)
23
+- [Shorthand for Specifying Pixel Values in style props](/react/tips/style-props-value-px.html)
24
+- [Type of the Children props](/react/tips/children-props-type.html)
25
+- [Value of null for Controlled Input](/react/tips/controlled-input-null-value.html)
26
+- [`componentWillReceiveProps` Not Triggered After Mounting](/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
27
+- [Props in getInitialState Is an Anti-Pattern](/react/tips/props-in-getInitialState-as-anti-pattern.html)
28
+- [DOM Event Listeners in a Component](/react/tips/dom-event-listeners.html)
29
+- [Load Initial Data via AJAX](/react/tips/initial-ajax.html)
30
+- [False in JSX](/react/tips/false-in-jsx.html)
31
32
33
## Intro to the React Framework
@@ -50,7 +50,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
50
51
## Genesis Skeleton
52
53
-[Eric Clemmons](http://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.
53
+[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.
54
<figure>[](http://genesis-skeleton.com/)</figure>
55
56
docs/_posts/2013-12-18-react-v0.5.2-v0.4.2.md
+1
-1
@@ -15,7 +15,7 @@ While we've encouraged responsible disclosure as part of [Facebook's whitehat bo
15
16
You can learn more about the vulnerability discussed here: [CVE-2013-7035][cve].
17
18
-[download]: http://facebook.github.io/react/downloads.html
18
+[download]: /react/downloads.html
19
[bounty]: https://www.facebook.com/whitehat/
20
[ember]: http://emberjs.com/security/
21
[cve]: https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU
docs/_posts/2013-12-23-community-roundup-12.md
+11
-11
@@ -3,26 +3,26 @@ title: "Community Round-up #12"
3
author: Vjeux
4
---
5
6
-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](http://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!
6
+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!
7
8
## The Future of Javascript MVC
9
10
-[David Nolen](http://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](http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
10
+[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.
11
12
> 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.
13
>
14
> Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
15
>
16
> A whole lot.
17
-> <figure>[](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
17
+> <figure>[](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
18
>
19
-> [Read the full article...](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
19
+> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
20
21
22
23
## Scroll Position with React
24
25
-Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
25
+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.
26
27
> We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
28
>
@@ -45,10 +45,10 @@ componentDidUpdate: function() {
45
46
## Lights Out
47
48
-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](http://facebook.github.io/react/docs/animation.html) to implement animations.
49
-<figure>[](http://chenglou.github.io/react-lights-out/)</figure>
48
+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.
49
+<figure>[](https://chenglou.github.io/react-lights-out/)</figure>
50
51
-[Try it out!](http://chenglou.github.io/react-lights-out/)
51
+[Try it out!](https://chenglou.github.io/react-lights-out/)
52
53
54
## Reactive Table Bookmarklet
@@ -65,7 +65,7 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
65
66
<iframe width="100%" height="300" src="https://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
67
68
-[View the source on JSFiddle...](http://jsfiddle.net/ssorallen/fEsYt/)
68
+[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
69
70
## Writing Good React Components
71
@@ -93,9 +93,9 @@ hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
93
## JSX Compiler
94
95
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.
96
-<figure>[](http://facebook.github.io/react/jsx-compiler.html)</figure>
96
+<figure>[](/react/jsx-compiler.html)</figure>
97
98
-[Try it out!](http://facebook.github.io/react/jsx-compiler.html)
98
+[Try it out!](/react/jsx-compiler.html)
99
100
101
docs/_posts/2013-12-30-community-roundup-13.md
+2
-2
@@ -12,14 +12,14 @@ Happy holidays! This blog post is a little-late Christmas present for all the Re
12
13
<figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
14
15
-[Try out the demos!](http://petehunt.github.io/react-touch/)
15
+[Try out the demos!](https://petehunt.github.io/react-touch/)
16
17
18
## Introduction to React
19
20
[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.
21
22
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
22
+<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
23
24
25
## JSX: E4X The Good Parts
docs/_posts/2014-01-02-react-chrome-developer-tools.md
+1
-1
@@ -5,7 +5,7 @@ author: Sebastian Markbåge
5
6
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).
7
8
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
8
+<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
9
10
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.
11
docs/_posts/2014-01-06-community-roundup-14.md
+1
-1
@@ -28,7 +28,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
28
29
## React Rails Tutorial
30
31
-[Selem Delul](http://selem.im) bundled the [React Tutorial](http://facebook.github.io/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
31
+[Selem Delul](http://selem.im) bundled the [React Tutorial](/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
32
33
> ```
34
git clone https://github.com/necrodome/react-rails-tutorial
docs/_posts/2014-02-05-community-roundup-15.md
+5
-5
@@ -3,7 +3,7 @@ title: "Community Round-up #15"
3
author: Jonas Gebhardt
4
---
5
6
-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"](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
6
+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/).
7
8
In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.
9
@@ -15,13 +15,13 @@ To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnorman
15
> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)
16
17
## Reagent: Minimalistic React for ClojureScript
18
-Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](http://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
18
+Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
19
20
> It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
21
>
22
> The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.
23
>
24
-> [Check it out on Github...](http://holmsand.github.io/reagent/)
24
+> [Check it out on Github...](https://holmsand.github.io/reagent/)
25
26
27
## Functional DOM programming
@@ -34,7 +34,7 @@ React's one-way data-binding naturally lends itself to a functional programming
34
35
Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
36
37
-<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
37
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
38
39
40
@@ -106,7 +106,7 @@ In a separate post, Dyrkell breaks down [how to build a binary clock component](
106
[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]
107
108
### Time Travel: Implementing undo in Om
109
-David Nolen shows how to leverage immutable data structures to [add global undo](http://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
109
+David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
110
111
### A Step-by-Step Om Walkthrough
112
docs/_posts/2014-02-15-community-roundup-16.md
+1
-1
@@ -54,7 +54,7 @@ It's great to see the React community expand internationally. [This site](http:/
54
55
### Egghead.io video tutorials
56
57
-Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube.com/watch?v=5yvFLrt7N8M)]
57
+Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube-nocookie.com/watch?v=5yvFLrt7N8M)]
58
59
### "React: Finally, a great server/client web stack"
60
docs/_posts/2014-02-16-react-v0.9-rc1.md
+5
-5
@@ -8,13 +8,13 @@ We're almost ready to release React v0.9! We're posting a release candidate so t
8
The release candidate is available for download from the CDN:
9
10
* **React**
11
- Dev build with warnings: <http://fb.me/react-0.9.0-rc1.js>
12
- Minified build for production: <http://fb.me/react-0.9.0-rc1.min.js>
11
+ Dev build with warnings: <https://fb.me/react-0.9.0-rc1.js>
12
+ Minified build for production: <https://fb.me/react-0.9.0-rc1.min.js>
13
* **React with Add-Ons**
14
- Dev build with warnings: <http://fb.me/react-with-addons-0.9.0-rc1.js>
15
- Minified build for production: <http://fb.me/react-with-addons-0.9.0-rc1.min.js>
14
+ Dev build with warnings: <https://fb.me/react-with-addons-0.9.0-rc1.js>
15
+ Minified build for production: <https://fb.me/react-with-addons-0.9.0-rc1.min.js>
16
* **In-Browser JSX transformer**
17
- <http://fb.me/JSXTransformer-0.9.0-rc1.js>
17
+ <https://fb.me/JSXTransformer-0.9.0-rc1.js>
18
19
We've also published version `0.9.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
docs/_posts/2014-02-20-react-v0.9.md
+5
-5
@@ -10,13 +10,13 @@ Thanks to everyone who tested the release candidate; we were able to find and fi
10
As always, the release is available for download from the CDN:
11
12
* **React**
13
- Dev build with warnings: <http://fb.me/react-0.9.0.js>
14
- Minified build for production: <http://fb.me/react-0.9.0.min.js>
13
+ Dev build with warnings: <https://fb.me/react-0.9.0.js>
14
+ Minified build for production: <https://fb.me/react-0.9.0.min.js>
15
* **React with Add-Ons**
16
- Dev build with warnings: <http://fb.me/react-with-addons-0.9.0.js>
17
- Minified build for production: <http://fb.me/react-with-addons-0.9.0.min.js>
16
+ Dev build with warnings: <https://fb.me/react-with-addons-0.9.0.js>
17
+ Minified build for production: <https://fb.me/react-with-addons-0.9.0.min.js>
18
* **In-Browser JSX Transformer**
19
- <http://fb.me/JSXTransformer-0.9.0.js>
19
+ <https://fb.me/JSXTransformer-0.9.0.js>
20
21
We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
22
docs/_posts/2014-02-24-community-roundup-17.md
+8
-8
@@ -15,12 +15,12 @@ Large parts of Facebook's web frontend are already powered by React. The recentl
15
Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in [this post by Vyacheslav Slinko](https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg).
16
17
### Relato
18
-[Relato](http://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!
18
+[Relato](https://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!
19
20
### Makona Editor
21
22
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.
23
-<figure>[](http://johnthethird.github.io/makona-editor/)</figure>
23
+<figure>[](https://johnthethird.github.io/makona-editor/)</figure>
24
25
### Create Chrome extensions using React
26
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).
@@ -40,12 +40,12 @@ Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a si
40
41
42
### SVG-based graphical node editor
43
-[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](http://forresto.github.io/prototyping/react/) in React.
44
- <figure>[](http://forresto.github.io/prototyping/react/)</figure>
43
+[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.
44
+ <figure>[](https://forresto.github.io/prototyping/react/)</figure>
45
46
47
### Ultimate Tic-Tac-Toe Game in React
48
-Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](http://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
48
+Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](https://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
49
50
51
@@ -55,7 +55,7 @@ Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React ver
55
56
Emanuele shared this awesome demo video with us:
57
58
-<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
58
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
59
60
61
@@ -63,7 +63,7 @@ Emanuele shared this awesome demo video with us:
63
64
65
### Table Sorter
66
-[Table Sorter](http://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
66
+[Table Sorter](https://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
67
68
### Static-search
69
@@ -83,7 +83,7 @@ Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search in
83
84
## React server rendering
85
86
-Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](http://twitter.com/hichaelmart)) walks through the necessary steps.
86
+Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](https://twitter.com/hichaelmart)) walks through the necessary steps.
87
88
Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [react-client-server-starter](https://github.com/adelevie/react-client-server-starter), another detailed walk-through of how to server-render your app.
89
docs/_posts/2014-03-14-community-roundup-18.md
+2
-2
@@ -41,7 +41,7 @@ Thomas Boyt ([@thomasaboyt](https://twitter.com/thomasaboyt)) wrote [this detail
41
42
## React vs. Ember
43
44
-Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
44
+Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](https://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
45
46
47
## React and plain old HTML
@@ -75,7 +75,7 @@ Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [exp
75
76
React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:
77
78
-<iframe width="560" height="315" src="//www.youtube.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
78
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
79
80
## React and Web Components
81
docs/_posts/2014-03-19-react-v0.10-rc1.md
+7
-7
@@ -3,18 +3,18 @@ title: React v0.10 RC
3
author: Paul O’Shannessy
4
---
5
6
-[v0.9 has only been out for a month](http://facebook.github.io/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.
6
+[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.
7
8
The release candidate is available for download from the CDN:
9
10
* **React**
11
- Dev build with warnings: <http://fb.me/react-0.10.0-rc1.js>
12
- Minified build for production: <http://fb.me/react-0.10.0-rc1.min.js>
11
+ Dev build with warnings: <https://fb.me/react-0.10.0-rc1.js>
12
+ Minified build for production: <https://fb.me/react-0.10.0-rc1.min.js>
13
* **React with Add-Ons**
14
- Dev build with warnings: <http://fb.me/react-with-addons-0.10.0-rc1.js>
15
- Minified build for production: <http://fb.me/react-with-addons-0.10.0-rc1.min.js>
14
+ Dev build with warnings: <https://fb.me/react-with-addons-0.10.0-rc1.js>
15
+ Minified build for production: <https://fb.me/react-with-addons-0.10.0-rc1.min.js>
16
* **In-Browser JSX transformer**
17
- <http://fb.me/JSXTransformer-0.10.0-rc1.js>
17
+ <https://fb.me/JSXTransformer-0.10.0-rc1.js>
18
19
We've also published version `0.10.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
@@ -24,7 +24,7 @@ Please try these builds out and [file an issue on GitHub](https://github.com/fac
24
25
The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
26
27
-In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
27
+In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
28
29
Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
30
docs/_posts/2014-03-21-react-v0.10.md
+6
-6
@@ -8,13 +8,13 @@ Hot on the heels of the [release candidate earlier this week](/react/blog/2014/0
8
The release is available for download from the CDN:
9
10
* **React**
11
- Dev build with warnings: <http://fb.me/react-0.10.0.js>
12
- Minified build for production: <http://fb.me/react-0.10.0.min.js>
11
+ Dev build with warnings: <https://fb.me/react-0.10.0.js>
12
+ Minified build for production: <https://fb.me/react-0.10.0.min.js>
13
* **React with Add-Ons**
14
- Dev build with warnings: <http://fb.me/react-with-addons-0.10.0.js>
15
- Minified build for production: <http://fb.me/react-with-addons-0.10.0.min.js>
14
+ Dev build with warnings: <https://fb.me/react-with-addons-0.10.0.js>
15
+ Minified build for production: <https://fb.me/react-with-addons-0.10.0.min.js>
16
* **In-Browser JSX transformer**
17
- <http://fb.me/JSXTransformer-0.10.0.js>
17
+ <https://fb.me/JSXTransformer-0.10.0.js>
18
19
We've also published version `0.10.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
@@ -24,7 +24,7 @@ Please try these builds out and [file an issue on GitHub](https://github.com/fac
24
25
The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
26
27
-In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
27
+In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
28
29
Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
30
docs/_posts/2014-03-28-the-road-to-1.0.md
+1
-1
@@ -51,6 +51,6 @@ Finding a way to define animations in a declarative way is a hard problem. We've
51
52
There are several other things I listed on [our projects page][projects] that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.
53
54
-[v0.10]: http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html
54
+[v0.10]: /react/blog/2014/03/21/react-v0.10.html
55
[pitofsuccess]: http://blog.codinghorror.com/falling-into-the-pit-of-success/
56
[projects]: https://github.com/facebook/react/wiki/Projects
docs/_posts/2014-05-06-flux.md
+2
-2
@@ -5,7 +5,7 @@ author: Bill Fisher and Jing Chen
5
6
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:
7
8
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
8
+<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
9
10
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.
11
@@ -13,4 +13,4 @@ In Flux, the Dispatcher is a singleton that directs the flow of data and ensures
13
14
When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
15
16
-Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](http://facebook.github.io/flux/docs/overview.html) and a [tutorial](http://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
16
+Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
docs/_posts/2014-05-29-one-year-of-open-source-react.md
+2
-2
@@ -5,9 +5,9 @@ author: Cheng Lou
5
6
Today marks the one-year open-source anniversary of React.
7
8
-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](http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
8
+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!
9
10
-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](http://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](http://facebook.github.io/react/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
10
+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.
11
12
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”.
13
docs/_posts/2014-06-27-community-roundup-19.md
+2
-2
@@ -13,7 +13,7 @@ In case you haven't seen it, we've consolidated the tooling solution around Reac
13
14
- [Ryan Florence](https://github.com/rpflorence) and [Michael Jackson](https://github.com/mjackson)'s [react-nested-router](https://github.com/rpflorence/react-nested-router), which is a translation of the Ember router API to React.
15
16
-- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](http://react-bootstrap.github.io/components.html) features live-editable demos.
16
+- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](https://react-bootstrap.github.io/components.html) features live-editable demos.
17
18
- [Andrey Popp](https://github.com/andreypopp)'s [react-quickstart](https://github.com/andreypopp/react-quickstart), which gives you a quick template for server-side rendering and routing, among other features.
19
@@ -23,7 +23,7 @@ These are some of the links that often pop up on the #reactjs IRC channel. If yo
23
24
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:
25
26
-<iframe width="560" height="315" src="//www.youtube.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
26
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
27
28
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.
29
docs/_posts/2014-07-13-react-v0.11-rc1.md
+5
-5
@@ -8,13 +8,13 @@ It's that time again… we're just about ready to ship a new React release! v0.1
8
The release candidate is available for download from the CDN:
9
10
* **React**
11
- Dev build with warnings: <http://fb.me/react-0.11.0-rc1.js>
12
- Minified build for production: <http://fb.me/react-0.11.0-rc1.min.js>
11
+ Dev build with warnings: <https://fb.me/react-0.11.0-rc1.js>
12
+ Minified build for production: <https://fb.me/react-0.11.0-rc1.min.js>
13
* **React with Add-Ons**
14
- Dev build with warnings: <http://fb.me/react-with-addons-0.11.0-rc1.js>
15
- Minified build for production: <http://fb.me/react-with-addons-0.11.0-rc1.min.js>
14
+ Dev build with warnings: <https://fb.me/react-with-addons-0.11.0-rc1.js>
15
+ Minified build for production: <https://fb.me/react-with-addons-0.11.0-rc1.min.js>
16
* **In-Browser JSX transformer**
17
- <http://fb.me/JSXTransformer-0.11.0-rc1.js>
17
+ <https://fb.me/JSXTransformer-0.11.0-rc1.js>
18
19
We've also published version `0.11.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
docs/_posts/2014-07-17-react-v0.11.md
+6
-6
@@ -15,13 +15,13 @@ This version has been cooking for a couple months now and includes a wide array
15
The release is available for download from the CDN:
16
17
* **React**
18
- Dev build with warnings: <http://fb.me/react-0.11.0.js>
19
- Minified build for production: <http://fb.me/react-0.11.0.min.js>
18
+ Dev build with warnings: <https://fb.me/react-0.11.0.js>
19
+ Minified build for production: <https://fb.me/react-0.11.0.min.js>
20
* **React with Add-Ons**
21
- Dev build with warnings: <http://fb.me/react-with-addons-0.11.0.js>
22
- Minified build for production: <http://fb.me/react-with-addons-0.11.0.min.js>
21
+ Dev build with warnings: <https://fb.me/react-with-addons-0.11.0.js>
22
+ Minified build for production: <https://fb.me/react-with-addons-0.11.0.min.js>
23
* **In-Browser JSX transformer**
24
- <http://fb.me/JSXTransformer-0.11.0.js>
24
+ <https://fb.me/JSXTransformer-0.11.0.js>
25
26
We've also published version `0.11.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
27
@@ -100,7 +100,7 @@ Keyboard and mouse events also now include a normalized `e.getModifierState()` t
100
101
## Descriptors
102
103
-In our [v0.10 release notes](http://facebook.github.io/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.
103
+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.
104
105
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.
106
docs/_posts/2014-07-25-react-v0.11.1.md
+5
-5
@@ -16,13 +16,13 @@ We'd also like to call out a couple additional breaking changes that we failed t
16
The release is available for download from the CDN:
17
18
* **React**
19
- Dev build with warnings: <http://fb.me/react-0.11.1.js>
20
- Minified build for production: <http://fb.me/react-0.11.1.min.js>
19
+ Dev build with warnings: <https://fb.me/react-0.11.1.js>
20
+ Minified build for production: <https://fb.me/react-0.11.1.min.js>
21
* **React with Add-Ons**
22
- Dev build with warnings: <http://fb.me/react-with-addons-0.11.1.js>
23
- Minified build for production: <http://fb.me/react-with-addons-0.11.1.min.js>
22
+ Dev build with warnings: <https://fb.me/react-with-addons-0.11.1.js>
23
+ Minified build for production: <https://fb.me/react-with-addons-0.11.1.min.js>
24
* **In-Browser JSX transformer**
25
- <http://fb.me/JSXTransformer-0.11.1.js>
25
+ <https://fb.me/JSXTransformer-0.11.1.js>
26
27
We've also published version `0.11.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
28
docs/_posts/2014-07-28-community-roundup-20.md
+4
-4
@@ -9,19 +9,19 @@ It's an exciting time for React as there are now more commits from open source c
9
10
[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.
11
12
-[<img src="http://blog.atom.io/img/posts/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
12
+[<img src="/react/img/blog/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
13
14
15
## Why Does React Scale?
16
17
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).
18
19
-<iframe width="650" height="315" src="//www.youtube.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
19
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
20
21
22
## Live Editing
23
24
-One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](http://gaearon.github.io/react-hot-loader/)!
24
+One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](https://gaearon.github.io/react-hot-loader/)!
25
26
<iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
27
@@ -63,7 +63,7 @@ If you missed the last [London React Meetup](http://www.meetup.com/London-React-
63
- React on Rails - How to use React with Ruby on Rails to build isomorphic apps
64
- Building an isomorphic, real-time to-do list with moped and node.js
65
66
-<iframe width="650" height="315" src="//www.youtube.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
66
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
67
68
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.
69
docs/_posts/2014-07-30-flux-actions-and-the-dispatcher.md
+3
-3
@@ -3,9 +3,9 @@ title: "Flux: Actions and the Dispatcher"
3
author: Bill Fisher
4
---
5
6
-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](http://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](http://facebook.github.io/flux/docs/todo-list.html).
6
+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).
7
8
-Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](http://facebook.github.io/flux/), we've now open sourced the same [dispatcher](http://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
8
+Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](https://facebook.github.io/flux/), we've now open sourced the same [dispatcher](https://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
9
10
11
Where the Dispatcher Fits in the Flux Data Flow
@@ -21,7 +21,7 @@ When new data enters the system, whether through a person interacting with the a
21
22
Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.
23
24
-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](http://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.
24
+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.
25
26
<img src="/react/img/blog/flux-diagram.png" style="width: 100%;" />
27
docs/_posts/2014-08-03-community-roundup-21.md
+5
-5
@@ -4,7 +4,7 @@ author: Lou Husson
4
---
5
6
## React Router
7
-[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](http://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
7
+[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](https://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
8
9
```javascript
10
React.renderComponent((
@@ -49,7 +49,7 @@ Areeb Malik, from Facebook, talks about his experience using React. "On paper, a
49
50
## Referencing Dynamic Children
51
52
-While Matt Zabriskie was working on [react-tabs](https://www.npmjs.org/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [reference dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
52
+While Matt Zabriskie was working on [react-tabs](https://www.npmjs.com/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [reference dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
53
54
```javascript
55
var App = React.createClass({
@@ -83,12 +83,12 @@ Have you ever wondered how JSX was implemented? James Long wrote a very instruct
83
84
[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
85
86
-[](http://mzabriskie.github.io/react-draggable/example/)
86
+[](https://mzabriskie.github.io/react-draggable/example/)
87
88
89
## HTML Parser2 React
90
91
-[Jason Brown](http://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.org/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
91
+[Jason Brown](https://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.com/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
92
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.
93
94
```javascript
@@ -104,7 +104,7 @@ var parsedComponent = reactParser(html, React);
104
105
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!
106
107
-<iframe width="650" height="315" src="//www.youtube.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
107
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
108
109
110
## Random Tweets
docs/_posts/2014-09-03-introducing-the-jsx-specification.md
+1
-1
@@ -7,7 +7,7 @@ At Facebook we've been using JSX for a long time. We originally introduced it to
7
8
In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.
9
10
-Read the spec now at <http://facebook.github.io/jsx/>.
10
+Read the spec now at <https://facebook.github.io/jsx/>.
11
12
This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.
13
docs/_posts/2014-09-12-community-round-up-22.md
+3
-3
@@ -20,7 +20,7 @@ This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb a
20
21
[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/).
22
23
-<iframe width="650" height="315" src="//www.youtube.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
23
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
24
25
26
## v8 optimizations
@@ -30,7 +30,7 @@ Jakob Kummerow landed [two optimizations to V8](http://www.chromium.org/develope
30
31
## Reusable Components by Khan Academy
32
33
-[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](http://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
33
+[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](https://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
34
35
```javascript
36
var TeX = require('react-components/js/tex.jsx');
@@ -89,7 +89,7 @@ var Button = React.createClass({
89
90
If you are getting started with React, [Joe Maddalone](http://www.joemaddalone.com/) made a good tutorial on how to build your first component.
91
92
-<iframe width="650" height="200" src="//www.youtube.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
92
+<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
93
94
95
## Saving time & staying sane?
docs/_posts/2014-09-16-react-v0.11.2.md
+5
-5
@@ -14,13 +14,13 @@ And lastly, on the heels of announcing Flow at [@Scale](http://atscaleconference
14
The release is available for download from the CDN:
15
16
* **React**
17
- Dev build with warnings: <http://fb.me/react-0.11.2.js>
18
- Minified build for production: <http://fb.me/react-0.11.2.min.js>
17
+ Dev build with warnings: <https://fb.me/react-0.11.2.js>
18
+ Minified build for production: <https://fb.me/react-0.11.2.min.js>
19
* **React with Add-Ons**
20
- Dev build with warnings: <http://fb.me/react-with-addons-0.11.2.js>
21
- Minified build for production: <http://fb.me/react-with-addons-0.11.2.min.js>
20
+ Dev build with warnings: <https://fb.me/react-with-addons-0.11.2.js>
21
+ Minified build for production: <https://fb.me/react-with-addons-0.11.2.min.js>
22
* **In-Browser JSX transformer**
23
- <http://fb.me/JSXTransformer-0.11.2.js>
23
+ <https://fb.me/JSXTransformer-0.11.2.js>
24
25
We've also published version `0.11.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
26
docs/_posts/2014-09-24-testing-flux-applications.md
+5
-5
@@ -3,9 +3,9 @@ title: "Testing Flux Applications"
3
author: Bill Fisher
4
---
5
6
-**A more up-to-date version of this post is available as part of the [Flux documentation](http://facebook.github.io/flux/docs/testing-flux-applications.html).**
6
+**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).**
7
8
-[Flux](http://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](http://facebook.github.io/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](http://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](http://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](http://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
8
+[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.
9
10
11
Testing with Jest
@@ -180,7 +180,7 @@ Now we have a collection of objects that will come back from MyOtherStore whenev
180
181
A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
182
183
-For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](http://facebook.github.io/jest/docs/mock-functions.html).
183
+For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](https://facebook.github.io/jest/docs/mock-functions.html).
184
185
186
Moving Logic from React to Stores
@@ -315,11 +315,11 @@ render: function() {
315
},
316
```
317
318
-To learn how to test React components themselves, check out the [Jest tutorial for React](http://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](http://facebook.github.io/react/docs/test-utils.html).
318
+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).
319
320
321
Further Reading
322
---------------
323
324
- [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler
325
-- [Jest API Reference](http://facebook.github.io/jest/docs/api.html)
325
+- [Jest API Reference](https://facebook.github.io/jest/docs/api.html)
docs/_posts/2014-10-14-introducing-react-elements.md
+3
-3
@@ -4,7 +4,7 @@ author: Sebastian Markbåge
4
redirect_from: "blog/2014/10/14/introducting-react-elements.html"
5
---
6
7
-The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](http://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
7
+The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](https://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
8
9
If you currently use JSX everywhere, you don't really have to do anything to get these benefits! The updated transformer will do it for you.
10
@@ -72,7 +72,7 @@ This is the biggest change to 0.12. Don't worry though. This functionality conti
72
73
### React With JSX
74
75
-If you use the React specific [JSX](http://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
75
+If you use the React specific [JSX](https://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
76
77
```javascript
78
// If you use node/browserify modules make sure
@@ -92,7 +92,7 @@ var MyOtherComponent = React.createClass({
92
});
93
```
94
95
-*NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use [the JSX spec](http://facebook.github.io/jsx/) with a different transpiler for custom purposes.*
95
+*NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use [the JSX spec](https://facebook.github.io/jsx/) with a different transpiler for custom purposes.*
96
97
### React Without JSX
98
docs/_posts/2014-10-16-react-v0.12-rc1.md
+6
-6
@@ -9,13 +9,13 @@ We are finally ready to share the work we've been doing over the past couple mon
9
The release candidate is available for download:
10
11
* **React**
12
- Dev build with warnings: <http://fb.me/react-0.12.0-rc1.js>
13
- Minified build for production: <http://fb.me/react-0.12.0-rc1.min.js>
12
+ Dev build with warnings: <https://fb.me/react-0.12.0-rc1.js>
13
+ Minified build for production: <https://fb.me/react-0.12.0-rc1.min.js>
14
* **React with Add-Ons**
15
- Dev build with warnings: <http://fb.me/react-with-addons-0.12.0-rc1.js>
16
- Minified build for production: <http://fb.me/react-with-addons-0.12.0-rc1.min.js>
15
+ Dev build with warnings: <https://fb.me/react-with-addons-0.12.0-rc1.js>
16
+ Minified build for production: <https://fb.me/react-with-addons-0.12.0-rc1.min.js>
17
* **In-Browser JSX transformer**
18
- <http://fb.me/JSXTransformer-0.12.0-rc1.js>
18
+ <https://fb.me/JSXTransformer-0.12.0-rc1.js>
19
20
We've also published version `0.12.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
21
@@ -27,7 +27,7 @@ The biggest conceptual change we made in v0.12 is the move to React Elements. [W
27
28
## JSX Changes
29
30
-Earlier this year we decided to write [a specification for JSX](http://facebook.github.io/jsx/). This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.
30
+Earlier this year we decided to write [a specification for JSX](https://facebook.github.io/jsx/). This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.
31
32
33
### The `@jsx` Pragma is Gone!
docs/_posts/2014-10-17-community-roundup-23.md
+9
-9
@@ -4,13 +4,13 @@ layout: post
4
author: Lou Husson
5
---
6
7
-This round-up is a special edition on [Flux](http://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
7
+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!
8
9
## React And Flux at ForwardJS
10
11
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.
12
13
-<iframe width="650" height="315" src="//www.youtube.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
13
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
14
15
# Yahoo
16
@@ -24,10 +24,10 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
24
25
## Reflux
26
27
-[Mikael Brassman](http://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](http://spoike.ghost.io/deconstructing-reactjss-flux/).
27
+[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/).
28
29
<center>
30
-<a href="http://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
30
+<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
31
</center>
32
33
@@ -107,22 +107,22 @@ undo: function() {
107
108
## React and Flux
109
110
-[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) on a simple example that's representative of a real project he worked on.
110
+[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) on a simple example that's representative of a real project he worked on.
111
112
> Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.
113
>
114
> Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current "parent controller or models".
115
>
116
-> [Read the full article...](http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
116
+> [Read the full article...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
117
118
119
120
## Flux: Step by Step approach
121
122
-[Nicola Paolucci](https://github.com/durdn) from Atlassian wrote a great guide to help your getting understand [Flux step by step](http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
122
+[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/).
123
124
<center>
125
-<a href="http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
125
+<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
126
</center>
127
128
@@ -144,7 +144,7 @@ undo: function() {
144
145
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.
146
147
-<iframe width="650" height="315" src="//www.youtube.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
147
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
148
149
150
## Random Tweet
docs/_posts/2014-10-28-react-v0.12.md
+5
-5
@@ -11,13 +11,13 @@ We have talked a lot about some of the bigger changes in this release. [We intro
11
The release is available for download:
12
13
* **React**
14
- Dev build with warnings: <http://fb.me/react-0.12.0.js>
15
- Minified build for production: <http://fb.me/react-0.12.0.min.js>
14
+ Dev build with warnings: <https://fb.me/react-0.12.0.js>
15
+ Minified build for production: <https://fb.me/react-0.12.0.min.js>
16
* **React with Add-Ons**
17
- Dev build with warnings: <http://fb.me/react-with-addons-0.12.0.js>
18
- Minified build for production: <http://fb.me/react-with-addons-0.12.0.min.js>
17
+ Dev build with warnings: <https://fb.me/react-with-addons-0.12.0.js>
18
+ Minified build for production: <https://fb.me/react-with-addons-0.12.0.min.js>
19
* **In-Browser JSX transformer**
20
- <http://fb.me/JSXTransformer-0.12.0.js>
20
+ <https://fb.me/JSXTransformer-0.12.0.js>
21
22
We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
23
docs/_posts/2014-11-25-community-roundup-24.md
+5
-5
@@ -14,11 +14,11 @@ Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic
14
15
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.
16
17
-<iframe width="560" height="315" src="//www.youtube.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
17
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
18
19
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.
20
21
-<iframe width="560" height="315" src="//www.youtube.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
21
+<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
22
23
## All About Isomorphism
24
@@ -38,7 +38,7 @@ Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson
38
39
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
40
41
-<iframe width="420" height="315" src="//www.youtube.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
41
+<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
42
43
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.
44
@@ -48,11 +48,11 @@ We enjoyed a cinematic/narrative experience with this React-powered, interactive
48
49
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.
50
51
-<iframe width="420" height="315" src="//www.youtube.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
51
+<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
52
53
## Community Components
54
55
-Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](http://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](http://tomchentw.github.io/react-prism/) component, for good measure.
55
+Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](https://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](https://tomchentw.github.io/react-prism/) component, for good measure.
56
57
Jed Watson ([jedwatson](https://github.com/JedWatson)) helps you manage touch, tap, and press events using the [react-tappable](https://github.com/JedWatson/react-tappable) component.
58
docs/_posts/2014-12-18-react-v0.12.2.md
+5
-5
@@ -10,13 +10,13 @@ You may have noticed that we did not do an announcement for v0.12.1. That releas
10
The release is available for download from the CDN:
11
12
* **React**
13
- Dev build with warnings: <http://fb.me/react-0.12.2.js>
14
- Minified build for production: <http://fb.me/react-0.12.2.min.js>
13
+ Dev build with warnings: <https://fb.me/react-0.12.2.js>
14
+ Minified build for production: <https://fb.me/react-0.12.2.min.js>
15
* **React with Add-Ons**
16
- Dev build with warnings: <http://fb.me/react-with-addons-0.12.2.js>
17
- Minified build for production: <http://fb.me/react-with-addons-0.12.2.min.js>
16
+ Dev build with warnings: <https://fb.me/react-with-addons-0.12.2.js>
17
+ Minified build for production: <https://fb.me/react-with-addons-0.12.2.min.js>
18
* **In-Browser JSX transformer**
19
- <http://fb.me/JSXTransformer-0.12.2.js>
19
+ <https://fb.me/JSXTransformer-0.12.2.js>
20
21
We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.
22
docs/_posts/2014-12-19-react-js-conf-diversity-scholarship.md
+1
-1
@@ -11,7 +11,7 @@ I'm really excited about this and I hope you are too! The full announcement is b
11
12
The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!
13
14
-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](http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html) [updates](http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html) on our blog.
14
+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.
15
16
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.
17
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
docs/_posts/2015-02-18-react-conf-roundup-2015.md
+22
-22
@@ -16,7 +16,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
16
</p>
17
</div>
18
<div class="skinny-col">
19
- <iframe width="305" height="171" src="https://www.youtube.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
19
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
20
</div>
21
</div>
22
@@ -28,7 +28,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
28
</p>
29
</div>
30
<div class="skinny-col">
31
- <iframe width="305" height="171" src="https://www.youtube.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
31
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
32
</div>
33
</div>
34
@@ -40,7 +40,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
40
</p>
41
</div>
42
<div class="skinny-col">
43
- <iframe width="305" height="171" src="https://www.youtube.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
43
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
44
</div>
45
</div>
46
@@ -52,7 +52,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
52
</p>
53
</div>
54
<div class="skinny-col">
55
- <iframe width="305" height="171" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
55
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
56
</div>
57
</div>
58
@@ -64,7 +64,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
64
</p>
65
</div>
66
<div class="skinny-col">
67
- <iframe width="305" height="171" src="https://www.youtube.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
67
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
68
</div>
69
</div>
70
@@ -76,7 +76,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
76
</p>
77
</div>
78
<div class="skinny-col">
79
- <iframe width="305" height="171" src="https://www.youtube.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
79
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
80
</div>
81
</div>
82
@@ -88,7 +88,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
88
</p>
89
</div>
90
<div class="skinny-col">
91
- <iframe width="305" height="171" src="https://www.youtube.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
91
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
92
</div>
93
</div>
94
@@ -96,11 +96,11 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
96
<div class="skinny-col">
97
<h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
98
<p>
99
- <strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="http://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
99
+ <strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="https://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
100
</p>
101
</div>
102
<div class="skinny-col">
103
- <iframe width="305" height="171" src="https://www.youtube.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
103
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
104
</div>
105
</div>
106
@@ -112,7 +112,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
112
</p>
113
</div>
114
<div class="skinny-col">
115
- <iframe width="305" height="171" src="https://www.youtube.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
115
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
116
</div>
117
</div>
118
@@ -124,7 +124,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
124
</p>
125
</div>
126
<div class="skinny-col">
127
- <iframe width="305" height="171" src="https://www.youtube.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
127
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
128
</div>
129
</div>
130
@@ -136,7 +136,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
136
</p>
137
</div>
138
<div class="skinny-col">
139
- <iframe width="305" height="171" src="https://www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
139
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
140
</div>
141
</div>
142
@@ -148,7 +148,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
148
</p>
149
</div>
150
<div class="skinny-col">
151
- <iframe width="305" height="171" src="https://www.youtube.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
151
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
152
</div>
153
</div>
154
@@ -160,7 +160,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
160
</p>
161
</div>
162
<div class="skinny-col">
163
- <iframe width="305" height="171" src="https://www.youtube.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
163
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
164
</div>
165
</div>
166
@@ -171,7 +171,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
171
<strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
172
</div>
173
<div class="skinny-col">
174
- <iframe width="305" height="171" src="https://www.youtube.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
174
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
175
</div>
176
</div>
177
@@ -182,7 +182,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
182
<strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
183
</div>
184
<div class="skinny-col">
185
- <iframe width="305" height="171" src="https://www.youtube.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
185
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
186
</div>
187
</div>
188
@@ -193,7 +193,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
193
<strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
194
</div>
195
<div class="skinny-col">
196
- <iframe width="305" height="171" src="https://www.youtube.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
196
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
197
</div>
198
</div>
199
@@ -204,7 +204,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
204
<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>.
205
</div>
206
<div class="skinny-col">
207
- <iframe width="305" height="171" src="https://www.youtube.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
207
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
208
</div>
209
</div>
210
@@ -215,7 +215,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
215
<strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
216
</div>
217
<div class="skinny-col">
218
- <iframe width="305" height="171" src="https://www.youtube.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
218
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
219
</div>
220
</div>
221
@@ -226,7 +226,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
226
<strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
227
</div>
228
<div class="skinny-col">
229
- <iframe width="305" height="171" src="https://www.youtube.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
229
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
230
</div>
231
</div>
232
@@ -237,7 +237,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
237
<strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&A session.
238
</div>
239
<div class="skinny-col">
240
- <iframe width="305" height="171" src="https://www.youtube.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
240
+ <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
241
</div>
242
</div>
243
@@ -266,4 +266,4 @@ And, in case you missed a session, you can borrow **Michael Chan’s** [drawings
266
267
**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.
268
269
-<iframe width="305" height="171" src="https://www.youtube.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
269
+<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
docs/_posts/2015-02-20-introducing-relay-and-graphql.md
+1
-1
@@ -8,7 +8,7 @@ author: Greg Hurrell
8
9
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.
10
11
-<iframe width="560" height="315" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
11
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
12
13
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.
14
docs/_posts/2015-02-24-react-v0.13-rc1.md
+6
-6
@@ -12,13 +12,13 @@ We've talked a little bit about the changes that are coming. The splashiest of t
12
The release candidate is available for download:
13
14
* **React**
15
- Dev build with warnings: <http://fb.me/react-0.13.0-rc1.js>
16
- Minified build for production: <http://fb.me/react-0.13.0-rc1.min.js>
15
+ Dev build with warnings: <https://fb.me/react-0.13.0-rc1.js>
16
+ Minified build for production: <https://fb.me/react-0.13.0-rc1.min.js>
17
* **React with Add-Ons**
18
- Dev build with warnings: <http://fb.me/react-with-addons-0.13.0-rc1.js>
19
- Minified build for production: <http://fb.me/react-with-addons-0.13.0-rc1.min.js>
18
+ Dev build with warnings: <https://fb.me/react-with-addons-0.13.0-rc1.js>
19
+ Minified build for production: <https://fb.me/react-with-addons-0.13.0-rc1.min.js>
20
* **In-Browser JSX transformer**
21
- <http://fb.me/JSXTransformer-0.13.0-rc1.js>
21
+ <https://fb.me/JSXTransformer-0.13.0-rc1.js>
22
23
We've also published version `0.13.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
24
@@ -39,7 +39,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
39
40
#### New Features
41
42
-* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
42
+* 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
43
* 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.
44
* 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`)
45
* `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.
docs/_posts/2015-03-03-react-v0.13-rc2.md
+5
-5
@@ -13,13 +13,13 @@ Thanks to everybody who has already been testing the release candidate. We've re
13
The release candidate is available for download:
14
15
* **React**
16
- Dev build with warnings: <http://fb.me/react-0.13.0-rc2.js>
17
- Minified build for production: <http://fb.me/react-0.13.0-rc2.min.js>
16
+ Dev build with warnings: <https://fb.me/react-0.13.0-rc2.js>
17
+ Minified build for production: <https://fb.me/react-0.13.0-rc2.min.js>
18
* **React with Add-Ons**
19
- Dev build with warnings: <http://fb.me/react-with-addons-0.13.0-rc2.js>
20
- Minified build for production: <http://fb.me/react-with-addons-0.13.0-rc2.min.js>
19
+ Dev build with warnings: <https://fb.me/react-with-addons-0.13.0-rc2.js>
20
+ Minified build for production: <https://fb.me/react-with-addons-0.13.0-rc2.min.js>
21
* **In-Browser JSX transformer**
22
- <http://fb.me/JSXTransformer-0.13.0-rc2.js>
22
+ <https://fb.me/JSXTransformer-0.13.0-rc2.js>
23
24
We've also published version `0.13.0-rc2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
25
docs/_posts/2015-03-04-community-roundup-25.md
+2
-2
@@ -12,7 +12,7 @@ Interest in React has been exploding recently, so it's a good time to explore so
12
13
[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:
14
15
-<iframe width="650" height="300" src="//www.youtube.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
15
+<iframe width="650" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
16
17
[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.
18
@@ -40,7 +40,7 @@ Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Pl
40
41
[Andrew Hillel](https://twitter.com/andyhillel) of the BBC gives [an excellent and thorough breakdown](http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d) of the stack they used to rebuild their homepage, with React as an integral part of the front-end.
42
43
-A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](http://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.
43
+A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](https://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.
44
45
[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.
46
docs/_posts/2015-03-10-react-v0.13.md
+6
-6
@@ -17,13 +17,13 @@ Our planned optimizations require that ReactElement objects are immutable, which
17
The release is now available for download:
18
19
* **React**
20
- Dev build with warnings: <http://fb.me/react-0.13.0.js>
21
- Minified build for production: <http://fb.me/react-0.13.0.min.js>
20
+ Dev build with warnings: <https://fb.me/react-0.13.0.js>
21
+ Minified build for production: <https://fb.me/react-0.13.0.min.js>
22
* **React with Add-Ons**
23
- Dev build with warnings: <http://fb.me/react-with-addons-0.13.0.js>
24
- Minified build for production: <http://fb.me/react-with-addons-0.13.0.min.js>
23
+ Dev build with warnings: <https://fb.me/react-with-addons-0.13.0.js>
24
+ Minified build for production: <https://fb.me/react-with-addons-0.13.0.min.js>
25
* **In-Browser JSX transformer**
26
- <http://fb.me/JSXTransformer-0.13.0.js>
26
+ <https://fb.me/JSXTransformer-0.13.0.js>
27
28
We've also published version `0.13.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
29
@@ -45,7 +45,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
45
46
#### New Features
47
48
-* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
48
+* 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.
49
* 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.
50
* 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.
51
* 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`).
docs/_posts/2015-03-16-react-v0.13.1.md
+5
-5
@@ -10,13 +10,13 @@ Thanks all of you who have been upgrading your applications and taking the time
10
The release is now available for download:
11
12
* **React**
13
- Dev build with warnings: <http://fb.me/react-0.13.1.js>
14
- Minified build for production: <http://fb.me/react-0.13.1.min.js>
13
+ Dev build with warnings: <https://fb.me/react-0.13.1.js>
14
+ Minified build for production: <https://fb.me/react-0.13.1.min.js>
15
* **React with Add-Ons**
16
- Dev build with warnings: <http://fb.me/react-with-addons-0.13.1.js>
17
- Minified build for production: <http://fb.me/react-with-addons-0.13.1.min.js>
16
+ Dev build with warnings: <https://fb.me/react-with-addons-0.13.1.js>
17
+ Minified build for production: <https://fb.me/react-with-addons-0.13.1.min.js>
18
* **In-Browser JSX transformer**
19
- <http://fb.me/JSXTransformer-0.13.1.js>
19
+ <https://fb.me/JSXTransformer-0.13.1.js>
20
21
We've also published version `0.13.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
22
docs/_posts/2015-03-19-building-the-facebook-news-feed-with-relay.md
+1
-1
@@ -3,7 +3,7 @@ title: "Building The Facebook News Feed With Relay"
3
author: Joseph Savona
4
---
5
6
-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](http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube.com/watch?v=9sc8Pyc51uU).
6
+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/watch?v=9sc8Pyc51uU).
7
8
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.
9
docs/_posts/2015-03-26-introducing-react-native.md
+1
-1
@@ -13,4 +13,4 @@ For more details, see [Tom Occhino's post on the Facebook Engineering blog](http
13
>
14
> *It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”*
15
16
-To learn more, visit the [React Native website](http://facebook.github.io/react-native/).
16
+To learn more, visit the [React Native website](https://facebook.github.io/react-native/).
docs/_posts/2015-03-30-community-roundup-26.md
+1
-1
@@ -13,7 +13,7 @@ We open sourced React Native last week and the community reception blew away all
13
14
**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.
15
16
-<iframe width="560" height="315" src="https://www.youtube.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
16
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
17
18
19
## Ray Wenderlich - Property Finder
docs/acknowledgements.md
+1
-1
@@ -16,4 +16,4 @@ We'd like to thank all of our contributors:
16
{% endfor %}
17
</div>
18
19
-In addition, we're grateful to [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.org/package/react) package name on npm and to [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter. We'd also like to thank [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.org/package/flux) package name on npm.
19
+In addition, we're grateful to [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.com/package/react) package name on npm and to [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter. We'd also like to thank [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.com/package/flux) package name on npm.
docs/docs/01-why-react.ko-KR.md
+3
-3
@@ -5,7 +5,7 @@ permalink: why-react-ko-KR.html
5
next: displaying-data-ko-KR.html
6
---
7
8
-React는 페이스북과 인스타그램에서 사용자 인터페이스를 구성하기 위해 만들어진 라이브러리입니다. 많은 사람들은 React를 **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 에서의 **V** 로 생각하는 경향이 있습니다.
8
+React는 페이스북과 인스타그램에서 사용자 인터페이스를 구성하기 위해 만들어진 라이브러리입니다. 많은 사람들은 React를 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 에서의 **V** 로 생각하는 경향이 있습니다.
9
10
우리는 단 하나의 문제를 해결하기 위해 React를 만들었습니다: **지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기.** 이 문제를 해결하기 위해, React는 두가지 컨셉을 도입했습니다.
11
@@ -23,8 +23,8 @@ React는 재사용 가능한 컴포넌트들을 만드는 데에 도움이 됩
23
24
## 5분만 투자하세요
25
26
-React는 많은 관습적인 사고에 도전하며, 첫눈에 볼 때는 이상한 아이디어들의 모음이라고 생각할 수도 있습니다. 이 가이드를 읽기 위해 [5분만 투자하세요](http://37signals.com/svn/posts/3124-give-it-five-minutes); 그 이상한 아이디어들은 페이스북과 인스타그램 안팎의 수천 개의 컴포넌트들을 만드는 데에 사용되었기 때문입니다.
26
+React는 많은 관습적인 사고에 도전하며, 첫눈에 볼 때는 이상한 아이디어들의 모음이라고 생각할 수도 있습니다. 이 가이드를 읽기 위해 [5분만 투자하세요](https://signalvnoise.com/posts/3124-give-it-five-minutes); 그 이상한 아이디어들은 페이스북과 인스타그램 안팎의 수천 개의 컴포넌트들을 만드는 데에 사용되었기 때문입니다.
27
28
## 더 알아보기
29
30
-[이 블로그 포스트](http://facebook.github.io/react/blog/2013/06/05/why-react.html)에서 React를 만든 우리의 동기에 대해 알아볼 수 있습니다.
30
+[이 블로그 포스트](/react/blog/2013/06/05/why-react.html)에서 React를 만든 우리의 동기에 대해 알아볼 수 있습니다.
docs/docs/01-why-react.md
+3
-3
@@ -4,7 +4,7 @@ title: Why React?
4
permalink: why-react.html
5
next: displaying-data.html
6
---
7
-React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
7
+React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
8
9
We built React to solve one problem: **building large applications with data that changes over time**. To do this, React uses two main ideas.
10
@@ -22,8 +22,8 @@ React is all about building reusable components. In fact, with React the *only*
22
23
## Give It Five Minutes
24
25
-React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
25
+React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](https://signalvnoise.com/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
26
27
## Learn More
28
29
-You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html).
29
+You can learn more about our motivations behind building React in [this blog post](/react/blog/2013/06/05/why-react.html).
docs/docs/01-why-react.zh-CN.md
+3
-3
@@ -5,7 +5,7 @@ permalink: why-react-zh-CN.html
5
next: displaying-data-zh-CN.html
6
---
7
8
-React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
8
+React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
9
10
我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。为了达到这个目标，React 采用下面两个主要的思想。
11
@@ -23,10 +23,10 @@ React 都是关于构建可复用的组件。事实上，通过 React 你*唯一
23
24
## 给它5分钟的时间
25
26
-React挑战了很多传统的知识，第一眼看上去可能很多想法有点疯狂。当你阅读这篇指南，请[给它5分钟的时间](http://37signals.com/svn/posts/3124-give-it-five-minutes)；那些疯狂的想法已经帮助 Facebook 和 Instagram 从里到外创建了上千的组件了。
26
+React挑战了很多传统的知识，第一眼看上去可能很多想法有点疯狂。当你阅读这篇指南，请[给它5分钟的时间](https://signalvnoise.com/posts/3124-give-it-five-minutes)；那些疯狂的想法已经帮助 Facebook 和 Instagram 从里到外创建了上千的组件了。
27
28
## 了解更多
29
30
-你可以从这篇[博客](http://facebook.github.io/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。
30
+你可以从这篇[博客](/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。
31
32
docs/docs/02-displaying-data.ko-KR.md
+5
-5
@@ -17,8 +17,8 @@ UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하
17
<html>
18
<head>
19
<title>Hello React</title>
20
- <script src="http://fb.me/react-{{site.react_version}}.js"></script>
21
- <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
20
+ <script src="https://fb.me/react-{{site.react_version}}.js"></script>
21
+ <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
22
</head>
23
<body>
24
<div id="example"></div>
@@ -82,11 +82,11 @@ React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props`
82
83
**JSX는 당신으로 하여금 HTML 문법을 이용해 JavaScript 객체를 만들게 해줍니다.** React를 이용해 순수한 JavaScript 문법으로 링크를 만드려고 한다면, 코드는 다음과 같습니다:
84
85
-`React.createElement('a', {href: 'http://facebook.github.io/react/'}, '안녕하세요!')`
85
+`React.createElement('a', {href: 'https://facebook.github.io/react/'}, '안녕하세요!')`
86
87
JSX를 이용하면:
88
89
-`<a href="http://facebook.github.io/react/">안녕하세요!</a>`
89
+`<a href="https://facebook.github.io/react/">안녕하세요!</a>`
90
91
우리는 이것이 React 앱들을 만들기 쉽게 하고, 디자이너들이 이 문법을 더 선호하는 것을 발견했습니다, 하지만 모든 사람은 그들만의 선호하는 워크플로우가 있기 마련이므로, **JSX는 React를 사용하기 위해 필수적이지는 않습니다.**
92
@@ -94,7 +94,7 @@ JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게
94
95
JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/react/docs/jsx-gotchas-ko-KR.html)에 중요한 차이점들에 대해 설명되어 있습니다.
96
97
-JSX를 사용하기 시작하기 위한 가장 쉬운 방법은 브라우저에서 작동하는 `JSXTransformer`를 사용하는 것입니다. 우리는 이것을 프로덕션에서는 사용하지 않기를 강하게 권장하는 바입니다. 당신은 우리의 커맨드 라인 [react-tools](http://npmjs.org/package/react-tools) 패키지를 이용하여 미리 컴파일(precompile)해 사용할 수 있습니다.
97
+JSX를 사용하기 시작하기 위한 가장 쉬운 방법은 브라우저에서 작동하는 `JSXTransformer`를 사용하는 것입니다. 우리는 이것을 프로덕션에서는 사용하지 않기를 강하게 권장하는 바입니다. 당신은 우리의 커맨드 라인 [react-tools](https://www.npmjs.com/package/react-tools) 패키지를 이용하여 미리 컴파일(precompile)해 사용할 수 있습니다.
98
99
100
## JSX 없이 React 사용하기
docs/docs/02-displaying-data.md
+5
-5
@@ -18,8 +18,8 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
18
<html>
19
<head>
20
<title>Hello React</title>
21
- <script src="http://fb.me/react-{{site.react_version}}.js"></script>
22
- <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
21
+ <script src="https://fb.me/react-{{site.react_version}}.js"></script>
22
+ <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
23
</head>
24
<body>
25
<div id="example"></div>
@@ -83,11 +83,11 @@ In order to make this easier, we've added a very simple, **optional** HTML-like
83
84
**JSX lets you create JavaScript objects using HTML syntax.** To generate a link in React using pure JavaScript you'd write:
85
86
-`React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')`
86
+`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
87
88
With JSX this becomes:
89
90
-`<a href="http://facebook.github.io/react/">Hello!</a>`
90
+`<a href="https://facebook.github.io/react/">Hello!</a>`
91
92
We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
93
@@ -95,7 +95,7 @@ JSX is very small. To learn more about it, see [JSX in depth](/react/docs/jsx-in
95
96
JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
97
98
-The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](http://npmjs.org/package/react-tools) package.
98
+The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](https://www.npmjs.com/package/react-tools) package.
99
100
101
## React without JSX
docs/docs/02-displaying-data.zh-CN.md
+5
-5
@@ -19,8 +19,8 @@ next: jsx-in-depth-zh-CN.html
19
<html>
20
<head>
21
<title>Hello React</title>
22
- <script src="http://fb.me/react-{{site.react_version}}.js"></script>
23
- <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
22
+ <script src="https://fb.me/react-{{site.react_version}}.js"></script>
23
+ <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
24
</head>
25
<body>
26
<div id="example"></div>
@@ -82,11 +82,11 @@ React 组件非常简单。你可以认为它们就是简单的函数，接受 `
82
83
**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写：
84
85
-`React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`。
85
+`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello React!')`。
86
87
通过 JSX 这就变成了
88
89
-`<a href="http://facebook.github.io/react/">Hello React!</a>`。
89
+`<a href="https://facebook.github.io/react/">Hello React!</a>`。
90
91
我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。**
92
@@ -94,7 +94,7 @@ JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性
94
95
JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。
96
97
-最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。
97
+最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](https://www.npmjs.com/package/react-tools) 包来预编译你的代码。
98
99
100
## 没有 JSX 的 React
docs/docs/02.1-jsx-in-depth.ko-KR.md
+2
-2
@@ -6,7 +6,7 @@ prev: displaying-data-ko-KR.html
6
next: jsx-spread-ko-KR.html
7
---
8
9
-[JSX](http://facebook.github.io/jsx/)는 XML과 비슷한 JavaScript문법 확장입니다. React에서 변환되는 간단한 JSX 구문을 사용하실 수 있습니다.
9
+[JSX](https://facebook.github.io/jsx/)는 XML과 비슷한 JavaScript문법 확장입니다. React에서 변환되는 간단한 JSX 구문을 사용하실 수 있습니다.
10
11
## 왜 JSX인가?
12
@@ -154,7 +154,7 @@ var App = (
154
155
> 주의:
156
>
157
-> 이 기능은 [v0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) 이상에만 있습니다.
157
+> 이 기능은 [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) 이상에만 있습니다.
158
159
## JavaScript 표현식
160
docs/docs/02.1-jsx-in-depth.md
+2
-2
@@ -6,7 +6,7 @@ prev: displaying-data.html
6
next: jsx-spread.html
7
---
8
9
-[JSX](http://facebook.github.io/jsx/) is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
9
+[JSX](https://facebook.github.io/jsx/) is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
10
11
## Why JSX?
12
@@ -157,7 +157,7 @@ var App = (
157
158
> Note:
159
>
160
-> This feature is available in [v0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) and above.
160
+> This feature is available in [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) and above.
161
162
## JavaScript Expressions
163
docs/docs/02.1-jsx-in-depth.zh-CN.md
+1
-1
@@ -6,7 +6,7 @@ prev: displaying-data-zh-CN.html
6
next: jsx-spread-zh-CN.html
7
---
8
9
-[JSX](http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
9
+[JSX](https://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
10
11
12
## 为什么要用 JSX？
docs/docs/02.2-jsx-spread.ko-KR.md
+1
-1
@@ -52,5 +52,5 @@ next: jsx-gotchas-ko-KR.html
52
`...` 연산자(스프레드 연산자)는 이미 [ES6의 배열](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)에서 지원합니다. [객체 rest와 스프레드 프로퍼티](https://github.com/sebmarkbage/ecmascript-rest-spread)에 대한 ES7의 제안도 있습니다. JSX의 구문을 더 깔끔하게 하기 위해 지원되고 개발중인 표준을 활용하고 있습니다.
53
54
[^1]: 아무래도 좋지만, 이 제목의 원문 "Mutating Props is Bad, mkay"는 사우스 파크에
55
- 나온 대사 "[Drug is bad, mkay](https://www.youtube.com/watch?v=Uh7l8dx-h8M)"의
55
+ 나온 대사 "[Drug is bad, mkay](https://www.youtube-nocookie.com/watch?v=Uh7l8dx-h8M)"의
56
패러디입니다.
docs/docs/04-multiple-components.ko-KR.md
+2
-2
@@ -33,7 +33,7 @@ var Avatar = React.createClass({
33
var ProfilePic = React.createClass({
34
render: function() {
35
return (
36
- <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
36
+ <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
37
);
38
}
39
});
@@ -41,7 +41,7 @@ var ProfilePic = React.createClass({
41
var ProfileLink = React.createClass({
42
render: function() {
43
return (
44
- <a href={'http://www.facebook.com/' + this.props.username}>
44
+ <a href={'https://www.facebook.com/' + this.props.username}>
45
{this.props.username}
46
</a>
47
);
docs/docs/04-multiple-components.md
+2
-2
@@ -33,7 +33,7 @@ var Avatar = React.createClass({
33
var ProfilePic = React.createClass({
34
render: function() {
35
return (
36
- <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
36
+ <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
37
);
38
}
39
});
@@ -41,7 +41,7 @@ var ProfilePic = React.createClass({
41
var ProfileLink = React.createClass({
42
render: function() {
43
return (
44
- <a href={'http://www.facebook.com/' + this.props.username}>
44
+ <a href={'https://www.facebook.com/' + this.props.username}>
45
{this.props.username}
46
</a>
47
);
docs/docs/04-multiple-components.zh-CN.md
+2
-2
@@ -32,7 +32,7 @@ var Avatar = React.createClass({
32
var ProfilePic = React.createClass({
33
render: function() {
34
return (
35
- <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
35
+ <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
36
);
37
}
38
});
@@ -40,7 +40,7 @@ var ProfilePic = React.createClass({
40
var ProfileLink = React.createClass({
41
render: function() {
42
return (
43
- <a href={'http://www.facebook.com/' + this.props.username}>
43
+ <a href={'https://www.facebook.com/' + this.props.username}>
44
{this.props.username}
45
</a>
46
);
docs/docs/05-reusable-components.ko-KR.md
+1
-1
@@ -139,7 +139,7 @@ var MyComponent = React.createClass({
139
140
## 믹스인
141
142
-컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](http://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다.
142
+컴포넌트는 React에서 코드를 재사용할 수 있는 최고의 방법이지만, 가끔 아주 다른 컴포넌트에서 공통 기능이 필요한 때도 있습니다. 이런 상황을 [공통된 관심사(cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern)라 부르며, React에서는 `mixins`으로 이 문제를 해결합니다.
143
144
예를 들어, 컴포넌트가 주기적으로 업데이트되길 원할 경우가 있습니다. `setInterval()`을 사용하면 쉽지만, 필요 없어지면 메모리를 아끼기 위해 주기를 꼭 취소해야 합니다. React는 컴포넌트가 막 생성거나 없어질 때를 [생명주기 메소드](/react/docs/working-with-the-browser-ko-KR.html#component-lifecycle)를 통해 알려줍니다. 이런 메소드들을 사용해서 컴포넌트가 사라질 때 자동으로 정리해주는 `setInterval()`를 제공해주는 간단한 믹스인을 만들어보겠습니다.
145
docs/docs/05-reusable-components.md
+1
-1
@@ -142,7 +142,7 @@ var MyComponent = React.createClass({
142
143
## Mixins
144
145
-Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](http://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
145
+Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
146
147
One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/react/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
148
docs/docs/05-reusable-components.zh-CN.md
+1
-1
@@ -137,7 +137,7 @@ var MyComponent = React.createClass({
137
138
## Mixins
139
140
-组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](http://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。
140
+组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](https://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。
141
142
一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法](/react/docs/working-with-the-browser.html#component-lifecycle) 来告知组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。
143
docs/docs/06-transferring-props.ko-KR.md
+2
-2
@@ -51,7 +51,7 @@ React.render(
51
52
> 주의:
53
>
54
-> 아래의 예제에서는 실험적인 ES7 문법이 사용되었기 때문에 `--harmony ` 플래그가 필요합니다. 브라우저에서 JSX 변환기를 사용 중이라면, `<script type="text/jsx;harmony=true">`를 사용해 스크립트를 작성하세요. 자세히 알아보려면 아래의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](http://facebook.github.io/react/docs/transferring-props-ko-KR.html#rest-and-spread-properties-...)를 확인하세요.
54
+> 아래의 예제에서는 실험적인 ES7 문법이 사용되었기 때문에 `--harmony ` 플래그가 필요합니다. 브라우저에서 JSX 변환기를 사용 중이라면, `<script type="text/jsx;harmony=true">`를 사용해 스크립트를 작성하세요. 자세히 알아보려면 아래의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](/react/docs/transferring-props-ko-KR.html#rest-and-spread-properties-...)를 확인하세요.
55
56
때로는 모든 프로퍼티를 일일이 전달 하는것은 지루하고 덧없는 작업입니다. 이 경우 [구조 해체 할당(destructuring assignment)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 다른 프로퍼티를 함께 사용해 미상의 프로퍼티를 추출할 수 있습니다.
57
@@ -144,7 +144,7 @@ z; // { a: 3, b: 4 }
144
145
> 주의:
146
>
147
-> 실험적인 ES7 구문을 활성화하려면 [JSX 커맨드라인 도구](http://npmjs.org/package/react-tools)를 `--harmony` 플래그와 함께 사용하세요.
147
+> 실험적인 ES7 구문을 활성화하려면 [JSX 커맨드라인 도구](https://www.npmjs.com/package/react-tools)를 `--harmony` 플래그와 함께 사용하세요.
148
149
## Underscore로 전달 다루기
150
docs/docs/06-transferring-props.md
+2
-2
@@ -51,7 +51,7 @@ But what about the `name` prop? Or the `title` prop? Or `onMouseOver`?
51
52
> NOTE:
53
>
54
-> In the example below, the `--harmony ` flag is required as this syntax is an experimental ES7 syntax. If using the in-browser JSX transformer, simply open your script with `<script type="text/jsx;harmony=true">`. See the [Rest and Spread Properties ...](http://facebook.github.io/react/docs/transferring-props.html#rest-and-spread-properties-...) section below for more details.
54
+> In the example below, the `--harmony ` flag is required as this syntax is an experimental ES7 syntax. If using the in-browser JSX transformer, simply open your script with `<script type="text/jsx;harmony=true">`. See the [Rest and Spread Properties ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) section below for more details.
55
56
Sometimes it's fragile and tedious to pass every property along. In that case you can use [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) with rest properties to extract a set of unknown properties.
57
@@ -143,7 +143,7 @@ z; // { a: 3, b: 4 }
143
144
> Note:
145
>
146
-> Use the [JSX command-line tool](http://npmjs.org/package/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.
146
+> Use the [JSX command-line tool](https://www.npmjs.com/package/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.
147
148
## Transferring with Underscore
149
docs/docs/06-transferring-props.zh-CN.md
+1
-1
@@ -143,7 +143,7 @@ z; // { a: 3, b: 4 }
143
144
> 注意:
145
>
146
-> 使用 [JSX 命令行工具](http://npmjs.org/package/react-tools) 配合 `--harmony` 标记来启用 ES7 语法。
146
+> 使用 [JSX 命令行工具](https://www.npmjs.com/package/react-tools) 配合 `--harmony` 标记来启用 ES7 语法。
147
148
149
## 使用 Underscore 来传递
docs/docs/09-tooling-integration.ko-KR.md
+1
-1
@@ -32,7 +32,7 @@ JSX를 사용하신다면, [다운로드 페이지](/react/downloads.html)에서
32
33
### 상용화하기: 미리 컴파일된 JSX
34
35
-[npm](http://npmjs.org/) 모듈을 가지고 있다면, 간단히 `npm install -g react-tools`를 실행해 커맨드 라인 `jsx` 툴을 설치할 수 있습니다. 이 툴은 JSX 구문을 일반적인 JavaScript파일로 변환해 브라우져에서 바로 실행할 수 있도록 합니다. 디렉터리를 감시해 파일이 변경되었을 때 자동으로 변환하도록 할 수도 있습니다. 예를 들면 `jsx --watch src/ build/` 이렇게요.
35
+[npm](https://www.npmjs.com/) 모듈을 가지고 있다면, 간단히 `npm install -g react-tools`를 실행해 커맨드 라인 `jsx` 툴을 설치할 수 있습니다. 이 툴은 JSX 구문을 일반적인 JavaScript파일로 변환해 브라우져에서 바로 실행할 수 있도록 합니다. 디렉터리를 감시해 파일이 변경되었을 때 자동으로 변환하도록 할 수도 있습니다. 예를 들면 `jsx --watch src/ build/` 이렇게요.
36
37
기본적으로는 JSX 파일들은 `.js` 확장자로 변환됩니다. `jsx --extension jsx src/ build/`를 사용해 `.jsx` 확장자로 파일들을 변환할 수 있습니다.
38
docs/docs/09-tooling-integration.md
+1
-1
@@ -32,7 +32,7 @@ If you like using JSX, we provide an in-browser JSX transformer for development
32
33
### Productionizing: Precompiled JSX
34
35
-If you have [npm](http://npmjs.org/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `jsx --watch src/ build/`.
35
+If you have [npm](https://www.npmjs.com/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `jsx --watch src/ build/`.
36
37
By default JSX files with a `.js` extension are transformed. Use `jsx --extension jsx src/ build/` to transform files with a `.jsx` extension.
38
docs/docs/10.2-form-input-binding-sugar.md
+1
-1
@@ -12,7 +12,7 @@ next: test-utils.html
12
>
13
> If you're new to the framework, note that `ReactLink` is not needed for most applications and should be used cautiously.
14
15
-In React, data flows one way: from owner to child. This is because data only flows one direction in [the Von Neumann model of computing](http://en.wikipedia.org/wiki/Von_Neumann_architecture). You can think of it as "one-way data binding."
15
+In React, data flows one way: from owner to child. This is because data only flows one direction in [the Von Neumann model of computing](https://en.wikipedia.org/wiki/Von_Neumann_architecture). You can think of it as "one-way data binding."
16
17
However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.
18
docs/docs/10.4-test-utils.ko-KR.md
+1
-1
@@ -6,7 +6,7 @@ prev: two-way-binding-helpers-ko-KR.html
6
next: clone-with-props-ko-KR.html
7
---
8
9
-`React.addons.TestUtils`는 선택한 테스트 프레임워크(React는 [Jest](http://facebook.github.io/jest/)를 사용)에서 React 컴포넌트를 테스트하기 쉽게 합니다.
9
+`React.addons.TestUtils`는 선택한 테스트 프레임워크(React는 [Jest](https://facebook.github.io/jest/)를 사용)에서 React 컴포넌트를 테스트하기 쉽게 합니다.
10
11
### Simulate
12
docs/docs/10.4-test-utils.md
+1
-1
@@ -6,7 +6,7 @@ prev: two-way-binding-helpers.html
6
next: clone-with-props.html
7
---
8
9
-`React.addons.TestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](http://facebook.github.io/jest/)).
9
+`React.addons.TestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jest](https://facebook.github.io/jest/)).
10
11
### Simulate
12
docs/docs/10.8-pure-render-mixin.ko-KR.md
+1
-1
@@ -25,6 +25,6 @@ React.createClass({
25
26
> 주의:
27
>
28
-> 여기서는 객체에 대한 얕은(shallow) 비교만 합니다. 복잡한 데이터 구조를 가진 경우에는 깊은 부분의 차이에 대해 잘못된 false를 반환 할 수도 있습니다. 간단한 props와 state를 사용하는 컴포넌트에만 적용하거나 깊은 데이터 구조가 변경 되었을때는 `forceUpdate()`를 사용하세요. 아니면 중첩 데이터의 비교를 빠르고 용이하게 하기 위해 [immutable 객체](http://facebook.github.io/immutable-js/)의 도입을 고려해보세요.
28
+> 여기서는 객체에 대한 얕은(shallow) 비교만 합니다. 복잡한 데이터 구조를 가진 경우에는 깊은 부분의 차이에 대해 잘못된 false를 반환 할 수도 있습니다. 간단한 props와 state를 사용하는 컴포넌트에만 적용하거나 깊은 데이터 구조가 변경 되었을때는 `forceUpdate()`를 사용하세요. 아니면 중첩 데이터의 비교를 빠르고 용이하게 하기 위해 [immutable 객체](https://facebook.github.io/immutable-js/)의 도입을 고려해보세요.
29
>
30
> 또, `shouldComponentUpdate`는 컴포넌트 서브트리의 업데이트를 건너뜁니다. 모든 자식 컴포넌트들도 "pure"한지 확인하세요.
docs/docs/10.8-pure-render-mixin.md
+1
-1
@@ -25,6 +25,6 @@ Under the hood, the mixin implements [shouldComponentUpdate](/react/docs/compone
25
26
> Note:
27
>
28
-> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](http://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
28
+> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
29
>
30
> Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
docs/docs/11-advanced-performance.ko-KR.md
+1
-1
@@ -163,7 +163,7 @@ x === y; // false
163
164
## Immutable-js와 Flux
165
166
-[Flux](http://facebook.github.io/flux/)를 사용한다면 immutable-js를 사용해 stores를 작성해야 합니다. [전체 API](http://facebook.github.io/immutable-js/docs/#/)를 살펴보세요.
166
+[Flux](https://facebook.github.io/flux/)를 사용한다면 immutable-js를 사용해 stores를 작성해야 합니다. [전체 API](https://facebook.github.io/immutable-js/docs/#/)를 살펴보세요.
167
168
Immutable 자료구조를 이용해 스레드를 모델링하는 예제를 살펴봅시다. 먼저 모델링하려는 엔티티마다 `Record`를 정의해야 합니다. Record는 특정 필드들의 값을 유지하기 위한 불변의 컨테이너입니다:
169
docs/docs/11-advanced-performance.md
+3
-3
@@ -9,7 +9,7 @@ One of the first questions people ask when considering React for a project is wh
9
10
## Avoiding reconciling the DOM
11
12
-React makes use of a *virtual DOM*, which is a descriptor of a DOM subtree rendered in the browser. This parallel representation allows React to avoid creating DOM nodes and accessing existing ones, which is slower than operations on JavaScript objects. When a component's props or state change, React decides whether an actual DOM update is necessary by constructing a new virtual DOM and comparing it to the old one. Only in the case they are not equal, will React [reconcile](http://facebook.github.io/react/docs/reconciliation.html) the DOM, applying as few mutations as possible.
12
+React makes use of a *virtual DOM*, which is a descriptor of a DOM subtree rendered in the browser. This parallel representation allows React to avoid creating DOM nodes and accessing existing ones, which is slower than operations on JavaScript objects. When a component's props or state change, React decides whether an actual DOM update is necessary by constructing a new virtual DOM and comparing it to the old one. Only in the case they are not equal, will React [reconcile](/react/docs/reconciliation.html) the DOM, applying as few mutations as possible.
13
14
On top of this, React provides a component lifecycle function, `shouldComponentUpdate`, which is triggered before the re-rendering process starts (virtual DOM comparison and possible eventual DOM reconciliation), giving the developer the ability to short circuit this process. The default implementation of this function returns `true`, leaving React to perform the update:
15
@@ -67,7 +67,7 @@ shouldComponentUpdate: function(nextProps, nextState) {
67
}
68
```
69
70
-So far so good, dealing with such simple props/state structures is easy. We could even generalize an implementation based on shallow equality and mix it into components. In fact, React already provides such implementation: [PureRenderMixin](http://facebook.github.io/react/docs/pure-render-mixin.html).
70
+So far so good, dealing with such simple props/state structures is easy. We could even generalize an implementation based on shallow equality and mix it into components. In fact, React already provides such implementation: [PureRenderMixin](/react/docs/pure-render-mixin.html).
71
72
But what if your components' props or state are mutable data structures?. Say the prop the component receives, instead of being a string like `'bar'`, is a Javascript object that contains a string such as, `{ foo: 'bar' }`:
73
@@ -165,7 +165,7 @@ So, Immutable data structures provides you a cheap and less verbose way to track
165
166
## Immutable-js and Flux
167
168
-If you're using [Flux](http://facebook.github.io/flux/), you should start writing your stores using immutable-js. Take a look at the [full API](http://facebook.github.io/immutable-js/docs/#/).
168
+If you're using [Flux](https://facebook.github.io/flux/), you should start writing your stores using immutable-js. Take a look at the [full API](https://facebook.github.io/immutable-js/docs/#/).
169
170
Let's see one possible way to model the thread example using Immutable data structures. First, we need to define a `Record` for each of the entities we're trying to model. Records are just immutable containers that hold values for a specific set of fields:
171
docs/docs/conferences.ko-KR.md
+2
-2
@@ -9,9 +9,9 @@ next: videos-ko-KR.html
9
### React.js Conf 2015
10
1월 28일 & 29일
11
12
-[웹사이트](http://conf.reactjs.com/) - [스케줄](http://conf.reactjs.com/schedule.html) - [비디오들](https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
12
+[웹사이트](http://conf.reactjs.com/) - [스케줄](http://conf.reactjs.com/schedule.html) - [비디오들](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
13
14
-<iframe width="650" height="315" src="//www.youtube.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
14
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
15
16
### ReactEurope 2015
17
7월 2일 & 3일
docs/docs/conferences.md
+2
-2
@@ -9,9 +9,9 @@ next: videos.html
9
### React.js Conf 2015
10
January 28 & 29
11
12
-[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
12
+[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
13
14
-<iframe width="650" height="315" src="//www.youtube.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
14
+<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
15
16
### ReactEurope 2015
17
July 2 & 3
docs/docs/flux-overview.ko-KR.md
+1
-1
@@ -4,4 +4,4 @@ title: Flux 애플리케이션 아키텍쳐
4
permalink: flux-overview-ko-KR.html
5
---
6
7
-이 페이지는 Flux 웹사이트로 이동되었습니다. [거기서 보세요](http://facebook.github.io/flux/docs/overview.html).
7
+이 페이지는 Flux 웹사이트로 이동되었습니다. [거기서 보세요](https://facebook.github.io/flux/docs/overview.html).
docs/docs/flux-overview.md
+1
-1
@@ -4,4 +4,4 @@ title: Flux Application Architecture
4
permalink: flux-overview.html
5
---
6
7
-This page has been moved to the Flux website. [View it there](http://facebook.github.io/flux/docs/overview.html).
7
+This page has been moved to the Flux website. [View it there](https://facebook.github.io/flux/docs/overview.html).
docs/docs/flux-overview.zh-CN.md
+1
-1
@@ -4,4 +4,4 @@ title: Flux 应用架构
4
permalink: flux-overview-zh-CN.html
5
---
6
7
-本页被移到了 Flux 网站。[点击访问](http://facebook.github.io/flux/docs/overview.html)。
7
+本页被移到了 Flux 网站。[点击访问](https://facebook.github.io/flux/docs/overview.html)。
docs/docs/flux-todo-list.ko-KR.md
+1
-1
@@ -4,4 +4,4 @@ title: Flux TodoMVC 튜토리얼
4
permalink: flux-todo-list-ko-KR.html
5
---
6
7
-이 페이지는 Flux 웹사이트로 이동되었습니다. [거기서 보세요](http://facebook.github.io/flux/docs/todo-list.html).
7
+이 페이지는 Flux 웹사이트로 이동되었습니다. [거기서 보세요](https://facebook.github.io/flux/docs/todo-list.html).
docs/docs/flux-todo-list.md
+1
-1
@@ -4,4 +4,4 @@ title: Flux TodoMVC Tutorial
4
permalink: flux-todo-list.html
5
---
6
7
-This page has been moved to the Flux website. [View it there](http://facebook.github.io/flux/docs/todo-list.html).
7
+This page has been moved to the Flux website. [View it there](https://facebook.github.io/flux/docs/todo-list.html).
docs/docs/flux-todo-list.zh-CN.md
+1
-1
@@ -4,4 +4,4 @@ title: Flux TodoMVC 教程
4
permalink: flux-todo-list-zh-CN.html
5
---
6
7
-本页被移到了 Flux 网站。[点击访问](http://facebook.github.io/flux/docs/todo-list.html)。
7
+本页被移到了 Flux 网站。[点击访问](https://facebook.github.io/flux/docs/todo-list.html)。
docs/docs/getting-started.ja-JP.md
+4
-4
@@ -9,8 +9,8 @@ redirect_from: "docs/index-ja-JP.html"
9
10
React でのハッキングを始めるにあたり、一番簡単なものとして次の JSFiddle で動いている Hello World の例を取り上げます。
11
12
- * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
13
- * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
12
+ * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
13
+ * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
14
15
## スターターキット
16
@@ -63,7 +63,7 @@ React.render(
63
64
### オフラインでの変換
65
66
-まずはコマンドラインツールをインストールしましょう（[npm](http://npmjs.org/) が必要です）。
66
+まずはコマンドラインツールをインストールしましょう（[npm](https://www.npmjs.com/) が必要です）。
67
68
```
69
npm install -g react-tools
@@ -105,7 +105,7 @@ React.render(
105
106
## CommonJS を使うには
107
108
-React を [browserify](http://browserify.org/) や [webpack](http://webpack.github.io/)、または CommonJS 準拠の他のモジュールシステムと一緒に使いたい場合、 [`react` npm package](https://www.npmjs.org/package/react) を使ってみてください。また、`jsx` ビルドツールをパッケージングシステム（CommonJS に限らず）に導入することも非常に簡単です。
108
+React を [browserify](http://browserify.org/) や [webpack](https://webpack.github.io/)、または CommonJS 準拠の他のモジュールシステムと一緒に使いたい場合、 [`react` npm package](https://www.npmjs.com/package/react) を使ってみてください。また、`jsx` ビルドツールをパッケージングシステム（CommonJS に限らず）に導入することも非常に簡単です。
109
110
## 次にすること
111
docs/docs/getting-started.ko-KR.md
+4
-4
@@ -10,8 +10,8 @@ redirect_from: "docs/index-ko-KR.html"
10
11
React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예제를 따라 해 보는 것입니다.
12
13
- * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
14
- * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
13
+ * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
14
+ * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
15
16
## 초심자용 키트
17
@@ -65,7 +65,7 @@ React.render(
65
66
### 오프라인 변환
67
68
-먼저 커맨드라인 도구를 설치합니다. ([npm](http://npmjs.org/) 필요):
68
+먼저 커맨드라인 도구를 설치합니다. ([npm](https://www.npmjs.com/) 필요):
69
70
```
71
npm install -g react-tools
@@ -105,7 +105,7 @@ React.render(
105
106
## CommonJS를 원하시나요?
107
108
-만약 React를 [browserify](http://browserify.org/), [webpack](http://webpack.github.io/)이나 기타 CommonJS와 호환되는 모듈시스템과 함께 사용하고 싶다면, [`react` npm 패키지](https://www.npmjs.org/package/react)를 사용하세요. 그 외에도 `jsx` 빌드툴은 아주 쉽게 CommonJS 외에도 대부분의 패키징 시스템에 통합될 수 있습니다.
108
+만약 React를 [browserify](http://browserify.org/), [webpack](https://webpack.github.io/)이나 기타 CommonJS와 호환되는 모듈시스템과 함께 사용하고 싶다면, [`react` npm 패키지](https://www.npmjs.com/package/react)를 사용하세요. 그 외에도 `jsx` 빌드툴은 아주 쉽게 CommonJS 외에도 대부분의 패키징 시스템에 통합될 수 있습니다.
109
110
## 다음 단계로
111
docs/docs/getting-started.md
+4
-4
@@ -9,8 +9,8 @@ redirect_from: "docs/index.html"
9
10
The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
11
12
- * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
13
- * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
12
+ * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
13
+ * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
14
15
## Starter Kit
16
@@ -64,7 +64,7 @@ Then reference it from `helloworld.html`:
64
65
### Offline Transform
66
67
-First install the command-line tools (requires [npm](http://npmjs.org/)):
67
+First install the command-line tools (requires [npm](https://www.npmjs.com/)):
68
69
```
70
npm install -g react-tools
@@ -106,7 +106,7 @@ Update your HTML file as below:
106
107
## Want CommonJS?
108
109
-If you want to use React with [browserify](http://browserify.org/), [webpack](http://webpack.github.io/), or another CommonJS-compatible module system, just use the [`react` npm package](https://www.npmjs.org/package/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.
109
+If you want to use React with [browserify](http://browserify.org/), [webpack](https://webpack.github.io/), or another CommonJS-compatible module system, just use the [`react` npm package](https://www.npmjs.com/package/react). In addition, the `jsx` build tool can be integrated into most packaging systems (not just CommonJS) quite easily.
110
111
## Next Steps
112
docs/docs/getting-started.zh-CN.md
+4
-4
@@ -10,8 +10,8 @@ redirect_from: "docs/index-zh-CN.html"
10
11
开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds：
12
13
- * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
14
- * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
13
+ * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
14
+ * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
15
16
## 入门教程包 (Starter Kit)
17
@@ -65,7 +65,7 @@ React.render(
65
66
### 离线转换
67
68
-先安装命令行工具（依赖 [npm](http://npmjs.org/)）：
68
+先安装命令行工具（依赖 [npm](https://www.npmjs.com/)）：
69
70
```
71
npm install -g react-tools
@@ -107,7 +107,7 @@ React.render(
107
108
## 想用 CommonJS？
109
110
-如果你想在 [browserify](http://browserify.org/)，[webpack](http://webpack.github.io/) 或者或其它兼容CommonJS的模块系统里使用 React，只要使用 [`react` npm 包](https://www.npmjs.org/package/react) 即可。而且，`jsx` 转换工具可以很轻松的地集成到大部分打包系统里（不仅仅是 CommonJS）。
110
+如果你想在 [browserify](http://browserify.org/)，[webpack](https://webpack.github.io/) 或者或其它兼容CommonJS的模块系统里使用 React，只要使用 [`react` npm 包](https://www.npmjs.com/package/react) 即可。而且，`jsx` 转换工具可以很轻松的地集成到大部分打包系统里（不仅仅是 CommonJS）。
111
112
113
## 下一步
docs/docs/ref-08-reconciliation.ko-KR.md
+1
-1
@@ -103,7 +103,7 @@ renderB: <div><span>second</span><span>first</span></div>
103
=> [replaceAttribute textContent 'second'], [insertNode <span>first</span>]
104
```
105
106
-원소의 목록을 변환하기 위한 최소 연산 집합을 찾는 알고리즘이 여럿 있습니다. [Levenshtein distance](http://en.wikipedia.org/wiki/Levenshtein_distance)를 사용하면 O(n<sup>2</sup>) 복잡도로 원소 한 개의 삽입, 삭제, 교체를 위해 필요한 최솟값을 찾을 수 있습니다. Levenshtein 알고리즘을 사용해도 노드가 다른 위치로 이동한 경우는 알아낼 수 없고, 그것을 알아내는 알고리즘은 더욱 높은 복잡도를 가집니다.
106
+원소의 목록을 변환하기 위한 최소 연산 집합을 찾는 알고리즘이 여럿 있습니다. [Levenshtein distance](https://en.wikipedia.org/wiki/Levenshtein_distance)를 사용하면 O(n<sup>2</sup>) 복잡도로 원소 한 개의 삽입, 삭제, 교체를 위해 필요한 최솟값을 찾을 수 있습니다. Levenshtein 알고리즘을 사용해도 노드가 다른 위치로 이동한 경우는 알아낼 수 없고, 그것을 알아내는 알고리즘은 더욱 높은 복잡도를 가집니다.
107
108
### 키(keys)
109
docs/docs/ref-08-reconciliation.md
+1
-1
@@ -103,7 +103,7 @@ renderB: <div><span>second</span><span>first</span></div>
103
=> [replaceAttribute textContent 'second'], [insertNode <span>first</span>]
104
```
105
106
-There are many algorithms that attempt to find the minimum sets of operations to transform a list of elements. [Levenshtein distance](http://en.wikipedia.org/wiki/Levenshtein_distance) can find the minimum using single element insertion, deletion and substitution in O(n<sup>2</sup>). Even if we were to use Levenshtein, this doesn't find when a node has moved into another position and algorithms to do that have much worse complexity.
106
+There are many algorithms that attempt to find the minimum sets of operations to transform a list of elements. [Levenshtein distance](https://en.wikipedia.org/wiki/Levenshtein_distance) can find the minimum using single element insertion, deletion and substitution in O(n<sup>2</sup>). Even if we were to use Levenshtein, this doesn't find when a node has moved into another position and algorithms to do that have much worse complexity.
107
108
### Keys
109
docs/docs/thinking-in-react.md
+3
-3
@@ -34,7 +34,7 @@ Our JSON API returns some data that looks like this:
34
35
The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
36
37
-But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](http://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
37
+But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
38
39
Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same *information architecture* which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
40
@@ -70,11 +70,11 @@ You can build top-down or bottom-up. That is, you can either start with building
70
71
At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `React.render()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.
72
73
-Simply refer to the [React docs](http://facebook.github.io/react/docs/) if you need help executing this step.
73
+Simply refer to the [React docs](/react/docs/) if you need help executing this step.
74
75
### A brief interlude: props vs state
76
77
-There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
77
+There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
78
79
## Step 3: Identify the minimal (but complete) representation of UI state
80
docs/docs/tutorial.ko-KR.md
+5
-5
@@ -39,8 +39,8 @@ next: thinking-in-react-ko-KR.html
39
<html>
40
<head>
41
<title>Hello React</title>
42
- <script src="http://fb.me/react-{{site.react_version}}.js"></script>
43
- <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
42
+ <script src="https://fb.me/react-{{site.react_version}}.js"></script>
43
+ <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
44
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
45
</head>
46
<body>
@@ -220,9 +220,9 @@ Markdown은 텍스트를 포맷팅하는 간단한 방식입니다. 예를 들
220
<!-- index.html -->
221
<head>
222
<title>Hello React</title>
223
- <script src="http://fb.me/react-{{site.react_version}}.js"></script>
224
- <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
225
- <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
223
+ <script src="https://fb.me/react-{{site.react_version}}.js"></script>
224
+ <script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
225
+ <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
226
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
227
</head>
228
```
docs/docs/videos.ko-KR.md
+12
-12
@@ -8,7 +8,7 @@ next: complementary-tools-ko-KR.html
8
9
### Rethinking best practices - JSConf.eu
10
11
-<iframe width="650" height="366" src="https://www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
11
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
12
13
"페이스북과 인스타그램에서, 우리는 React 를 이용해 웹에서 벌어질 수 있는 한계를 뛰어넘으려 노력하고 있습니다. 저는 프레임워크에 대한 짤막한 소개로 시작해서, 논쟁이 벌어질 수 있는 다음의 세가지 주제로 넘어갈겁니다. 템플릿의 개념을 버리고 Javascript 를 이용해 View 를 구축하기, 자료가 변할때 전체 어플리케이션을 다시 그리기(“re-rendering”), 그리고 DOM과 events의 경량화된 구현 입니다." -- [Pete Hunt](http://www.petehunt.net/)
14
@@ -23,7 +23,7 @@ next: complementary-tools-ko-KR.html
23
24
### Secrets of the Virtual DOM - MtnWest JS
25
26
-<iframe width="650" height="366" src="https://www.youtube.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
26
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
27
28
"이번에는 왜 우리가 virtual DOM을 만들었는지, 이것이 다른 시스템들과는 어떻게 다른지, 그리고 브라우져 기술들의 미래와 어떻게 관련이 있는지에 대해서 이야기 해 볼 겁니다." -- [Pete Hunt](http://www.petehunt.net/)
29
@@ -101,14 +101,14 @@ Javascript Jabber 73에서 [Pete Hunt](http://www.petehunt.net/)와 [Jordan Walk
101
102
### Introduction to React.js - Facebook Seattle
103
104
-<iframe width="650" height="366" src="https://www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
104
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
105
106
By [Tom Occhino](http://tomocchino.com/), [Jordan Walke](https://github.com/jordwalke)
107
108
* * *
109
110
### Backbone + React + Middleman Screencast
111
-<iframe width="650" height="488" src="https://www.youtube.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
111
+<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
112
113
Backbone은 React로 REST API를 제공하기 위한 아주 좋은 방법입니다. 이 화면중개는 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)을 이용해서 어떻게 이 두가지를 병합하는지 보여줍니다. Middleman은 이 예제에서 사용되는 프레임워크이지만, 쉽게 다른 프레임워크로 대체하실 수 있습니다. 지원되는 템플릿은 [이곳](https://github.com/jbhatab/middleman-backbone-react-template)에서 찾으실 수 있습니다. -- [열린 마음의 혁명들](http://www.openmindedinnovations.com/)
114
@@ -116,7 +116,7 @@ Backbone은 React로 REST API를 제공하기 위한 아주 좋은 방법입니
116
117
### Developing User Interfaces With React - Super VanJS
118
119
-<iframe width="650" height="366" src="https://www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
119
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
120
121
By [Steven Luscher](https://github.com/steveluscher)
122
@@ -124,7 +124,7 @@ By [Steven Luscher](https://github.com/steveluscher)
124
125
### Introduction to React - LAWebSpeed meetup
126
127
-<iframe width="650" height="366" src="https://www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
127
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
128
129
by [Stoyan Stefanov](http://www.phpied.com/)
130
@@ -132,7 +132,7 @@ by [Stoyan Stefanov](http://www.phpied.com/)
132
133
### React, or how to make life simpler - FrontEnd Dev Conf '14
134
135
-<iframe width="560" height="366" src="https://www.youtube.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
135
+<iframe width="560" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
136
137
**러시아어** by [Alexander Solovyov](http://solovyov.net/)
138
@@ -140,21 +140,21 @@ by [Stoyan Stefanov](http://www.phpied.com/)
140
141
### "Functional DOM programming" - Meteor DevShop 11
142
143
-<iframe width="650" height="366" src="https://www.youtube.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
143
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
144
145
* * *
146
147
### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014
148
149
-<iframe width="650" height="366" src="https://www.youtube.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
149
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
150
151
* * *
152
153
### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014
154
155
-<iframe width="650" height="366" src="https://www.youtube.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
155
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
156
157
-Facebook 개발자 [Bill Fisher](http://twitter.com/fisherwebdev)와 [Jing Chen](http://twitter.com/jingc)가 Flux 와 React 에 대해서 이야기합니다. 그리고 어떻게 단일 방향의 자료흐름을 사용하는 어플리케이션 구조가 방대한 코드를 정리하는지에 대해서 이야기합니다."
157
+Facebook 개발자 [Bill Fisher](https://twitter.com/fisherwebdev)와 [Jing Chen](https://twitter.com/jingc)가 Flux 와 React 에 대해서 이야기합니다. 그리고 어떻게 단일 방향의 자료흐름을 사용하는 어플리케이션 구조가 방대한 코드를 정리하는지에 대해서 이야기합니다."
158
159
* * *
160
@@ -169,6 +169,6 @@ Server-side rendering을 위해 [SoundCloud](https://developers.soundcloud.com/b
169
170
### Introducing React Native (+Playlist) - React.js Conf 2015
171
172
-<iframe width="650" height="366" src="https://www.youtube.com/watch?v=KVZ-P-ZI6W4&index=1&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
172
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/watch?v=KVZ-P-ZI6W4&index=1&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
173
174
2015년에 [Tom Occhino](https://twitter.com/tomocchino)님이 React의 과거와 현재를 리뷰하고 나아갈 방향을 제시했습니다.
docs/docs/videos.md
+12
-12
@@ -8,7 +8,7 @@ next: complementary-tools.html
8
9
### Rethinking best practices - JSConf.eu
10
11
-<iframe width="650" height="366" src="https://www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
11
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
12
13
"At Facebook and Instagram, we’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events." -- [Pete Hunt](http://www.petehunt.net/)
14
@@ -23,7 +23,7 @@ A [tagtree.tv](http://tagtree.tv/) video conveying the principles of [Thinking i
23
24
### Secrets of the Virtual DOM - MtnWest JS
25
26
-<iframe width="650" height="366" src="https://www.youtube.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
26
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
27
28
"In this talk I’ll be discussing why we built a virtual DOM, how it compares to other systems, and its relevance to the future of browser technologies." -- [Pete Hunt](http://www.petehunt.net/)
29
@@ -99,14 +99,14 @@ A [tagtree.tv](http://tagtree.tv/) video conveying the principles of [Thinking i
99
100
### Introduction to React.js - Facebook Seattle
101
102
-<iframe width="650" height="366" src="https://www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
102
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
103
104
By [Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke)
105
106
* * *
107
108
### Backbone + React + Middleman Screencast
109
-<iframe width="650" height="488" src="https://www.youtube.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
109
+<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
110
111
Backbone is a great way in interface a REST API with React. This screencast shows how to integate the two using [Backbone-React-Component](https://github.com/magalhas/backbone-react-component). Middleman is the framework used in this example but could easily be replaced with other frameworks. A supported template of this can be found [here](https://github.com/jbhatab/middleman-backbone-react-template). -- [Open Minded Innovations](http://www.openmindedinnovations.com/)
112
@@ -114,7 +114,7 @@ Backbone is a great way in interface a REST API with React. This screencast show
114
115
### Developing User Interfaces With React - Super VanJS
116
117
-<iframe width="650" height="366" src="https://www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
117
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
118
119
By [Steven Luscher](https://github.com/steveluscher)
120
@@ -122,7 +122,7 @@ By [Steven Luscher](https://github.com/steveluscher)
122
123
### Introduction to React - LAWebSpeed meetup
124
125
-<iframe width="650" height="366" src="https://www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
125
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
126
127
by [Stoyan Stefanov](http://www.phpied.com/)
128
@@ -130,7 +130,7 @@ by [Stoyan Stefanov](http://www.phpied.com/)
130
131
### React, or how to make life simpler - FrontEnd Dev Conf '14
132
133
-<iframe width="650" height="366" src="https://www.youtube.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
133
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
134
135
**In Russian** by [Alexander Solovyov](http://solovyov.net/)
136
@@ -138,21 +138,21 @@ by [Stoyan Stefanov](http://www.phpied.com/)
138
139
### "Functional DOM programming" - Meteor DevShop 11
140
141
-<iframe width="650" height="366" src="https://www.youtube.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
141
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
142
143
* * *
144
145
### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014
146
147
-<iframe width="650" height="366" src="https://www.youtube.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
147
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
148
149
* * *
150
151
### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014
152
153
-<iframe width="650" height="366" src="https://www.youtube.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
153
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
154
155
-Facebook engineers [Bill Fisher](http://twitter.com/fisherwebdev) and [Jing Chen](http://twitter.com/jingc) talk about Flux and React, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.
155
+Facebook engineers [Bill Fisher](https://twitter.com/fisherwebdev) and [Jing Chen](https://twitter.com/jingc) talk about Flux and React, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.
156
157
* * *
158
@@ -168,6 +168,6 @@ Walk-through by [Andres Suarez](https://github.com/zertosh) on how [SoundCloud](
168
169
### Introducing React Native (+Playlist) - React.js Conf 2015
170
171
-<iframe width="650" height="366" src="https://www.youtube.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
171
+<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
172
173
[Tom Occhino](https://twitter.com/tomocchino) reviews the past and present of React in 2015, and teases where it's going next.
docs/downloads.md
+11
-11
@@ -20,42 +20,42 @@ If you're just starting out, make sure to use the development version.
20
21
## Individual Downloads
22
23
-#### <a href="http://fb.me/react-{{site.react_version}}.js">React {{site.react_version}} (development)</a>
23
+#### <a href="https://fb.me/react-{{site.react_version}}.js">React {{site.react_version}} (development)</a>
24
The uncompressed, development version of React core with inline documentation.
25
26
```html
27
-<script src="http://fb.me/react-{{site.react_version}}.js"></script>
27
+<script src="https://fb.me/react-{{site.react_version}}.js"></script>
28
```
29
30
-#### <a href="http://fb.me/react-{{site.react_version}}.min.js">React {{site.react_version}} (production)</a>
30
+#### <a href="https://fb.me/react-{{site.react_version}}.min.js">React {{site.react_version}} (production)</a>
31
The compressed, production version of React core.
32
33
```html
34
-<script src="http://fb.me/react-{{site.react_version}}.min.js"></script>
34
+<script src="https://fb.me/react-{{site.react_version}}.min.js"></script>
35
```
36
37
-#### <a href="http://fb.me/react-with-addons-{{site.react_version}}.js">React with Add-Ons {{site.react_version}} (development)</a>
37
+#### <a href="https://fb.me/react-with-addons-{{site.react_version}}.js">React with Add-Ons {{site.react_version}} (development)</a>
38
The uncompressed, development version of React with [add-ons](/react/docs/addons.html).
39
40
```html
41
-<script src="http://fb.me/react-with-addons-{{site.react_version}}.js"></script>
41
+<script src="https://fb.me/react-with-addons-{{site.react_version}}.js"></script>
42
```
43
44
-#### <a href="http://fb.me/react-with-addons-{{site.react_version}}.min.js">React with Add-Ons {{site.react_version}} (production)</a>
44
+#### <a href="https://fb.me/react-with-addons-{{site.react_version}}.min.js">React with Add-Ons {{site.react_version}} (production)</a>
45
The compressed, production version of React with [add-ons](/react/docs/addons.html).
46
47
```html
48
-<script src="http://fb.me/react-with-addons-{{site.react_version}}.min.js"></script>
48
+<script src="https://fb.me/react-with-addons-{{site.react_version}}.min.js"></script>
49
```
50
51
-#### <a href="http://fb.me/JSXTransformer-{{site.react_version}}.js">JSX Transformer</a>
51
+#### <a href="https://fb.me/JSXTransformer-{{site.react_version}}.js">JSX Transformer</a>
52
The JSX transformer used to support [XML syntax](/react/docs/jsx-in-depth.html) in JavaScript.
53
54
```html
55
-<script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
55
+<script src="https://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
56
```
57
58
-All scripts are also available via [CDNJS](http://cdnjs.com/libraries/react/).
58
+All scripts are also available via [CDNJS](https://cdnjs.com/libraries/react/).
59
60
## npm
61
docs/img/blog/gpu-cursor-move.gif
Binary files /dev/null and b/docs/img/blog/gpu-cursor-move.gif differ
docs/index.md
+1
-1
@@ -17,7 +17,7 @@ id: home
17
<div class="marketing-col">
18
<h3>Virtual DOM</h3>
19
<p>
20
- React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using <a href="http://facebook.github.io/react-native/">React Native</a>.
20
+ React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using <a href="https://facebook.github.io/react-native/">React Native</a>.
21
</p>
22
</div>
23
<div class="marketing-col">
docs/support.md
+1
-1
@@ -12,7 +12,7 @@ Many members of the community use Stack Overflow to ask questions. Read through
12
13
## Google Groups mailing list
14
15
-<a href="http://groups.google.com/group/reactjs" target="_blank">The **reactjs** Google Group</a> is also a good place to ask questions and find answers.
15
+<a href="https://groups.google.com/group/reactjs" target="_blank">The **reactjs** Google Group</a> is also a good place to ask questions and find answers.
16
17
## IRC
18
docs/tips/01-introduction.ko-KR.md
+1
-1
@@ -10,4 +10,4 @@ React 팁 섹션에서는 여러 궁금증을 해결해주고 흔히 하는 실
10
11
## 기여하기
12
13
-[현재 팁](https://github.com/facebook/react/tree/master/docs)의 형식을 따르는 풀 리퀘스트를 [React 저장소](https://github.com/facebook/react)에 보내주세요. PR을 보내기 전에 리뷰가 필요하다면 [freenode의 #reactjs 채널](irc://chat.freenode.net/reactjs)이나 [reactjs Google 그룹](http://groups.google.com/group/reactjs)에서 도움을 요청하실 수 있습니다.
13
+[현재 팁](https://github.com/facebook/react/tree/master/docs)의 형식을 따르는 풀 리퀘스트를 [React 저장소](https://github.com/facebook/react)에 보내주세요. PR을 보내기 전에 리뷰가 필요하다면 [freenode의 #reactjs 채널](irc://chat.freenode.net/reactjs)이나 [reactjs Google 그룹](https://groups.google.com/group/reactjs)에서 도움을 요청하실 수 있습니다.
docs/tips/01-introduction.md
+1
-1
@@ -10,4 +10,4 @@ The React tips section provides bite-sized information that can answer lots of q
10
11
## Contributing
12
13
-Submit a pull request to the [React repository](https://github.com/facebook/react) following the [current tips](https://github.com/facebook/react/tree/master/docs) entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs channel on freenode](irc://chat.freenode.net/reactjs) or the [reactjs Google group](http://groups.google.com/group/reactjs).
13
+Submit a pull request to the [React repository](https://github.com/facebook/react) following the [current tips](https://github.com/facebook/react/tree/master/docs) entries' style. If you have a recipe that needs review prior to submitting a PR you can find help in the [#reactjs channel on freenode](irc://chat.freenode.net/reactjs) or the [reactjs Google group](https://groups.google.com/group/reactjs).
docs/tips/16-references-to-components.ko-KR.md
+1
-1
@@ -25,4 +25,4 @@ var myComponentInstance = React.render(myComponentElement, myContainer);
25
26
> 주의:
27
>
28
-> 이는 최상위 레벨에서만 사용되어야 합니다. 컴포넌트의 내부에서는 `prop`과 `state`가 자식컴포넌트와의 통신을 제어하며, [refs](http://facebook.github.io/react/docs/more-about-refs-ko-KR.html)를 통해서만 컴포넌트를 참조할 수 있습니다.
28
+> 이는 최상위 레벨에서만 사용되어야 합니다. 컴포넌트의 내부에서는 `prop`과 `state`가 자식컴포넌트와의 통신을 제어하며, [refs](/react/docs/more-about-refs-ko-KR.html)를 통해서만 컴포넌트를 참조할 수 있습니다.
docs/tips/16-references-to-components.md
+1
-1
@@ -25,4 +25,4 @@ var myComponentInstance = React.render(myComponentElement, myContainer);
25
26
> Note:
27
>
28
-> This should only ever be used at the top level. Inside components, let your `props` and `state` handle communication with child components, and only reference components via [refs](http://facebook.github.io/react/docs/more-about-refs.html).
28
+> This should only ever be used at the top level. Inside components, let your `props` and `state` handle communication with child components, and only reference components via [refs](/react/docs/more-about-refs.html).
docs/tips/19-dangerously-set-inner-html.ko-KR.md
+1
-1
@@ -6,7 +6,7 @@ permalink: dangerously-set-inner-html-ko-KR.html
6
prev: children-undefined-ko-KR.html
7
---
8
9
-부적절히 `innerHTML`를 사용하면 [사이트 간 스크립팅 (XSS)](http://en.wikipedia.org/wiki/Cross-site_scripting) 공격에 노출됩니다. 화면의 사용자 입력을 정제하다(sanitize) 오류를 내기 쉬우며, 적절하게 사용자의 입력을 정제하지 못하면 인터넷 상 [웹 취약점의 원인](http://owasptop10.googlecode.com/files/OWASP%20Top%2010%20-%202013.pdf)이 됩니다.
9
+부적절히 `innerHTML`를 사용하면 [사이트 간 스크립팅 (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) 공격에 노출됩니다. 화면의 사용자 입력을 정제하다(sanitize) 오류를 내기 쉬우며, 적절하게 사용자의 입력을 정제하지 못하면 인터넷 상 [웹 취약점의 원인](https://owasptop10.googlecode.com/files/OWASP%20Top%2010%20-%202013.pdf)이 됩니다.
10
11
우리 설계철학은 안전을 "쉽게" 얻는 것입니다. 개발자는 그들의 의도를 명시적으로 알려야만 "안전하지 않는" 연산을 할 수 있습니다. `dangerouslySetInnerHTML` prop의 이름은 의도적으로 무섭게 만든 것인데, prop 값은 문자열이 아닌 객체이고 정제된 데이터를 지정하는데 쓸 수 있습니다.
12
docs/tips/19-dangerously-set-inner-html.md
+1
-1
@@ -6,7 +6,7 @@ permalink: dangerously-set-inner-html.html
6
prev: children-undefined.html
7
---
8
9
-Improper use of the `innerHTML` can open you up to a [cross-site scripting (XSS)](http://en.wikipedia.org/wiki/Cross-site_scripting) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the [leading causes of web vulnerabilities](http://owasptop10.googlecode.com/files/OWASP%20Top%2010%20-%202013.pdf) on the internet.
9
+Improper use of the `innerHTML` can open you up to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the [leading causes of web vulnerabilities](https://owasptop10.googlecode.com/files/OWASP%20Top%2010%20-%202013.pdf) on the internet.
10
11
Our design philosophy is that it should be “easy” to make things safe, and developers should explicitly state their intent when performing “unsafe” operations. The prop name `dangerouslySetInnerHTML` is intentionally chosen to be frightening, and the prop value (an object instead of a string) can be used to indicate sanitized data.
12
examples/README.md
+1
-1
@@ -1,5 +1,5 @@
1
# React Examples
2
3
-Here are some small React demos. Some use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) and some include third-party library integration.
3
+Here are some small React demos. Some use [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) and some include third-party library integration.
4
5
For more fully-featured examples, check out [React TodoMVC](http://todomvc.com/examples/react/) and [React + Backbone TodoMVC](http://todomvc.com/examples/react-backbone/).
examples/basic-commonjs/index.html
+2
-2
@@ -10,7 +10,7 @@
10
<div id="container">
11
<p>
12
To install React, follow the instructions on
13
- <a href="http://www.github.com/facebook/react/">GitHub</a>.
13
+ <a href="https://github.com/facebook/react/">GitHub</a>.
14
</p>
15
<p>
16
If you can see this, React is not working right.
@@ -22,7 +22,7 @@
22
<pre>browserify --debug --transform reactify index.js > bundle.js</pre>
23
<p>
24
Learn more about React at
25
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
+ <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26
</p>
27
<script src="../shared/thirdparty/es5-shim.min.js"></script>
28
<script src="../shared/thirdparty/es5-sham.min.js"></script>
examples/basic-jsx-external/index.html
+1
-1
@@ -22,7 +22,7 @@
22
<p>This is written with JSX in a separate file and transformed in the browser.</p>
23
<p>
24
Learn more about React at
25
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
+ <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26
</p>
27
<script src="../shared/thirdparty/es5-shim.min.js"></script>
28
<script src="../shared/thirdparty/es5-sham.min.js"></script>
examples/basic-jsx-harmony/index.html
+2
-2
@@ -10,7 +10,7 @@
10
<div id="container">
11
<p>
12
To install React, follow the instructions on
13
- <a href="http://www.github.com/facebook/react/">GitHub</a>.
13
+ <a href="https://github.com/facebook/react/">GitHub</a>.
14
</p>
15
<p>
16
If you can see this, React is not working right.
@@ -21,7 +21,7 @@
21
<p>This is written with JSX with Harmony (ES6) syntax and transformed in the browser.</p>
22
<p>
23
Learn more about React at
24
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
24
+ <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
<script src="../../build/react.js"></script>
27
<script src="../../build/JSXTransformer.js"></script>
examples/basic-jsx-precompile/index.html
+1
-1
@@ -22,7 +22,7 @@ cd examples/basic-jsx-precompile/
22
jsx . build/</pre>
23
<p>
24
Learn more about React at
25
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
+ <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26
</p>
27
<script src="../shared/thirdparty/es5-shim.min.js"></script>
28
<script src="../shared/thirdparty/es5-sham.min.js"></script>
examples/basic-jsx/index.html
+2
-2
@@ -10,7 +10,7 @@
10
<div id="container">
11
<p>
12
To install React, follow the instructions on
13
- <a href="http://www.github.com/facebook/react/">GitHub</a>.
13
+ <a href="https://github.com/facebook/react/">GitHub</a>.
14
</p>
15
<p>
16
If you can see this, React is not working right.
@@ -21,7 +21,7 @@
21
<p>This is written with JSX and transformed in the browser.</p>
22
<p>
23
Learn more about React at
24
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
24
+ <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
<script src="../shared/thirdparty/es5-shim.min.js"></script>
27
<script src="../shared/thirdparty/es5-sham.min.js"></script>
examples/basic/index.html
+2
-2
@@ -10,7 +10,7 @@
10
<div id="container">
11
<p>
12
To install React, follow the instructions on
13
- <a href="http://www.github.com/facebook/react/">GitHub</a>.
13
+ <a href="https://github.com/facebook/react/">GitHub</a>.
14
</p>
15
<p>
16
If you can see this, React is not working right.
@@ -21,7 +21,7 @@
21
<p>This is written in vanilla JavaScript (without JSX) and transformed in the browser.</p>
22
<p>
23
Learn more about React at
24
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
24
+ <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
<script src="../shared/thirdparty/es5-shim.min.js"></script>
27
<script src="../shared/thirdparty/es5-sham.min.js"></script>
examples/quadratic/index.html
+1
-1
@@ -21,7 +21,7 @@
21
<p>This is written with JSX in a separate file and transformed in the browser.</p>
22
<p>
23
Learn more about React at
24
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
24
+ <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
</p>
26
<script src="../shared/thirdparty/es5-shim.min.js"></script>
27
<script src="../shared/thirdparty/es5-sham.min.js"></script>
examples/transitions/index.html
+2
-2
@@ -11,7 +11,7 @@
11
<div id="container">
12
<p>
13
To install React, follow the instructions on
14
- <a href="http://www.github.com/facebook/react/">GitHub</a>.
14
+ <a href="https://github.com/facebook/react/">GitHub</a>.
15
</p>
16
<p>
17
If you can see this, React is not working right.
@@ -22,7 +22,7 @@
22
<p>This is written with JSX and transformed in the browser.</p>
23
<p>
24
Learn more about React at
25
- <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25
+ <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26
</p>
27
<script src="../shared/thirdparty/es5-shim.min.js"></script>
28
<script src="../shared/thirdparty/es5-sham.min.js"></script>
npm-react-tools/README.md
+1
-1
@@ -1,6 +1,6 @@
1
# react-tools
2
3
-This package compliments the usage of [React](http://facebook.github.io/react/). It ships with tools that are often used in conjunction.
3
+This package compliments the usage of [React](https://facebook.github.io/react/). It ships with tools that are often used in conjunction.
4
5
## JSX
6
npm-react/README.md
+1
-1
@@ -1,6 +1,6 @@
1
# react
2
3
-An npm package to get you immediate access to [React](http://facebook.github.io/react/),
3
+An npm package to get you immediate access to [React](https://facebook.github.io/react/),
4
without also requiring the JSX transformer. This is especially useful for cases where you
5
want to [`browserify`](https://github.com/substack/node-browserify) your module using
6
`React`.
package.json
+1
-1
@@ -8,7 +8,7 @@
8
"transformer",
9
"view"
10
],
11
- "homepage": "http://facebook.github.io/react",
11
+ "homepage": "https://facebook.github.io/react",
12
"bugs": "https://github.com/facebook/react/issues",
13
"license": "BSD-3-Clause",
14
"files": [
src/browser/ui/React.js
+2
-2
@@ -105,7 +105,7 @@ if (__DEV__) {
105
if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
106
console.debug(
107
'Download the React DevTools for a better development experience: ' +
108
- 'http://fb.me/react-devtools'
108
+ 'https://fb.me/react-devtools'
109
);
110
}
111
}
@@ -144,7 +144,7 @@ if (__DEV__) {
144
if (!expectedFeatures[i]) {
145
console.error(
146
'One or more ES5 shim/shams expected by React are not available: ' +
147
- 'http://fb.me/react-warning-polyfills'
147
+ 'https://fb.me/react-warning-polyfills'
148
);
149
break;
150
}
src/browser/ui/ReactDOMComponent.js
+1
-1
@@ -74,7 +74,7 @@ function assertValidProps(component, props) {
74
invariant(
75
props.dangerouslySetInnerHTML.__html != null,
76
'`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
77
- 'Please visit http://fb.me/react-invariant-dangerously-set-inner-html ' +
77
+ 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html ' +
78
'for more information.'
79
);
80
}
src/browser/ui/__tests__/ReactDOMComponent-test.js
+2
-2
@@ -429,7 +429,7 @@ describe('ReactDOMComponent', function() {
429
}).toThrow(
430
'Invariant Violation: ' +
431
'`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
432
- 'Please visit http://fb.me/react-invariant-dangerously-set-inner-html for more information.'
432
+ 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.'
433
);
434
});
435
@@ -439,7 +439,7 @@ describe('ReactDOMComponent', function() {
439
}).toThrow(
440
'Invariant Violation: ' +
441
'`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
442
- 'Please visit http://fb.me/react-invariant-dangerously-set-inner-html for more information.'
442
+ 'Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.'
443
);
444
});
445
src/classic/class/ReactClass.js
+1
-1
@@ -830,7 +830,7 @@ var ReactClass = {
830
warning(
831
this instanceof Constructor,
832
'Something is calling a React component directly. Use a factory or ' +
833
- 'JSX instead. See: http://fb.me/react-legacyfactory'
833
+ 'JSX instead. See: https://fb.me/react-legacyfactory'
834
);
835
}
836
src/classic/class/__tests__/ReactClass-test.js
+1
-1
@@ -374,7 +374,7 @@ describe('ReactClass-spec', function() {
374
expect(console.error.calls.length).toBe(1);
375
expect(console.error.argsForCall[0][0]).toBe(
376
'Warning: Something is calling a React component directly. Use a ' +
377
- 'factory or JSX instead. See: http://fb.me/react-legacyfactory'
377
+ 'factory or JSX instead. See: https://fb.me/react-legacyfactory'
378
);
379
});
380
src/classic/element/ReactElementValidator.js
+1
-1
@@ -166,7 +166,7 @@ function warnAndMonitorForKeyUse(message, element, parentType) {
166
167
warning(
168
false,
169
- message + '%s%s See http://fb.me/react-warning-keys for more information.',
169
+ message + '%s%s See https://fb.me/react-warning-keys for more information.',
170
parentOrOwnerAddendum,
171
childOwnerAddendum
172
);
src/classic/element/__tests__/ReactElementValidator-test.js
+2
-2
@@ -99,7 +99,7 @@ describe('ReactElementValidator', function() {
99
expect(console.error.argsForCall.length).toBe(1);
100
expect(console.error.argsForCall[0][0]).toBe(
101
'Warning: Each child in an array or iterator should have a unique ' +
102
- '"key" prop. See http://fb.me/react-warning-keys for more information.'
102
+ '"key" prop. See https://fb.me/react-warning-keys for more information.'
103
);
104
});
105
@@ -116,7 +116,7 @@ describe('ReactElementValidator', function() {
116
expect(console.error.argsForCall[0][0]).toBe(
117
'Warning: Each child in an array or iterator should have a unique ' +
118
'"key" prop. Check the React.render call using <div>. See ' +
119
- 'http://fb.me/react-warning-keys for more information.'
119
+ 'https://fb.me/react-warning-keys for more information.'
120
);
121
});
122
starter/README.md
+2
-2
@@ -2,10 +2,10 @@
2
3
You've just downloaded the React starter kit... Congratulations!
4
5
-To begin, check out the `examples/` directory for a bunch of examples, or check out [Getting Started](http://facebook.github.io/react/docs/getting-started.html) for more information.
5
+To begin, check out the `examples/` directory for a bunch of examples, or check out [Getting Started](https://facebook.github.io/react/docs/getting-started.html) for more information.
6
7
In some browsers our examples won't work from the local file system; run `python -m SimpleHTTPServer` and visit `http://localhost:8000/` to view them.
8
9
-Want to start your own app? Just copy `examples/basic-jsx-external` and start hacking! Remember: before launching you'll want to precompile your JSX code as we do in `examples/basic-jsx-precompiled`; this requires doing `npm install -g react-tools` and then running our `jsx` tool. See [Getting Started](http://facebook.github.io/react/docs/getting-started.html) for more information.
9
+Want to start your own app? Just copy `examples/basic-jsx-external` and start hacking! Remember: before launching you'll want to precompile your JSX code as we do in `examples/basic-jsx-precompiled`; this requires doing `npm install -g react-tools` and then running our `jsx` tool. See [Getting Started](https://facebook.github.io/react/docs/getting-started.html) for more information.
10
11
Happy Hacking!