diff --git a/.babelrc b/.babelrc deleted file mode 100644 index a8b9b8bbcd3..00000000000 --- a/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ['react', 'es2015', 'stage-1'], - "plugins": ['add-module-exports'] -} diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 1f7f9081de8..00000000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,22 +0,0 @@ -version: 2 -jobs: - build: - docker: - - image: circleci/node:8 - steps: - - checkout - - restore_cache: - keys: - - dependencies-{{ checksum "yarn.lock" }} - # fallback to using the latest cache if no exact match is found - - dependencies- - - run: - name: Install - command: yarn install - - save_cache: - paths: - - node_modules - key: dependencies-{{ checksum "yarn.lock" }} - - run: - name: Check Prettier, ESLint, Flow - command: yarn ci-check diff --git a/.env.development b/.env.development new file mode 100644 index 00000000000..e69de29bb2d diff --git a/.env.production b/.env.production new file mode 100644 index 00000000000..e403f96b683 --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT' \ No newline at end of file diff --git a/.eslintignore b/.eslintignore index 9425417154d..4738cb6975e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,10 +1,3 @@ -node_modules/* - -# Ignore markdown files and examples -content/* - -# Ignore built files -public/* - -# Ignore examples -examples/* \ No newline at end of file +scripts +plugins +next.config.js diff --git a/.eslintrc b/.eslintrc index a51454ef284..7bc6ab9333b 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,18 +1,37 @@ { - "extends": [ - "fbjs" - ], - "plugins": [ - "prettier", - "react" - ], - "parser": "babel-eslint", + "root": true, + "extends": "next/core-web-vitals", + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler", "local-rules"], "rules": { - "relay/graphql-naming": 0, - "max-len": 0 + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}], + "react-hooks/exhaustive-deps": "error", + "react/no-unknown-property": ["error", {"ignore": ["meta"]}], + "react-compiler/react-compiler": "error", + "local-rules/lint-markdown-code-blocks": "error" }, "env": { "node": true, - "browser": true - } + "commonjs": true, + "browser": true, + "es6": true + }, + "overrides": [ + { + "files": ["src/content/**/*.md"], + "parser": "./eslint-local-rules/parser", + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", + "react-hooks/exhaustive-deps": "off", + "react/no-unknown-property": "off", + "react-compiler/react-compiler": "off", + "local-rules/lint-markdown-code-blocks": "error" + } + } + ] } diff --git a/.flowconfig b/.flowconfig deleted file mode 100644 index 836f6ec1eb0..00000000000 --- a/.flowconfig +++ /dev/null @@ -1,35 +0,0 @@ -[ignore] - -/content/.* -/node_modules/.* -/public/.* - -[include] - -[libs] -./node_modules/fbjs/flow/lib/dev.js -./flow - -[options] -module.system=haste -module.system.node.resolve_dirname=node_modules -module.system.node.resolve_dirname=src - -esproposal.class_static_fields=enable -esproposal.class_instance_fields=enable -unsafe.enable_getters_and_setters=true - -munge_underscores=false - -suppress_type=$FlowIssue -suppress_type=$FlowFixMe -suppress_type=$FixMe -suppress_type=$FlowExpectedError - -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*www[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*www[a-z,_]*\\)?)\\)?:? #[0-9]+ -suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy -suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError - -[version] -^0.56.0 diff --git a/.github/ISSUE_TEMPLATE/0-bug.yml b/.github/ISSUE_TEMPLATE/0-bug.yml new file mode 100644 index 00000000000..56d2e8540f6 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/0-bug.yml @@ -0,0 +1,34 @@ +name: "🐛 Report a bug" +description: "Report a problem on the website." +title: "[Bug]: " +labels: ["bug: unconfirmed"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what the bug is. + placeholder: | + Example bug report: + When I click the "Submit" button on "Feedback", nothing happens. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page(s) did you encounter this bug on? + placeholder: | + https://react.dev/ + validations: + required: true + - type: textarea + attributes: + label: Details + description: | + Please provide any additional details about the bug. + placeholder: | + Example details: + The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists. + validations: + required: false diff --git a/.github/ISSUE_TEMPLATE/1-typo.yml b/.github/ISSUE_TEMPLATE/1-typo.yml new file mode 100644 index 00000000000..c86557a1160 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/1-typo.yml @@ -0,0 +1,34 @@ +name: "🤦 Typo or mistake" +description: "Report a typo or mistake in the docs." +title: "[Typo]: " +labels: ["type: typos"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what the mistake is. + placeholder: | + Example: + The code example on the "useReducer" page includes an unused variable `nextId`. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page is the typo on? + placeholder: | + https://react.dev/ + validations: + required: true + - type: textarea + attributes: + label: Details + description: | + Please provide a explanation for why this is a mistake. + placeholder: | + Example mistake: + In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed. + validations: + required: false diff --git a/.github/ISSUE_TEMPLATE/2-suggestion.yml b/.github/ISSUE_TEMPLATE/2-suggestion.yml new file mode 100644 index 00000000000..ac0b480fe9f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/2-suggestion.yml @@ -0,0 +1,34 @@ +name: "💡 Suggestions" +description: "Suggest a new page, section, or edit for an existing page." +title: "[Suggestion]: " +labels: ["type: documentation"] +body: + - type: textarea + attributes: + label: Summary + description: | + A clear and concise summary of what we should add. + placeholder: | + Example: + Add a new page for how to use React with TypeScript. + validations: + required: true + - type: input + attributes: + label: Page + description: | + What page is this about? + placeholder: | + https://react.dev/ + validations: + required: false + - type: textarea + attributes: + label: Details + description: | + Please provide a explanation for what you're suggesting. + placeholder: | + Example: + I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation. + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml new file mode 100644 index 00000000000..a47295e1e87 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/3-framework.yml @@ -0,0 +1,116 @@ +name: "📄 Suggest new framework" +description: "I am a framework author applying to be included as a recommended framework." +title: "[Framework]: " +labels: ["type: framework"] +body: + - type: markdown + attributes: + value: | + ## Apply to be included as a recommended React framework + + _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._ + + Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production. + + While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). + + To be included, frameworks must meet the following criteria: + + - **Free & open-source**: must be open source and free to use. + - **Well maintained**. must be actively maintained, providing bug fixes and improvements. + - **Active community**: must have a sufficiently large and active community to support users. + - **Clear onboarding**: must have clear install steps to install the React version of the framework. + - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem. + - **Self-hosting option**: must support an option to self-host applications without losing access to features. + - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh. + - **User experience**. must provide built-in support for common problems like routing and data-fetching. + - **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time. + + Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below. + - type: input + attributes: + label: Name + description: | + What is the name of your framework? + validations: + required: true + - type: input + attributes: + label: Homepage + description: | + What is the URL of your homepage? + validations: + required: true + - type: input + attributes: + label: Install instructions + description: | + What is the URL of your getting started guide? + validations: + required: true + - type: dropdown + attributes: + label: Is your framework open source? + description: | + We only recommend free and open source frameworks. + options: + - 'No' + - 'Yes' + validations: + required: true + - type: textarea + attributes: + label: Well maintained + description: | + Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples. + validations: + required: true + - type: textarea + attributes: + label: Active community + description: | + Please describe your community. Include the size of your community, and links to community resources. + validations: + required: true + - type: textarea + attributes: + label: Clear onboarding + description: | + Please describe how a user can install your framework with React. Include links to any relevant documentation. + validations: + required: true + - type: textarea + attributes: + label: Ecosystem compatibility + description: | + Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework. + validations: + required: true + - type: textarea + attributes: + label: Self-hosting option + description: | + Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework. + validations: + required: true + - type: textarea + attributes: + label: Developer Experience + description: | + Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh. + validations: + required: true + - type: textarea + attributes: + label: User Experience + description: | + Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR. + validations: + required: true + - type: textarea + attributes: + label: Compatible with our future vision for React + description: | + Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components. + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000000..63e310e0bad --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,7 @@ +contact_links: + - name: 📃 Bugs in React + url: https://github.com/facebook/react/issues/new/choose + about: This issue tracker is not for bugs in React. Please file React issues here. + - name: 🤔 Questions and Help + url: https://reactjs.org/community/support.html + about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index d3c569401c7..7e4f6d2f2cb 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,12 +1,10 @@ - - - - -## What is React? - -[Craig McKeachie](http://www.funnyant.com/author/admin/) author of [JavaScript Framework Guide](http://www.funnyant.com/javascript-framework-guide/) wrote an excellent news named ["What is React.js? Another Template Library?](http://www.funnyant.com/reactjs-what-is-it/) - -- Is React a template library? -- Is React similar to Web Components? -- Are the Virtual DOM and Shadow DOM the same? -- Can React be used with other JavaScript MVC frameworks? -- Who uses React? -- Is React a premature optimization if you aren’t Facebook or Instagram? -- Can I work with designers? -- Will React hurt my search engine optimizations (SEO)? -- Is React a framework for building applications or a library with one feature? -- Are components a better way to build an application? -- Can I build something complex with React? - - -## Referencing Dynamic Children - -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). - -```javascript -var App = React.createClass({ - render: function () { - var children = React.Children.map(this.props.children, function(child, index) { - return React.addons.cloneWithProps(child, { - ref: 'child-' + index - }); - }); - return
{children}
; - } -}); -``` - - -## JSX with Sweet.js using Readtables - -Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to [compile JSX with Sweet.js using Readtables](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables). - -[![](../images/blog/sweet-jsx.png)](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables) - - -## First Look: Getting Started with React - -[Kirill Buga](http://modernweb.com/authors/kirill-buga/) wrote an article on Modern Web explaining how [React is different from traditional MVC](http://modernweb.com/2014/07/23/getting-started-reactjs/) used by most JavaScript applications - -
- - -## React Draggable - -[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable. - -[![](../images/blog/react-draggable.png)](https://mzabriskie.github.io/react-draggable/example/) - - -## HTML Parser2 React - -[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. -This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML. - -```javascript -var html = '
' + - '

hey this is a paragraph

  • 1
  • 2
    • ' + - '
  • 3
'; -var parsedComponent = reactParser(html, React); -``` - - -## Building UIs with React - -If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it! - - - - -## Random Tweets - - - diff --git a/content/blog/2014-09-03-introducing-the-jsx-specification.md b/content/blog/2014-09-03-introducing-the-jsx-specification.md deleted file mode 100644 index 76e08130d8b..00000000000 --- a/content/blog/2014-09-03-introducing-the-jsx-specification.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: "Introducing the JSX Specification" -author: [sebmarkbage] ---- - -At Facebook we've been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We've also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations. - -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. - -Read the spec now at . - -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. - -Feel free to [open an Issue](https://github.com/facebook/jsx/issues/new) or Pull Request if you find something wrong. diff --git a/content/blog/2014-09-12-community-round-up-22.md b/content/blog/2014-09-12-community-round-up-22.md deleted file mode 100644 index 977ba76dcda..00000000000 --- a/content/blog/2014-09-12-community-round-up-22.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: "Community Round-up #22" -layout: post -author: [LoukaN] ---- - -This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React! - -
- - - -
- - - -
- -## React's Architecture - -[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/). - - - - -## v8 optimizations - -Jakob Kummerow landed [two optimizations to V8](http://www.chromium.org/developers/speed-hall-of-fame#TOC-2014-06-18) specifically targeted at optimizing React. That's really exciting to see browser vendors helping out on performance! - - -## Reusable Components by Khan Academy - -[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. - -```javascript -var TeX = require('react-components/js/tex.jsx'); -React.renderComponent(\nabla \cdot E = 4 \pi \rho, domNode); - -var translated = ( - <$_ first="Motoko" last="Kusanagi"> - Hello, %(first)s %(last)s! - -); -``` - - -## React + Browserify + Gulp - -[Trường](http://truongtx.me/) wrote a little guide to help your [getting started using React, Browserify and Gulp](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/). - -
- - -## React Style - -After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: [IntegratedCSS](https://github.com/SanderSpies/react-style). It seems weird at first but this is the direction where React is heading. - -```javascript -var Button = React.createClass({ - normalStyle: ReactStyle(function() { - return { backgroundColor: vars.orange }; - }), - activeStyle: ReactStyle(function() { - if (this.state.active) { - return { color: 'yellow', padding: '10px' }; - } - }), - render: function() { - return ( -
- Hello, I'm styled -
- ); - } -}); -``` - - -## Virtual DOM in Elm - -[Evan Czaplicki](http://evan.czaplicki.us) explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages. - -> Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches. -> -> [Read the full article](http://elm-lang.org/blog/Blazing-Fast-Html.elm) - - -## Components Tutorial - -If you are getting started with React, [Joe Maddalone](http://www.joemaddalone.com/) made a good tutorial on how to build your first component. - - - - -## Saving time & staying sane? - -When [Kent William Innholt](http://http://kentwilliam.com/) who works at [M>Path](http://mpath.com/) summed up his experience using React in an [article](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js). - -> We're building an ambitious new web app, where the UI complexity represents most of the app's complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify. -> -> - **Big win**: Tighter coupling of markup and behavior -> - **Jury's still out**: CSS lives outside React.js -> - **Big win**: Cascading updates and functional thinking -> - **Jury's still out**: Verbose propagation -> -> [Read the article...](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js) - - -## Weather - -To finish this round-up, Andrew Gleave made a page that displays the [Weather](https://github.com/andrewgleave/react-weather). It's great to see that React is also used for small prototypes. - - -
diff --git a/content/blog/2014-09-16-react-v0.11.2.md b/content/blog/2014-09-16-react-v0.11.2.md deleted file mode 100644 index 376cecdab04..00000000000 --- a/content/blog/2014-09-16-react-v0.11.2.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: React v0.11.2 -author: [zpao] ---- - -Today we're releasing React v0.11.2 to add a few small features. - -We're adding support for two more DOM elements, `` and ``, as well as the associated attributes needed to use these elements: `open`, `media`, and `sizes`. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we're making them available to everybody. - -We're also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing `React.createDescriptor` with `React.createElement`. `createDescriptor` will continue to work with a warning and will be gone in v0.12. Chances are that this won't affect anybody. - -And lastly, on the heels of announcing Flow at [@Scale](http://atscaleconference.com/) yesterday, we're adding the ability to strip TypeScript-like type annotations as part of the `jsx` transform. To use, simply use the `--strip-types` flag on the command line, or set `stripTypes` in the `options` object when calling the API. We'll be talking about Flow more in the coming months. But for now, it's helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon. - -The release is available for download from the CDN: - -* **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **In-Browser JSX transformer** - - -We've also published version `0.11.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. - -Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry. - -### React Core - -#### New Features - -* Added support for `` element and associated `open` attribute -* Added support for `` element and associated `media` and `sizes` attributes -* Added `React.createElement` API in preparation for React v0.12 - * `React.createDescriptor` has been deprecated as a result - -### JSX - -* `` is now parsed into `React.DOM.picture` - -### React Tools - -* Update `esprima` and `jstransform` for correctness fixes -* The `jsx` executable now exposes a `--strip-types` flag which can be used to remove TypeScript-like type annotations - * This option is also exposed to `require('react-tools').transform` as `stripTypes` diff --git a/content/blog/2014-09-24-testing-flux-applications.md b/content/blog/2014-09-24-testing-flux-applications.md deleted file mode 100644 index 0986c7653db..00000000000 --- a/content/blog/2014-09-24-testing-flux-applications.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -title: "Testing Flux Applications" -author: [fisherwebdev] ---- - -**A more up-to-date version of this post is available as part of the [Flux documentation](https://facebook.github.io/flux/docs/testing-flux-applications.html).** - -[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](https://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](https://facebook.github.io/jest/), Facebook's auto-mocking testing framework. - - -Testing with Jest ------------------ - -For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/master/examples/flux-todomvc). - -The first steps toward working with Jest are as follows: - -1. Get the module dependencies for the application installed by running `npm install`. -2. Create a directory `__tests__/` with a test file, in this case TodoStore-test.js -3. Run `npm install jest-cli —save-dev` -4. Add the following to your package.json - -```javascript -{ - ... - "scripts": { - "test": "jest" - } - ... -} -``` - -Now you're ready to run your tests from the command line with `npm test`. - -By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest's `dontMock()` method. - -```javascript -jest.dontMock('TodoStore'); -``` - -This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test. - - -Testing Stores --------------- - -At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it's not entirely obvious how to test them. - -By design, stores can't be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher. - -We therefore need to simulate the Flux data flow with this _one weird trick_. - -```javascript -var mockRegister = MyDispatcher.register; -var mockRegisterInfo = mockRegister.mock; -var callsToRegister = mockRegisterInfo.calls; -var firstCall = callsToRegister[0]; -var firstArgument = firstCall[0]; -var callback = firstArgument; -``` - -We now have the store's registered callback, the sole mechanism by which data can enter the store. - -For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let's look at each part of it a bit more closely. We start out by looking at the `register()` method of our application's dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the `register()` method just as we would normally refer to that method in our production code. But we can get additional information about that method with the `mock` _property_ of that method. We don't often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to `register()` is available with the `calls` property of `mock`, and each of these calls has a list of the arguments that were used in each method call. - -So in this code, we are really saying, "Give me a reference to the first argument of the first call to MyDispatcher's `register()` method." That first argument is the store's callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line: - -```javascript -callback = MyDispatcher.register.mock.calls[0][0]; -``` - -We can invoke that callback whenever we like, independent of our application's dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we'll create directly in our test. - -```javascript -var payload = { - source: 'VIEW_ACTION', - action: { - actionType: TodoConstants.TODO_CREATE, - text: 'foo' - } -}; -callback(payload); -var all = TodoStore.getAll(); -var keys = Object.keys(all); -expect(all[keys[0]].text).toEqual('foo'); -``` - -Putting it All Together ----------------------- - -The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let's look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store's registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely. - -```javascript -jest.dontMock('../TodoStore'); -jest.dontMock('react/lib/merge'); - -describe('TodoStore', function() { - - var TodoConstants = require('../../constants/TodoConstants'); - - // mock actions inside dispatch payloads - var actionTodoCreate = { - source: 'VIEW_ACTION', - action: { - actionType: TodoConstants.TODO_CREATE, - text: 'foo' - } - }; - var actionTodoDestroy = { - source: 'VIEW_ACTION', - action: { - actionType: TodoConstants.TODO_DESTROY, - id: 'replace me in test' - } - }; - - var AppDispatcher; - var TodoStore; - var callback; - - beforeEach(function() { - AppDispatcher = require('../../dispatcher/AppDispatcher'); - TodoStore = require('../TodoStore'); - callback = AppDispatcher.register.mock.calls[0][0]; - }); - - it('registers a callback with the dispatcher', function() { - expect(AppDispatcher.register.mock.calls.length).toBe(1); - }); - - it('initializes with no to-do items', function() { - var all = TodoStore.getAll(); - expect(all).toEqual({}); - }); - - it('creates a to-do item', function() { - callback(actionTodoCreate); - var all = TodoStore.getAll(); - var keys = Object.keys(all); - expect(keys.length).toBe(1); - expect(all[keys[0]].text).toEqual('foo'); - }); - - it('destroys a to-do item', function() { - callback(actionTodoCreate); - var all = TodoStore.getAll(); - var keys = Object.keys(all); - expect(keys.length).toBe(1); - actionTodoDestroy.action.id = keys[0]; - callback(actionTodoDestroy); - expect(all[keys[0]]).toBeUndefined(); - }); - -}); -``` - -You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well. - - -Mocking Data Derived from Other Stores --------------------------------------- - -Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we'll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it. - -```javascript -var MyOtherStore = require('../MyOtherStore'); -MyOtherStore.getState.mockReturnValue({ - '123': { - id: '123', - text: 'foo' - }, - '456': { - id: '456', - text: 'bar' - } -}); -``` - -Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store's registered callback. - -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). - -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). - - -Moving Logic from React to Stores ---------------------------------- - -What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application's behavior, and when application logic slips into our view layer, this becomes more difficult. - -For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the "Mark all as complete" checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection's `render()` method: - -```javascript -var allTodos = this.props.allTodos; -var allChecked = true; -for (var id in allTodos) { - if (!allTodos[id].complete) { - allChecked = false; - break; - } -} -... - -return ( -
- - ... -
-); -``` - -While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can't be described in our spec-style TodoStore test. Let's take that logic and move it to the store. First, we'll create a public method on the store that will encapsulate that logic: - -```javascript -areAllComplete: function() { - for (var id in _todos) { - if (!_todos[id].complete) { - return false; - } - } - return true; -}, -``` - -Now we have the application logic where it belongs, and we can write the following test: - -```javascript -it('determines whether all to-do items are complete', function() { - var i = 0; - for (; i < 3; i++) { - callback(mockTodoCreate); - } - expect(TodoStore.areAllComplete()).toBe(false); - - var all = TodoStore.getAll(); - for (key in all) { - callback({ - source: 'VIEW_ACTION', - action: { - actionType: TodoConstants.TODO_COMPLETE, - id: key - } - }); - } - expect(TodoStore.areAllComplete()).toBe(true); - - callback({ - source: 'VIEW_ACTION', - action: { - actionType: TodoConstants.TODO_UNDO_COMPLETE, - id: key - } - }); - expect(TodoStore.areAllComplete()).toBe(false); -}); -``` - -Finally, we revise our view layer. We'll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component. - -```javascript -function getTodoState() { - return { - allTodos: TodoStore.getAll(), - areAllComplete: TodoStore.areAllComplete() - }; -} - -var TodoApp = React.createClass({ -... - - /** - * @return {object} - */ - render: function() { - return ( - ... - - ... - ); - }, - - /** - * Event handler for 'change' events coming from the TodoStore - */ - _onChange: function() { - this.setState(getTodoState()); - } - -}); -``` - -And then we'll utilize that property for the rendering of the checkbox. - -```javascript -render: function() { - ... - - return ( -
- - ... -
- ); -}, -``` - -To learn how to test React components themselves, check out the [Jest tutorial for React](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/docs/test-utils.html). - - -Further Reading ---------------- - -- [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler -- [Jest API Reference](https://facebook.github.io/jest/docs/api.html) diff --git a/content/blog/2014-10-14-introducing-react-elements.md b/content/blog/2014-10-14-introducing-react-elements.md deleted file mode 100644 index cffa893c328..00000000000 --- a/content/blog/2014-10-14-introducing-react-elements.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: "Introducing React Elements" -author: [sebmarkbage] -redirect_from: "blog/2014/10/14/introducting-react-elements.html" ---- - -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! - -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. - -If you can't or don't want to use JSX, then please insert some hints for us. Add a `React.createFactory` call around your imported class when you require it: - -```javascript -var MyComponent = React.createFactory(require('MyComponent')); -``` - -Everything is backwards compatible for now, and as always React will provide you with descriptive console messaging to help you upgrade. - -`ReactElement` is the primary API of React. Making it faster has shown to give us several times faster renders on common benchmarks. The API tweaks in this release helps us get there. - -Continue reading if you want all the nitty gritty details... - - -## New Terminology - -We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term `ReactElement` instead of _descriptor_. Likewise, we use the term `ReactNode` instead of _renderable_. - -[See the full React terminology guide.](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589) - -## Creating a ReactElement - -We now expose an external API for programmatically creating a `ReactElement` object. - -```javascript -var reactElement = React.createElement(type, props, children); -``` - -The `type` argument is either a string (HTML tag) or a class. It's a description of what tag/class is going to be rendered and what props it will contain. You can also create factory functions for specific types. This basically just provides the type argument for you: - -```javascript -var div = React.createFactory('div'); -var reactDivElement = div(props, children); -``` - - -## Deprecated: Auto-generated Factories - -Imagine if `React.createClass` was just a plain JavaScript class. If you call a class as a plain function you would call the component's constructor to create a Component instance, not a `ReactElement`: - -```javascript -new MyComponent(); // Component, not ReactElement -``` - -React 0.11 gave you a factory function for free when you called `React.createClass`. This wrapped your internal class and then returned a `ReactElement` factory function for you. - -```javascript -var MyComponent = React.createFactory( - class { - render() { - ... - } - } -); -``` - -In future versions of React, we want to be able to support pure classes without any special React dependencies. To prepare for that we're [deprecating the auto-generated factory](https://gist.github.com/sebmarkbage/d7bce729f38730399d28). - -This is the biggest change to 0.12. Don't worry though. This functionality continues to work the same for this release, it just warns you if you're using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once. - - -## Upgrading to 0.12 - -### React With JSX - -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. - -```javascript -// If you use node/browserify modules make sure -// that you require React into scope. -var React = require('react'); -``` - -React's JSX will create the `ReactElement` for you. You can continue to use JSX with regular classes: - -```javascript -var MyComponent = React.createClass(...); - -var MyOtherComponent = React.createClass({ - render: function() { - return ; - } -}); -``` - -*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.* - -### React Without JSX - -If you don't use JSX and just call components as functions, you will need to explicitly create a factory before calling it: - -```javascript -var MyComponentClass = React.createClass(...); - -var MyComponent = React.createFactory(MyComponentClass); // New step - -var MyOtherComponent = React.createClass({ - render: function() { - return MyComponent({ prop: 'value' }); - } -}); -``` - -If you're using a module system, the recommended solution is to export the class and create the factory on the requiring side. - -Your class creation is done just like before: - -```javascript -// MyComponent.js -var React = require('react'); -var MyComponent = React.createClass(...); -module.exports = MyComponent; -``` - -The other side uses `React.createFactory` after `require`ing the component class: - -```javascript -// MyOtherComponent.js -var React = require('react'); -// All you have to do to upgrade is wrap your requires like this: -var MyComponent = React.createFactory(require('MyComponent')); - -var MyOtherComponent = React.createClass({ - render: function() { - return MyComponent({ prop: 'value' }); - } -}); - -module.exports = MyOtherComponent; -``` - -You ONLY have to do this for custom classes. React still has built-in factories for common HTML elements. - -```javascript -var MyDOMComponent = React.createClass({ - render: function() { - return React.DOM.div({ className: 'foo' }); // still ok - } -}); -``` - -We realize that this is noisy. At least it's on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get [the other benefits](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) that this model unlocks. - -### Anti-Pattern: Exporting Factories - -If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once: - -```javascript -// Anti-pattern - Please, don't use -function createClass(spec) { - return React.createFactory(React.createClass(spec)); -} -``` - -This makes your components incompatible with jest testing, consumers using JSX, third-party languages that implement their own optimized `ReactElement` creation, etc. - -It also encourages you to put more logic into these helper functions. Something that another language, a compiler or a reader of your code couldn't reason about. - -To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating `ReactElement`s. - - -## Third-party Languages - -The signature of a `ReactElement` is something like this: - -```javascript -{ - type : string | class, - props : { children, className, etc. }, - key : string | boolean | number | null, - ref : string | null -} -``` - -Languages with static typing that don't need validation (e.g. [Om in ClojureScript](https://github.com/swannodette/om)), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React. - - -## Your Thoughts and Ideas - -We'd love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions: - -```javascript -// MyOtherComponent.js -var React = require('react'); -var MyComponent = require('MyComponent'); - -var MyOtherComponent = React.createClass({ - render: function() { - return { type: MyComponent, props: { prop: 'value' } }; - } -}); - -module.exports = MyOtherComponent; -``` - -This moves the noise down into the render method though. It also doesn't provide a hook for dynamic validation/type checking so you'll need some other way to verify that it's safe. - -*NOTE: This won't work in this version of React because it's conflicting with other legacy APIs that we're deprecating. (We temporarily add a `element._isReactElement = true` marker on the object.)* - - -## The Next Step: ES6 Classes - -After 0.12 we'll begin work on moving to ES6 classes. We will still support `React.createClass` as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this: - -```javascript -export class MyComponent { - render() { - ... - } -}; -``` - -This upcoming release is a stepping stone to make it as easy as this. Thanks for your support. diff --git a/content/blog/2014-10-16-react-v0.12-rc1.md b/content/blog/2014-10-16-react-v0.12-rc1.md deleted file mode 100644 index cff02743014..00000000000 --- a/content/blog/2014-10-16-react-v0.12-rc1.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: "React v0.12 RC" -author: [sebmarkbage] ---- - -We are finally ready to share the work we've been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we're shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we've highlighted the interesting and breaking changes below. - - -The release candidate is available for download: - -* **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **In-Browser JSX transformer** - - -We've also published version `0.12.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower. - - -## React Elements - -The biggest conceptual change we made in v0.12 is the move to React Elements. [We talked about this topic in depth earlier this week](/blog/2014/10/14/introducing-react-elements.html). If you haven't already, you should read up on the exciting changes in there! - - -## JSX Changes - -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. - - -### The `@jsx` Pragma is Gone! - -We have wanted to do this since before we even open sourced React. No more `/** @jsx React.DOM */`!. The React specific JSX transform assumes you have `React` in scope (which had to be true before anyway). - -`JSXTransformer` and `react-tools` have both been updated to account for this. - - -### JSX for Function Calls is No Longer Supported - -The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/blog/2014/10/14/introducting-react-elements.html). - -The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was a convenient shortcut for many people but we believe the gains will be worth it. - - -### JSX Lower-case Convention - -We used to have a whitelist of HTML tags that got special treatment in JSX. However as new HTML tags got added to the spec, or we added support for more SVG tags, we had to go update our whitelist. Additionally, there was ambiguity about the behavior. There was always the chance that something new added to the tag list would result in breaking your code. For example: - -```javascript -return ; -``` - -Is `component` an existing HTML tag? What if it becomes one? - -To address this, we decided on a convention: __All JSX tags that start with a lower-case letter or contain a dash are treated as HTML.__ - -This means that you no longer have to wait for us to upgrade JSX to use new tags. This also introduces the possibility to consume custom elements (Web Components) - although custom attributes are not yet fully supported. - -Currently we still use the whitelist as a sanity check. The transform will fail when it encounters an unknown tag. This allows you to update your code without hitting errors in production. - -In addition, the HTML tags are converted to strings instead of using `React.DOM` directly. `
` becomes `React.createElement('div')` instead of `React.DOM.div()`. - - -### JSX Spread Attributes - -Previously there wasn't a way to for you to pass a dynamic or unknown set of properties through JSX. This is now possible using the spread `...` operator. - -```javascript -var myProps = { a: 1, b: 2 }; -return ; -``` - -This merges the properties of the object onto the props of `MyComponent`. - -[Read More About Spread Attributes](https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81) - -If you used to use plain function calls to pass arbitrary props objects... - -```javascript -return MyComponent(myProps); -``` - -You can now switch to using Spread Attributes instead: - -```javascript -return ; -``` - - -## Breaking Change: `key` and `ref` Removed From `this.props` - -The props `key` and `ref` were already reserved property names. This turned out to be difficult to explicitly statically type since any object can accept these extra props. It also screws up JIT optimizations of React internals in modern VMs. - -These are concepts that React manages from outside the Component before it even gets created so it shouldn't be part of the props. - -We made this distinction clearer by moving them off the props object and onto the `ReactElement` itself. This means that you need to rename: - -`someElement.props.key` -> `someElement.key` - -You can no longer access `this.props.ref` and `this.props.key` from inside the Component instance itself. So you need to use a different name for those props. - -You do NOT need to change the way to define `key` and `ref`, only if you need to read it. E.g. `
` and `div({ key: 'my-key' })` still works. - - -## Breaking Change: Default Props Resolution - -This is a subtle difference but `defaultProps` are now resolved at `ReactElement` creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolved props. - -You will primarily see this breaking if you're also using `transferPropsTo`. - - -## Deprecated: transferPropsTo - -`transferPropsTo` is deprecated in v0.12 and will be removed in v0.13. This helper function was a bit magical. It auto-merged a certain whitelist of properties and excluded others. It was also transferring too many properties. This meant that we have to keep a whitelist of valid HTML attributes in the React runtime. It also means that we can't catch typos on props. - -Our suggested solution is to use the Spread Attributes. - -```javascript -return
; -``` - -Or, just if you're not using JSX: - -```javascript -return div(this.props); -``` - -Although to avoid passing too many props down, you'll probably want to use something like ES7 rest properties. [Read more about upgrading from transferPropsTo](https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7). - - -## Deprecated: Returning `false` in Event Handlers - -It used to be possible to return `false` from event handlers to preventDefault. We did this because this works in most browsers. This is a confusing API and we might want to use the return value for something else. Therefore, this is deprecated. Use `event.preventDefault()` instead. - - -## Renamed APIs - -As part of the [new React terminology](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589) we aliased some existing APIs to use the new naming convention: - -- `React.renderComponent` -> `React.render` -- `React.renderComponentToString` -> `React.renderToString` -- `React.renderComponentToStaticMarkup` -> `React.renderToStaticMarkup` -- `React.isValidComponent` -> `React.isValidElement` -- `React.PropTypes.component` -> `React.PropTypes.element` -- `React.PropTypes.renderable` -> `React.PropTypes.node` - -The older APIs will log a warning but work the same. They will be removed in v0.13. - diff --git a/content/blog/2014-10-17-community-roundup-23.md b/content/blog/2014-10-17-community-roundup-23.md deleted file mode 100644 index 62a9840fe81..00000000000 --- a/content/blog/2014-10-17-community-roundup-23.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: "Community Round-up #23" -layout: post -author: [LoukaN] ---- - -This round-up is a special edition on [Flux](https://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed! - -## React And Flux at ForwardJS - -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. - - - -# Yahoo - -Yahoo is converting Yahoo Mail to React and Flux and in the process, they open sourced several components. This will help you get an isomorphic application up and running. - -- [Flux Router Component](https://github.com/yahoo/flux-router-component) -- [Dispatchr](https://github.com/yahoo/dispatchr) -- [Fetchr](https://github.com/yahoo/fetchr) -- [Flux Examples](https://github.com/yahoo/flux-examples) - - -## Reflux - -[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/). - -
- -
- - -## React and Flux Interview - -[Ian Obermiller](http://ianobermiller.com/), engineer at Facebook, [made a lengthy interview](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/) on the experience of using React and Flux in order to build probably the biggest React application ever written so far. - -> I’ve actually said this many times to my team too, I love React. It’s really great for making these complex applications. One thing that really surprised me with it is that React combined with a sane module system like CommonJS, and making sure that you actually modulize your stuff properly has scaled really well to a team of almost 10 developers working on hundreds of files and tens of thousands of lines of code. -> -> Really, a fairly large code base... stuff just works. You don’t have to worry about mutating, and the state of the DOM just really makes stuff easy. Just conceptually it’s easier just to think about here’s what I have, here’s my data, here’s how it renders, I don’t care about anything else. For most cases that is really simplifying and makes it really fast to do stuff. -> -> [Read the full interview...](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/) - - -## Adobe's Brackets Project Tree - -[Kevin Dangoor](http://www.kevindangoor.com/) is converting the project tree of [Adobe's Bracket text editor](http://brackets.io/) to React and Flux. He wrote about his experience [using Flux](http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/). - -
- -
- - -## Async Requests with Flux Revisited - -[Reto Schläpfer](http://www.code-experience.com/the-code-experience/) came back to a Flux project he hasn't worked on for a month and [saw many ways to improve the way he implemented Flux](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/). He summarized his learnings in a blog post. - -> The smarter way is to call the Web Api directly from an Action Creator and then make the Api dispatch an event with the request result as a payload. The Store(s) can choose to listen on those request actions and change their state accordingly. -> -> Before I show some updated code snippets, let me explain why this is superior: -> -> - There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger. -> -> - Asynchronously executed callbacks should not leak into Stores. The consequences of it are just too hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand. -> -> - Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right. -> -> [Read the full article...](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/) - - -## Undo-Redo with Immutable Data Structures - -[Ameya Karve](https://github.com/ameyakarve) explained how to use [Mori](https://github.com/swannodette/mori), a library that provides immutable data structures, in order to [implement undo-redo](http://ameyakarve.com/jekyll/update/2014/02/06/Undo-React-Flux-Mori.html). This usually very challenging feature only takes a few lines of code with Flux! - -```javascript -undo: function() { - this.redoStates = Mori.conj(this.redoStates, Mori.first(this.undoStates)); - this.undoStates = Mori.drop(1, this.undoStates); - this.todosState = Mori.first(this.undoStates); - this.canUndo = Mori.count(this.undoStates) > 1; - this.canRedo = true; - if (Mori.count(this.undoStates) > 1) { - this.todos = JSON.parse(this.todosState); - } else { - this.todos = []; - } - this.emit('change'); -}, -``` - - -## Flux in practice - -[Gary Chambers](https://twitter.com/garychambers108) wrote a [guide to get started with Flux](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a). This is a very practical introduction to Flux. - -> So, what does it actually mean to write an application in the Flux way? At that moment of inspiration, when faced with an empty text editor, how should you begin? This post follows the process of building a Flux-compliant application from scratch. -> -> [Read the full guide...](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a) - - -## Components, React and Flux - -[Dan Abramov](https://twitter.com/dan_abramov) working at Stampsy made a talk about React and Flux. It's a very good overview of the concepts at play. - - - - -## React and Flux - -[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. - -> 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. -> -> 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". -> -> [Read the full article...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) - - - -## Flux: Step by Step approach - -[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/). - -
- -
- - -## DeLorean: Back to the future! - -[DeLorean](https://github.com/deloreanjs/delorean) is a tiny Flux pattern implementation developed by [Fatih Kadir Akin](https://github.com/f). - -> - Unidirectional data flow, it makes your app logic simpler than MVC -> - Automatically listens to data changes and keeps your data updated -> - Makes data more consistent across your whole application -> - It's framework agnostic, completely. There's no view framework dependency -> - Very small, just 4K gzipped -> - Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others -> - Improve your UI/data consistency using rollbacks - - -## Facebook's iOS Infrastructure - -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. - - - - -## Random Tweet - - diff --git a/content/blog/2014-10-27-react-js-conf.md b/content/blog/2014-10-27-react-js-conf.md deleted file mode 100644 index cc9efe7fc93..00000000000 --- a/content/blog/2014-10-27-react-js-conf.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: React.js Conf -author: [vjeux] ---- - -Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own. - -**We're happy to announce [React.js Conf](http://conf.reactjs.com/)! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.** - -Before we open registration, [we're looking for great talks](http://conf.reactjs.com/call-for-presenters.html). We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know! - -Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates... - -We look forward to seeing many of you in person in just a few short months! - diff --git a/content/blog/2014-10-28-react-v0.12.md b/content/blog/2014-10-28-react-v0.12.md deleted file mode 100644 index c61f07f822c..00000000000 --- a/content/blog/2014-10-28-react-v0.12.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: React v0.12 -author: [zpao] ---- - -We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback! - -We have talked a lot about some of the bigger changes in this release. [We introduced new terminology](/blog/2014/10/14/introducing-react-elements.html) and changed APIs to clean up and simplify some of the concepts of React. [We also made several changes to JSX](/blog/2014/10/16/react-v0.12-rc1.html) and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below. - - -The release is available for download: - -* **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **In-Browser JSX transformer** - - -We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower. - -## New Terminology & Updated APIs - -v0.12 is bringing about some new terminology. [We introduced](/blog/2014/10/14/introducing-react-elements.html) this 2 weeks ago and we've also documented it in [a new section of the documentation](/docs/glossary.html). As a part of this, we also corrected many of our top-level APIs to align with the terminology. `Component` has been removed from all of our `React.render*` methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with `render` methods in your component classes, we decided to keep the top-level functions short and sweet. `React.renderComponent` is now `React.render`. - -We also corrected some other misnomers. `React.isValidComponent` actually determines if the argument is a ReactElement, so it has been renamed to `React.isValidElement`. In the same vein, `React.PropTypes.component` is now `React.PropTypes.element` and `React.PropTypes.renderable` is now `React.PropTypes.node`. - -The old methods will still work but will warn upon first use. They will be removed in v0.13. - -## JSX Changes - -[We talked more in depth about these before](/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes), so here are the highlights. - -* No more `/** @jsx React.DOM */`! -* We no longer transform to a straight function call. `` now becomes `React.createElement(Component)` -* DOM components don't make use of `React.DOM`, instead we pass the tag name directly. `
` becomes `React.createElement('div')` -* We introduced spread attributes as a quick way to transfer props. - -## DevTools Improvements, No More `__internals` - -For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed! - -As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. `React.__internals` is no more. - -## License Change - BSD - -We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook. - -You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub. - -- - - - -## Changelog - -### React Core - -#### Breaking Changes - -* `key` and `ref` moved off props object, now accessible on the element directly -* React is now BSD licensed with accompanying Patents grant -* Default prop resolution has moved to Element creation time instead of mount time, making them effectively static -* `React.__internals` is removed - it was exposed for DevTools which no longer needs access -* Composite Component functions can no longer be called directly - they must be wrapped with `React.createFactory` first. This is handled for you when using JSX. - -#### New Features - -* Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo` -* Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest` - -#### Deprecations - -* `React.renderComponent` --> `React.render` -* `React.renderComponentToString` --> `React.renderToString` -* `React.renderComponentToStaticMarkup` --> `React.renderToStaticMarkup` -* `React.isValidComponent` --> `React.isValidElement` -* `React.PropTypes.component` --> `React.PropTypes.element` -* `React.PropTypes.renderable` --> `React.PropTypes.node` -* **DEPRECATED** `React.isValidClass` -* **DEPRECATED** `instance.transferPropsTo` -* **DEPRECATED** Returning `false` from event handlers to preventDefault -* **DEPRECATED** Convenience Constructor usage as function, instead wrap with `React.createFactory` -* **DEPRECATED** use of `key={null}` to assign implicit keys - -#### Bug Fixes - -* Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components -* Correctly treat `event.getModifierState` as case sensitive -* Improved normalization of `event.charCode` -* Better error stacks when involving autobound methods -* Removed DevTools message when the DevTools are installed -* Correctly detect required language features across browsers -* Fixed support for some HTML attributes: - * `list` updates correctly now - * `scrollLeft`, `scrollTop` removed, these should not be specified as props -* Improved error messages - -### React With Addons - -#### New Features - -* `React.addons.batchedUpdates` added to API for hooking into update cycle - -#### Breaking Changes - -* `React.addons.update` uses `assign` instead of `copyProperties` which does `hasOwnProperty` checks. Properties on prototypes will no longer be updated correctly. - -#### Bug Fixes - -* Fixed some issues with CSS Transitions - -### JSX - -#### Breaking Changes - -* Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components -* JSX no longer transforms to simple function calls - -#### New Features - -* `@jsx React.DOM` no longer required -* spread (`{...}`) operator introduced to allow easier use of props - -#### Bug Fixes - -* JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails) diff --git a/content/blog/2014-11-24-react-js-conf-updates.md b/content/blog/2014-11-24-react-js-conf-updates.md deleted file mode 100644 index f7cecc0439a..00000000000 --- a/content/blog/2014-11-24-react-js-conf-updates.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: React.js Conf Updates -author: [vjeux] ---- - -Yesterday was the [React.js Conf](http://conf.reactjs.com/index.html) call for presenters submission deadline. We were -surprised to have received a total of **one hundred talk proposals** and were -amazed that 600 people requested to be notified when ticket go on sale. This is incredible! - -When we organized the conference, we decided to start small since this is the -first React.js conference. Also, we weren't sure what level of demand to expect, -so we planned for a single-track, two-day conference on Facebook's campus. The -largest room available would accommodate 18 speaking slots and 200 attendees. -The spacial configuration makes it difficult to add a second track and changing -venues only two months in advance would be too difficult, so we are deciding to -stick with the originally planned format and venue on Facebook's campus. - -Unfortunately, this means that we can only accept a small number of the awesome -conference talk proposals. In order to make sure attendees get a fair shot at -registering, we're going to sell tickets in three separate first-come, -first-serve phases. **Tickets will cost $200 regardless of which phase they are -purchased from and all proceeds will go to charity**. - -- Friday November 28th 2014 — Noon PST: First wave of tickets -- Friday December 5th 2014 — Noon PST: Second wave of tickets -- Friday December 12th 2014 — Noon PST: Third and last wave of tickets - -We really do wish that everyone could attend React.js Conf, but in order to -ensure a quality experience for those who attend, we feel it will be best to -limit the size of the conference to what was originally planned for. This means -that not everyone who wants to attend will be able to, and many talks that -would be excellent contributions to the conference will have to be postponed -until the next conference. All the talks will be recorded and put online shortly after. - -We hope to see many of you at React.js Conf this January. - -Sincerely, - -React Core Team diff --git a/content/blog/2014-11-25-community-roundup-24.md b/content/blog/2014-11-25-community-roundup-24.md deleted file mode 100644 index bf34f58f5a7..00000000000 --- a/content/blog/2014-11-25-community-roundup-24.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: "Community Round-up #24" -layout: post -author: [steveluscher] ---- - -## Keep it Simple - -Pedro Nauck ([pedronauck](https://github.com/pedronauck)) delivered an impeccably illustrated deck at Brazil's _Front in Floripa_ conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple. - - - -Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic of complexity in this blog post about [coping with scaling up](http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/), where he describes how his team used React to make possible the “nearly impossible.” - -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. - - - -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. - - - -## All About Isomorphism - -Michael Ridgway ([mridgway](https://github.com/mridgway)) shows us how Yahoo! (who recently [moved Yahoo! Mail to React](http://www.slideshare.net/rmsguhan/react-meetup-mailonreact)) renders their React+Flux application, server-side. - - - -Péter Márton ([hekike](https://github.com/hekike)) helps us brew a cold one (literally) using an application that's server-client [isomorphic and indexable](http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/). Demo and sample code included – cold ones sold separately. - -And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker ([nhunzaker](https://github.com/nhunzaker)) [server renders data visualizations as SVG](http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization) with React. - -## React Router Mows the Lawn - -Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson ([mjackson](https://github.com/mjackson)) unveiled a new API for [React Router](https://github.com/rackt/react-router) that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've [rolled your ideas into their latest release](https://github.com/rackt/react-router/wiki/Announcements). - -## React in Practice - -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 - - - -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. - -We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “[The Vanishing Game](https://thevanishinggame.wellstoried.com)” and see for yourself. - -## Be Kind, Rewind - -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. - - - -## Community Components - -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. - -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. - -To find these, and more community-built components, consult the [React Components](http://react-components.com/) and [React Rocks](http://react.rocks) component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword `react-component` to your `package.json` to get listed on React Components, and [submit a link to React Rocks](https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform). - -## Waiter, There's a CSS In My JavaScript - -The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau ([vjeux](https://github.com/vjeux)) talks about some of the [fundamental style management challenges](https://speakerdeck.com/vjeux/react-css-in-js) we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused [react-style](https://github.com/js-next/react-style). - -## Test Isolation - -Yahoo! shows us how they make use of `iframe` elements to [unit test React components in isolation](http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil). - -## You've Got The Hang of Flux, Now Let's Flow - -Facebook Open Source released [Flow](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/) this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to [type check React applications](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility). There's never been a better reason to start making use of `propTypes` in your component specifications! - -## Countdown to React.js Conf 2014 - -We're counting down the days until [React.js Conf](http://conf.reactjs.com) at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014. - -## React Meetups Around the World - - - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
diff --git a/content/blog/2014-12-18-react-v0.12.2.md b/content/blog/2014-12-18-react-v0.12.2.md deleted file mode 100644 index ef038fa5f2d..00000000000 --- a/content/blog/2014-12-18-react-v0.12.2.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: React v0.12.2 -author: [zpao] ---- - -We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months. - -You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of [Flow](http://flowtype.org/), with only transform-related changes. Namely we added a flag to the `jsx` executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn't update for that release, you can safely skip it and move directly to v0.12.2. - -The release is available for download from the CDN: - -* **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **In-Browser JSX transformer** - - -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. - -Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry. - -## Changelog - -### React Core - -* Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth` -* Added `strokeOpacity` to the list of unitless CSS properties -* Removed trailing commas (allows npm module to be bundled and used in IE8) -* Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning - -### React Tools - -* JSX-related transforms now always use double quotes for props and `displayName` - diff --git a/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md b/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md deleted file mode 100644 index bb7cd23fb36..00000000000 --- a/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: React.js Conf Diversity Scholarship -author: [zpao] ---- - -Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference. - -I'm really excited about this and I hope you are too! The full announcement is below: - -- - - - -The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship! - -Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the [website](http://conf.reactjs.com/) and [previous](/blog/2014/10/27/react-js-conf.html) [updates](/blog/2014/11/24/react-js-conf-updates.html) on our blog. - -At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. -Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws. - -To apply for the scholarship, please visit the Application Page: - -## Award Includes - -* Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA -* Paid travel and lodging expenses -* Additional $200 meal stipend - -## Important Dates - -* Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full -* Friday, January 9, 2015: Award recipients will be notified by email of their acceptance -* Wednesday & Thursday, January 28 & 29, 2015: React.js Conf - -## Eligibility - -* Must currently be studying or working in Computer Science or a related field -* International applicants are welcome, but you will be responsible for securing your own visa to attend the conference -* You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park diff --git a/content/blog/2015-01-27-react-v0.13.0-beta-1.md b/content/blog/2015-01-27-react-v0.13.0-beta-1.md deleted file mode 100644 index 76fea92da4d..00000000000 --- a/content/blog/2015-01-27-react-v0.13.0-beta-1.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: React v0.13.0 Beta 1 -author: [sebmarkbage] ---- - -React 0.13 has a lot of nice features but there is one particular feature that I'm really excited about. I couldn't wait for React.js Conf to start tomorrow morning. - -Maybe you're like me and staying up late excited about the conference, or maybe you weren't one of the lucky ones to get a ticket. Either way I figured I'd give you all something to play with until then. - -We just published a beta version of React v0.13.0 to [npm](https://www.npmjs.com/package/react)! You can install it with `npm install react@0.13.0-beta.1`. Since this is a pre-release, we don't have proper release notes ready. - -So what is that one feature I'm so excited about that I just couldn't wait to share? - - -## Plain JavaScript Classes!! - -JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework. - -We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes. - -In React 0.13.0 you no longer need to use `React.createClass` to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with `react-tools` by making use of the harmony option: `jsx --harmony`. - - -### ES6 Classes - -```javascript -class HelloMessage extends React.Component { - render() { - return
Hello {this.props.name}
; - } -} - -React.render(, mountNode); -``` - -The API is mostly what you would expect, with the exception of `getInitialState`. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise `getDefaultProps` and `propTypes` are really just properties on the constructor. - -```javascript -export class Counter extends React.Component { - constructor(props) { - super(props); - this.state = {count: props.initialCount}; - } - tick() { - this.setState({count: this.state.count + 1}); - } - render() { - return ( -
- Clicks: {this.state.count} -
- ); - } -} -Counter.propTypes = { initialCount: React.PropTypes.number }; -Counter.defaultProps = { initialCount: 0 }; -``` - -### ES7+ Property Initializers - -Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this: - -```javascript -// Future Version -export class Counter extends React.Component { - static propTypes = { initialCount: React.PropTypes.number }; - static defaultProps = { initialCount: 0 }; - state = { count: this.props.initialCount }; - tick() { - this.setState({ count: this.state.count + 1 }); - } - render() { - return ( -
- Clicks: {this.state.count} -
- ); - } -} -``` - -This was inspired by TypeScript's property initializers. - -### Autobinding - -`React.createClass` has a built-in magic feature that bound all methods to `this` automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes. - -Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want. - -```javascript -class Counter extends React.Component { - constructor(props) { - super(props); - this.tick = this.tick.bind(this); - } - tick() { - ... - } - ... -} -``` - -However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically: - -```javascript -class Counter extends React.Component { - tick = () => { - ... - } - ... -} -``` - -### Mixins - -Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts. - -There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn't help that effort. - -Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store. - -Luckily, if you want to keep using mixins, you can just keep using `React.createClass`. - -> **Note:** -> -> The classic `React.createClass` style of creating classes will continue to work just fine. - -## Other Languages! - -Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript. - -You can also use CoffeeScript classes: - -```coffeescript -div = React.createFactory 'div' - -class Counter extends React.Component - @propTypes = initialCount: React.PropTypes.number - @defaultProps = initialCount: 0 - - constructor: (props) -> - super props - @state = count: props.initialCount - - tick: => - @setState count: @state.count + 1 - - render: -> - div onClick: @tick, - 'Clicks: ' - @state.count -``` - -You can even use the old ES3 module pattern if you want: - -```javascript -function MyComponent(initialProps) { - return { - state: { value: initialProps.initialValue }, - render: function() { - return - } - }; -} -``` diff --git a/content/blog/2015-02-18-react-conf-roundup-2015.md b/content/blog/2015-02-18-react-conf-roundup-2015.md deleted file mode 100644 index 3f7d3dfc266..00000000000 --- a/content/blog/2015-02-18-react-conf-roundup-2015.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: React.js Conf Round-up 2015 -layout: post -author: [steveluscher] ---- - -It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native. - -## The talks - -
-
-

Keynote #

-

- Tom Occhino opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM? -

-
-
- -
-
- -
-
-

Tweaking in real time #

-

- Brenton Simpson showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using webpack, react-hot-loader, and Ambidex. -

-
-
- -
-
- -
-
-

Abstract Syntax Trees #

-

- Gurdas Nijor showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases. -

-
-
- -
-
- -
-
-

Relay and GraphQL #

-

- Daniel Schafer and Jing Chen showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL. -

-
-
- -
-
- -
-
-

Channels #

-

- James Long explores what might happen if we introduce channels, a new style of coordinating actions, to React. -

-
-
- -
-
- -
-
-

React Router #

-

- Michael Jackson reminded us that URLs should be part of our design process, and showed us how react-router can help to manage the transitions between them. -

-
-
- -
-
- -
-
-

Full-stack Flux #

-

- Pete Hunt showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend. -

-
-
- -
-
- -
-
-

High-performance #

-

- Jason Bonta 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 FixedDataTable. -

-
-
- -
-
- -
-
-

FormatJS and react-intl #

-

- Eric Ferraiuolo showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs. -

-
-
- -
-
- -
-
-

Hype! #

-

- Ryan Florence showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.” -

-
-
- -
-
- -
-
-

React Native #

-

- Christopher Chedeau showed us how to bring the developer experience of working with React on the web to native app development, using React Native. -

-
-
- -
-
- -
-
-

Components #

-

- Andrew Rota explained how React and Web Components can work together, and how to avoid some common pitfalls. -

-
-
- -
-
- -
-
-

Immutability #

-

- Lee Byron led a master-class on persistent immutable data structures, showing us the world of possibility that they can unlock for your software, and perhaps JavaScript in general. -

-
-
- -
-
- -
-
-

Beyond the DOM #

-

- Jafar Husain told us a story about how Netflix was able to push React into places where the DOM could not go. -

-
- -
-
- -
-
-

Data Visualization #

-

- Zach Nation showed us how we can produce visualizations from over 45 million data points without breaking a sweat. -

-
- -
-
- -
-
-

React Refracted #

-

- David Nolen gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way. -

-
- -
-
- -
-
-

Flux Panel #

-

- Bill Fisher coordinated a Flux panel together with Michael Ridgway, Spike Brehm, Andres Suarez, Jing Chen, Ian Obermiller, and Kyle Davis. -

-
- -
-
- -
-
-

Component communication #

-

- Bonnie Eisenman led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy. -

-
- -
-
- -
-
-

Flow and TypeScript #

-

- James Brantly demonstrated how we can reap the benefits of static typing using both Flow and TypeScript. -

-
- -
-
- -
-
-

Core Team Q&A #

-

- Tom Occhino, Sophie Alpert, Lee Byron, Christopher Chedeau, Sebastian Markbåge, Jing Chen, and Dan Schafer closed the conference with a Q&A session. -

-
- -
-
- -## Reactions - -The conference is over, but the conversation has just begun. - -**Mihai Parparita** detailed his efforts to [hack his way to a React.js Conf ticket](http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html); **James Long** blogged about [his first encounter with React Native](http://jlongster.com/First-Impressions-using-React-Native); **Eric Florenzano** talked about how he perceives the [impact of Relay, GraphQL, and React Native](https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2) on software development; **Margaret Staples** blogged about her experience of [being on-campus at Facebook HQ](http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html); **Jeff Barczewski** tied his experience of attending the conference up with a bow in this [blog post filled with photos, videos, and links](http://codewinds.com/blog/2015-02-04-reactjs-conf.html); **Kevin Old** left us with [his takeaways](http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html); **Paul Wittmann** found React Native [freshly on his radar](http://www.railslove.com/stories/fresh-on-our-radar-react-native); and finally, undeterred by not being able to attend the conference in person, **Justin Ball** [summarized it from afar](http://www.justinball.com/2015/02/02/i-didn't-attend-react.js-conf.html). - -And, in case you missed a session, you can borrow **Michael Chan’s** [drawings](http://chantastic.io/2015-reactjs-conf/), **Mihai Parparita’s** [summary](https://quip.com/uJQeABv7nkFN), or **Shaohua Zhou’s** [day 1](http://getshao.com/2015/01/29/react-js-conf-notes-day1/) / [day 2](http://getshao.com/2015/01/29/react-js-conf-notes-day-2/) notes. - -
-
- - - -
-
- - ] - - -
-
- -**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. - - diff --git a/content/blog/2015-02-20-introducing-relay-and-graphql.md b/content/blog/2015-02-20-introducing-relay-and-graphql.md deleted file mode 100644 index 90ab3093f08..00000000000 --- a/content/blog/2015-02-20-introducing-relay-and-graphql.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: "Introducing Relay and GraphQL" -layout: post -author: [wincent] ---- - -## Data fetching for React applications - -There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At [React.js Conf](http://conf.reactjs.com/) we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself. - - - -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. - - - -## What is Relay? - -Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015). - -Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on `this.props`. - -Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data. - -## What is GraphQL? - -GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years. - -On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL. - -## The value proposition - -Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application. - -By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it's not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload. - -Co-location leads developers to fall into the "pit of success", because they get exactly the data they asked for and the data they asked for is explicitly defined right next to where it is used. This means that performance becomes the default (it becomes much harder to accidentally over-fetch), and components are more robust (under-fetching is also less likely for the same reason, so components won't try to render missing data and blow up at runtime). - -Relay provides a predictable environment for developers by maintaining an invariant: a component won't be rendered until all the data it requested is available. Additionally, queries are defined statically (ie. we can extract queries from a component tree before rendering) and the GraphQL schema provides an authoritative description of what queries are valid, so we can validate queries early and fail fast when the developer makes a mistake. - -Only the fields of an object that a component explicitly asks for will be accessible to that component, even if other fields are known and cached in the store (because another component requested them). This makes it impossible for implicit data dependency bugs to exist latently in the system. - -By handling all data-fetching via a single abstraction, we're able to handle a bunch of things that would otherwise have to be dealt with repeatedly and pervasively across the application: - -- **Performance:** All queries flow through the framework code, where things that would otherwise be inefficient, repeated query patterns get automatically collapsed and batched into efficient, minimal queries. Likewise, the framework knows which data have been previously requested, or for which requests are currently "in flight", so queries can be automatically de-duplicated and the minimal queries can be produced. -- **Subscriptions:** All data flows into a single store, and all reads from the store are via the framework. This means the framework knows which components care about which data and which should be re-rendered when data changes; components never have to set up individual subscriptions. -- **Common patterns:** We can make common patterns easy. Pagination is the example that [Jing](https://twitter.com/jingc) gave at the conference: if you have 10 records initially, getting the next page just means declaring you want 15 records in total, and the framework automatically constructs the minimal query to grab the delta between what you have and what you need, requests it, and re-renders your view when the data become available. -- **Simplified server implementation:** Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources. -- **Uniform mutations:** There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you'll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate "optimistic" update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back. - -## How does it relate to Flux? - -In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations. - -At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state. - -## Open source plans - -We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there). - -In the meantime, we'll be providing more and more information in the form of blog posts (and in [other channels](https://gist.github.com/wincent/598fa75e22bdfa44cf47)). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more. - -Watch this space! diff --git a/content/blog/2015-02-24-react-v0.13-rc1.md b/content/blog/2015-02-24-react-v0.13-rc1.md deleted file mode 100644 index 28ec58dbead..00000000000 --- a/content/blog/2015-02-24-react-v0.13-rc1.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: "React v0.13 RC" -author: [zpao] -date: 2015-02-24 14:00 ---- - -Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13! - -We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in [our beta announcement](/blog/2015/01/27/react-v0.13.0-beta-1.html). We're really excited about this! Sebastian also posted earlier this morning about [some of the other changes coming focused around ReactElement](/blog/2015/02/24/streamlining-react-elements.html). The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience. - - -The release candidate is available for download: - -* **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **In-Browser JSX transformer** - - -We've also published version `0.13.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower. - -- - - - -## Changelog - -### React Core - -#### Breaking Changes - -* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated -* Static methods (defined in `statics`) are no longer autobound to the component class -* `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless -* Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous. -* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises. -* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`. - -#### New Features - -* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details -* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward. -* New `ref` style, allowing a callback to be used in place of a name: ` this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`) -* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` -- this means that you no longer need to use `this._pendingState`, which is now gone. -* Support for iterators and immutable-js sequences as children - -#### Deprecations - -* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`) -* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (for example, `getDOMNode`, `setProps`, `replaceState`). - - -### React with Add-Ons - -#### Deprecations - -* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module. - - -### React Tools - -#### Breaking Changes - -* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior - -#### New Features - -* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target. - * `es5` is the default. - * `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility). -* The transform for the call spread operator has also been enabled. - - -### JSX - -#### Breaking Changes -* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code. diff --git a/content/blog/2015-02-24-streamlining-react-elements.md b/content/blog/2015-02-24-streamlining-react-elements.md deleted file mode 100644 index aa76a70438c..00000000000 --- a/content/blog/2015-02-24-streamlining-react-elements.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: "Streamlining React Elements" -author: [sebmarkbage] -date: 2015-02-24 11:00 ---- - -React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we're adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community. - -If you use React in an idiomatic way, chances are, you’ll never see any of these warnings. In that case, you can skip this blog post. You can just enjoy the benefits! These changes will unlock simplified semantics, better error messages, stack traces and compiler optimizations! - -## Immutable Props - -In React 0.12, the props object was mutable. It allows you to do patterns like this: - -```js -var element = ; -if (shouldUseFoo) { - element.props.foo = 10; - element.props.bar = true; -} -``` - -The problem is that we don’t have a convenient way to tell when you’re done mutating. - -### Problem: Mutating Props You Don’t Own - -If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this: - -```js -var element = this.props.child; -element.props.count = this.state.count; -return element; -``` - -You take a ReactElement through `props.child` and mutate its property before rendering it. If this component's state updates, this render function won't actually get a new ReactElement in `props.child`. It will be the same one. You're mutating the same props. - -You could imagine that this would work. However, this disables the ability for any component to use `shouldComponentUpdate`. It looks like the component never changed because the previous value is always the same as the next one. Since the DOM layer does diffing, this pattern doesn't even work in this case. The change will never propagate down to the DOM except the first time. - -Additionally, if this element is reused in other places or used to switch back and forth between two modes, then you have all kinds of weird race conditions. - -It has always been broken to mutate the props of something passed into you. The problem is that we can’t warn you about this special case if you accidentally do this. - -### Problem: Too Late Validation - -In React 0.12, we do PropType validation very deep inside React during mounting. This means that by the time you get an error, the debugger stack is long gone. This makes it difficult to find complex issues during debugging. We have to do this since it is fairly common for extra props to be added between the call to React.createElement and the mount time. So the type is incomplete until then. - -The static analysis in Flow is also impaired by this. There is no convenient place in the code where Flow can determine that the props are finalized. - -### Solution: Immutable Props - -Therefore, we would like to be able to freeze the element.props object so that it is immediately immutable at the JSX callsite (or createElement). In React 0.13 we will start warning you if you mutate `element.props` after this point. - -You can generally refactor these pattern to simply use two different JSX calls: - -```js -if (shouldUseFoo) { - return ; -} else { - return ; -} -``` - -However, if you really need to dynamically build up your props you can just use a temporary object and spread it into JSX: - -```js -var props = { bar: false }; -if (shouldUseFoo) { - props.foo = 10; - props.bar = true; -} -return ; -``` - -It is still OK to do deep mutations of objects. E.g: - -```js -return ; -``` - -In this case it's still ok to mutate the myModel object in state. We recommend that you use fully immutable models. E.g. by using immutable-js. However, we realize that mutable models are still convenient in many cases. Therefore we're only considering shallow freezing the props object that belongs to the ReactElement itself. Not nested objects. - -### Solution: Early PropType Warnings - -We will also start warning you for PropTypes at the JSX or createElement callsite. This will help debugging as you’ll have the stack trace right there. Similarly, Flow also validates PropTypes at this callsite. - -Note: There are valid patterns that clones a ReactElement and adds additional props to it. In that case these additional props needs to be optional. - -```js -var element1 = ; // extra prop is optional -var element2 = React.addons.cloneWithProps(element1, { extra: 'prop' }); -``` - -## Owner - -In React each child has both a "parent" and an “owner”. The owner is the component that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite. - -```js -class Foo { - render() { - return
; - } -} -``` - -In this example, the owner of the `span` is `Foo` but the parent is the `div`. - -There is also an undocumented feature called "context" that also relies on the concept of an “owner” to pass hidden props down the tree. - -### Problem: The Semantics are Opaque and Confusing - -The problem is that these are hidden artifacts attached to the ReactElement. In fact, you probably didn’t even know about it. It silently changes semantics. Take this for example: - -```js -var foo = ; -class Component { - render() { - return bar ? : foo; - } -} -``` - -These two inputs have different owners, therefore React will not keep its state when the conditional switches. There is nothing in the code to indicate that. Similarly, if you use `React.addons.cloneWithProps`, the owner changes. - -### Problem: Timing Matters - -The owner is tracked by the currently executing stack. This means that the semantics of a ReactElement varies depending on when it is executed. Take this example: - -```js -class A { - render() { - return {text}} />; - } -} -class B { - render() { - return this.props.renderer('foo'); - } -} -``` - -The owner of the `span` is actually `B`, not `A` because of the timing of the callback. This all adds complexity and suffers from similar problems as mutation. - -### Problem: It Couples JSX to React - -Have you wondered why JSX depends on React? Couldn’t the transpiler have that built-in to its runtime? The reason you need to have `React.createElement` in scope is because we depend on internal state of React to capture the current "owner". Without this, you wouldn’t need to have React in scope. - -### Solution: Make Context Parent-Based Instead of Owner-Based - -The first thing we’re doing is warning you if you’re using the "owner" feature in a way that relies on it propagating through owners. Instead, we’re planning on propagating it through parents to its children. In almost all cases, this shouldn’t matter. In fact, parent-based contexts is simply a superset. - -### Solution: Remove the Semantic Implications of Owner - -It turns out that there are very few cases where owners are actually important part of state-semantics. As a precaution, we’ll warn you if it turns out that the owner is important to determine state. In almost every case this shouldn’t matter. Unless you’re doing some weird optimizations, you shouldn’t see this warning. - -### Pending: Change the refs Semantics - -Refs are still based on "owner". We haven’t fully solved this special case just yet. - -In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path. - -## Keyed Objects as Maps - -In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you. - -```js -
{ {a: , b: } }
-``` - -### Problem: Relies on Enumeration Order - -The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used. - -### Problem: Using Objects as Maps is Bad - -It is generally accepted that using objects as maps screw up type systems, VM optimizations, compilers etc. It is much better to use a dedicated data structure like ES6 Maps. - -More importantly, this can have important security implications. For example this has a potential security problem: - -```js -var children = {}; -items.forEach(item => children[item.title] = ); -return
{children}
; -``` - -Imagine if `item.title === '__proto__'` for example. - -### Problem: Can’t be Differentiated from Arbitrary Objects - -Since these objects can have any keys with almost any value, we can’t differentiate them from a mistake. If you put some random object, we will try our best to traverse it and render it, instead of failing with a helpful warning. In fact, this is one of the few places where you can accidentally get an infinite loop in React. - -To differentiate ReactElements from one of these objects, we have to tag them with `_isReactElement`. This is another issue preventing us from inlining ReactElements as simple object literals. - -### Solution: Just use an Array and key={…} - -Most of the time you can just use an array with keyed ReactElements. - -```js -var children = items.map(item => ); -
{children}
-``` - -### Solution: React.addons.createFragment - -However, this is not always possible if you’re trying to add a prefix key to an unknown set (e.g. this.props.children). It is also not always the easiest upgrade path. Therefore, we are adding a helper to `React.addons` called `createFragment()`. This accepts a keyed object and returns an opaque type. - -```js -
{React.addons.createFragment({ a:
, b: this.props.children })}
-``` - -The exact signature of this kind of fragment will be determined later. It will likely be some kind of immutable sequence. - -Note: This will still not be valid as the direct return value of `render()`. Unfortunately, they still need to be wrapped in a `
` or some other element. - -## Compiler Optimizations: Unlocked! - -These changes also unlock several possible compiler optimizations for static content in React 0.14. These optimizations were previously only available to template-based frameworks. They will now also be possible for React code! Both for JSX and `React.createElement/Factory`*! - -See these GitHub Issues for a deep dive into compiler optimizations: - -- [Reuse Constant Value Types](https://github.com/facebook/react/issues/3226) -- [Tagging ReactElements](https://github.com/facebook/react/issues/3227) -- [Inline ReactElements](https://github.com/facebook/react/issues/3228) - -\* If you use the recommended pattern of explicit React.createFactory calls on the consumer side - since they are easily statically analyzed. - -## Rationale - -I thought that these changes were particularly important because the mere existence of these patterns means that even components that DON’T use these patterns have to pay the price. There are other problematic patterns such as mutating state, but they’re at least localized to a component subtree so they don’t harm the ecosystem. - -As always, we’d love to hear your feedback and if you have any trouble upgrading, please let us know. diff --git a/content/blog/2015-03-03-react-v0.13-rc2.md b/content/blog/2015-03-03-react-v0.13-rc2.md deleted file mode 100644 index 76e6ec25cda..00000000000 --- a/content/blog/2015-03-03-react-v0.13-rc2.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: "React v0.13 RC2" -author: [sebmarkbage] ---- - -Thanks to everybody who has already been testing the release candidate. We've received some good feedback and as a result we're going to do a second release candidate. The changes are minimal. We haven't changed the behavior of any APIs we exposed in the previous release candidate. Here's a summary of the changes: - -* Introduced a new API (`React.cloneElement`, see below for details). -* Fixed a bug related to validating `propTypes` when using the new `React.addons.createFragment` API. -* Improved a couple warning messages. -* Upgraded jstransform and esprima. - -The release candidate is available for download: - -* **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **In-Browser JSX transformer** - - -We've also published version `0.13.0-rc2` of the `react` and `react-tools` packages on npm and the `react` package on bower. - -- - - - -## React.cloneElement - -In React v0.13 RC2 we will introduce a new API, similar to `React.addons.cloneWithProps`, with this signature: - -```js -React.cloneElement(element, props, ...children); -``` - -Unlike `cloneWithProps`, this new function does not have any magic built-in behavior for merging `style` and `className` for the same reason we don't have that feature from `transferPropsTo`. Nobody is sure what exactly the complete list of magic things are, which makes it difficult to reason about the code and difficult to reuse when `style` has a different signature (e.g. in the upcoming React Native). - -`React.cloneElement` is *almost* equivalent to: - -```js -{children} -``` - -However, unlike JSX and `cloneWithProps`, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element. - -One common pattern is to map over your children and add a new prop. There were many issues reported about `cloneWithProps` losing the ref, making it harder to reason about your code. Now following the same pattern with `cloneElement` will work as expected. For example: - -```js -var newChildren = React.Children.map(this.props.children, function(child) { - return React.cloneElement(child, { foo: true }) -}); -``` - -> Note: `React.cloneElement(child, { ref: 'newRef' })` *DOES* override the `ref` so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs. - -This was a critical feature to get into React 0.13 since props are now immutable. The upgrade path is often to clone the element, but by doing so you might lose the `ref`. Therefore, we needed a nicer upgrade path here. As we were upgrading callsites at Facebook we realized that we needed this method. We got the same feedback from the community. Therefore we decided to make another RC before the final release to make sure we get this in. - -We plan to eventually deprecate `React.addons.cloneWithProps`. We're not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using `React.cloneElement` instead. We'll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary. diff --git a/content/blog/2015-03-04-community-roundup-25.md b/content/blog/2015-03-04-community-roundup-25.md deleted file mode 100644 index c1f4e04bca6..00000000000 --- a/content/blog/2015-03-04-community-roundup-25.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: "Community Round-up #25" -layout: post -author: [matthewjohnston4] ---- - -## React 101 - -Interest in React has been exploding recently, so it's a good time to explore some great recent tutorials and videos that cover getting started. - -[Ryan Clark](https://github.com/rynclark) provides a [great overview of the basics of React](http://ryanclark.me/getting-started-with-react/) with the goal of building a really simple dropdown nav. - -[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: - - - -[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. - -Black Mutt Media [takes us through their usage of React](http://blackmuttmedia.com/blog/react-tmdb-api/) and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way. - -Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Platform Podcast](http://thewebplatform.libsyn.com/31-building-with-reactjs) to have a chat about all aspects of React. - - - -## Community Additions - -[Formidable Labs](https://github.com/FormidableLabs) have been busy, as they've also[ just launched Radium](http://projects.formidablelabs.com/radium/), a React component that provides you with the ability to use inline styles instead of CSS. They're also [looking for some help](http://projects.formidablelabs.com/radium-bootstrap/) contributing to a Radium Bootstrap implementation. - -[Reactiflux.com](http://reactiflux.com/) is a new Slack community based around (you guessed it!) React, and Flux. - -[React Week](http://reactweek.com/) is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by [Ryan Florence](https://github.com/ryanflorence). - -[Babel-sublime](https://github.com/babel/babel-sublime) is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions. - -[react-meteor](https://github.com/reactjs/react-meteor), a package that replaces the default templating system of the Meteor platform with React, recently received a big update. - -## Rebuilding with React - -[Rich Manalang](https://github.com/rmanalan) from Atlassian [explains why](https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/) they rebuilt their HipChat web client from scratch using React, and how they're already using it to rebuild their native desktop clients. - -[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. - -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.”. - -[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. - -
- -## It's F8! - -F8 2015 is just around the corner, and you can [sign up for the video streams](https://www.fbf8.com/stream.html) in advance because we're sure to be covering all things React. - -## Meetups - -
- - - -
- - - -
diff --git a/content/blog/2015-03-10-react-v0.13.md b/content/blog/2015-03-10-react-v0.13.md deleted file mode 100644 index 76d1ca02538..00000000000 --- a/content/blog/2015-03-10-react-v0.13.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: "React v0.13" -author: [sophiebits] ---- - -Today, we're happy to release React v0.13! - -The most notable new feature is [support for ES6 classes](/blog/2015/01/27/react-v0.13.0-beta-1.html), which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace `React.createClass` completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate `React.createClass`. - -At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We've always thought that performance isn't the most important reason to choose React, but we're still planning more optimizations to **make React even faster**. - -Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we've added runtime warnings that fire when props are changed or added between the time an element is created and when it's rendered. When migrating your code, you may want to use new `React.cloneElement` API (which is similar to `React.addons.cloneWithProps` but preserves `key` and `ref` and does not merge `style` or `className` automatically). For more information about our planned optimizations, see GitHub issues -[#3226](https://github.com/facebook/react/issues/3226), -[#3227](https://github.com/facebook/react/issues/3227), -[#3228](https://github.com/facebook/react/issues/3228). - -The release is now available for download: - -* **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **In-Browser JSX transformer** - - -We've also published version `0.13.0` of the `react` and `react-tools` packages on npm and the `react` package on bower. - -- - - - -## Changelog - -### React Core - -#### Breaking Changes - -* Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement -* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated -* Static methods (defined in `statics`) are no longer autobound to the component class -* `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless -* Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous. -* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises. -* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`. - -#### New Features - -* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details. -* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward. -* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details. -* New `ref` style, allowing a callback to be used in place of a name: ` this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`). -* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone. -* Support for iterators and immutable-js sequences as children. - -#### Deprecations - -* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`). -* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (`getDOMNode`, `replaceState`, `isMounted`, `setProps`, `replaceProps`). - - -### React with Add-Ons - -#### New Features - -* [`React.addons.createFragment` was added](/docs/create-fragment.html) for adding keys to entire sets of children. - -#### Deprecations - -* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module. -* Calls to `React.addons.cloneWithProps` can be migrated to use `React.cloneElement` instead – make sure to merge `style` and `className` manually if desired. - - -### React Tools - -#### Breaking Changes - -* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior - -#### New Features - -* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target. - * `es5` is the default. - * `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility). -* The transform for the call spread operator has also been enabled. - - -### JSX - -#### Breaking Changes -* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The [`jsx_orphaned_brackets_transformer`](https://www.npmjs.com/package/jsx_orphaned_brackets_transformer) package on npm can be used to find and fix potential issues in your JSX code. diff --git a/content/blog/2015-03-16-react-v0.13.1.md b/content/blog/2015-03-16-react-v0.13.1.md deleted file mode 100644 index 16b2e1bc0dc..00000000000 --- a/content/blog/2015-03-16-react-v0.13.1.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: "React v0.13.1" -author: [zpao] ---- - -It's been less than a week since we shipped v0.13.0 but it's time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues. - -Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren't on the core team! - -The release is now available for download: - -* **React** - Dev build with warnings: - Minified build for production: -* **React with Add-Ons** - Dev build with warnings: - Minified build for production: -* **In-Browser JSX transformer** - - -We've also published version `0.13.1` of the `react` and `react-tools` packages on npm and the `react` package on bower. - -- - - - -## Changelog - -### React Core - -#### Bug Fixes - -* Don't throw when rendering empty `; - } - - handleChange = event => { - this.setState({ email: event.target.value }); - }; - - componentWillReceiveProps(nextProps) { - // This will erase any local state updates! - // Do not do this. - this.setState({ email: nextProps.email }); - } -} -``` - -At first, this component might look okay. State is initialized to the value specified by props and updated when we type into the ``. But if our component's parent rerenders, anything we've typed into the `` will be lost! ([See this demo for an example.](https://codesandbox.io/s/m3w9zn1z8x)) This holds true even if we were to compare `nextProps.email !== this.state.email` before resetting. - -In this simple example, adding `shouldComponentUpdate` to rerender only when the email prop has changed could fix this. However in practice, components usually accept multiple props; another prop changing would still cause a rerender and improper reset. Function and object props are also often created inline, making it hard to implement a `shouldComponentUpdate` that reliably returns true only when a material change has happened. [Here is a demo that shows that happening.](https://codesandbox.io/s/jl0w6r9w59) As a result, `shouldComponentUpdate` is best used as a performance optimization, not to ensure correctness of derived state. - -Hopefully it's clear by now why **it is a bad idea to unconditionally copy props to state**. Before reviewing possible solutions, let's look at a related problematic pattern: what if we were to only update the state when the email prop changes? - -### Anti-pattern: Erasing state when props change - -Continuing the example above, we could avoid accidentally erasing state by only updating it when `props.email` changes: - -```js -class EmailInput extends Component { - state = { - email: this.props.email - }; - - componentWillReceiveProps(nextProps) { - // Any time props.email changes, update state. - if (nextProps.email !== this.props.email) { - this.setState({ - email: nextProps.email - }); - } - } - - // ... -} -``` - -> Note -> -> Even though the example above shows `componentWillReceiveProps`, the same anti-pattern applies to `getDerivedStateFromProps`. - -We've just made a big improvement. Now our component will erase what we've typed only when the props actually change. - -There is still a subtle problem. Imagine a password manager app using the above input component. When navigating between details for two accounts with the same email, the input would fail to reset. This is because the prop value passed to the component would be the same for both accounts! This would be a surprise to the user, as an unsaved change to one account would appear to affect other accounts that happened to share the same email. ([See demo here.](https://codesandbox.io/s/mz2lnkjkrx)) - -This design is fundamentally flawed, but it's also an easy mistake to make. ([I've made it myself!](https://twitter.com/brian_d_vaughn/status/959600888242307072)) Fortunately there are two alternatives that work better. The key to both is that **for any piece of data, you need to pick a single component that owns it as the source of truth, and avoid duplicating it in other components.** Let's take a look at each of the alternatives. - -## Preferred Solutions - -### Recommendation: Fully controlled component - -One way to avoid the problems mentioned above is to remove state from our component entirely. If the email address only exists as a prop, then we don't have to worry about conflicts with state. We could even convert `EmailInput` to a lighter-weight functional component: -```js -function EmailInput(props) { - return ; -} -``` - -This approach simplifies the implementation of our component, but if we still want to store a draft value, the parent form component will now need to do that manually. ([Click here to see a demo of this pattern.](https://codesandbox.io/s/7154w1l551)) - -### Recommendation: Fully uncontrolled component with a `key` - -Another alternative would be for our component to fully own the "draft" email state. In that case, our component could still accept a prop for the _initial_ value, but it would ignore subsequent changes to that prop: - -```js -class EmailInput extends Component { - state = { email: this.props.defaultEmail }; - - handleChange = event => { - this.setState({ email: event.target.value }); - }; - - render() { - return ; - } -} -``` - -In order to reset the value when moving to a different item (as in our password manager scenario), we can use the special React attribute called `key`. When a `key` changes, React will [_create_ a new component instance rather than _update_ the current one](/docs/reconciliation.html#keys). Keys are usually used for dynamic lists but are also useful here. In our case, we could use the user ID to recreate the email input any time a new user is selected: - -```js - -``` - -Each time the ID changes, the `EmailInput` will be recreated and its state will be reset to the latest `defaultEmail` value. ([Click here to see a demo of this pattern.](https://codesandbox.io/s/6v1znlxyxn)) With this approach, you don't have to add `key` to every input. It might make more sense to put a `key` on the whole form instead. Every time the key changes, all components within the form will be recreated with a freshly initialized state. - -In most cases, this is the best way to handle state that needs to be reset. - -> Note -> -> While this may sound slow, the performance difference is usually insignificant. Using a key can even be faster if the components have heavy logic that runs on updates since diffing gets bypassed for that subtree. - -#### Alternative 1: Reset uncontrolled component with an ID prop - -If `key` doesn't work for some reason (perhaps the component is very expensive to initialize), a workable but cumbersome solution would be to watch for changes to "userID" in `getDerivedStateFromProps`: - -```js -class EmailInput extends Component { - state = { - email: this.props.defaultEmail, - prevPropsUserID: this.props.userID - }; - - static getDerivedStateFromProps(props, state) { - // Any time the current user changes, - // Reset any parts of state that are tied to that user. - // In this simple example, that's just the email. - if (props.userID !== state.prevPropsUserID) { - return { - prevPropsUserID: props.userID, - email: props.defaultEmail - }; - } - return null; - } - - // ... -} -``` - -This also provides the flexibility to only reset parts of our component's internal state if we so choose. ([Click here to see a demo of this pattern.](https://codesandbox.io/s/rjyvp7l3rq)) - -> Note -> -> Even though the example above shows `getDerivedStateFromProps`, the same technique can be used with `componentWillReceiveProps`. - -#### Alternative 2: Reset uncontrolled component with an instance method - -More rarely, you may need to reset state even if there's no appropriate ID to use as `key`. One solution is to reset the key to a random value or autoincrementing number each time you want to reset. One other viable alternative is to expose an instance method to imperatively reset the internal state: - -```js -class EmailInput extends Component { - state = { - email: this.props.defaultEmail - }; - - resetEmailForNewUser(newEmail) { - this.setState({ email: newEmail }); - } - - // ... -} -``` - -The parent form component could then [use a `ref` to call this method](/docs/glossary.html#refs). ([Click here to see a demo of this pattern.](https://codesandbox.io/s/l70krvpykl)) - -Refs can be useful in certain cases like this one, but generally we recommend you use them sparingly. Even in the demo, this imperative method is nonideal because two renders will occur instead of one. - ------ - -### Recap - -To recap, when designing a component, it is important to decide whether its data will be controlled or uncontrolled. - -Instead of trying to **"mirror" a prop value in state**, make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than a child accepting a "committed" `props.value` and tracking a "draft" `state.value`, have the parent manage both `state.draftValue` and `state.committedValue` and control the child's value directly. This makes the data flow more explicit and predictable. - -For **uncontrolled** components, if you're trying to reset state when a particular prop (usually an ID) changes, you have a few options: -* **Recomendation: To reset _all internal state_, use the `key` attribute.** -* Alternative 1: To reset _only certain state fields_, watch for changes in a special property (e.g. `props.userID`). -* Alternative 2: You can also consider fall back to an imperative instance method using refs. - -## What about memoization? - -We've also seen derived state used to ensure an expensive value used in `render` is recomputed only when the inputs change. This technique is known as [memoization](https://en.wikipedia.org/wiki/Memoization). - -Using derived state for memoization isn't necessarily bad, but it's usually not the best solution. There is inherent complexity in managing derived state, and this complexity increases with each additional property. For example, if we add a second derived field to our component state then our implementation would need to separately track changes to both. - -Let's look at an example of one component that takes one prop—a list of items—and renders the items that match a search query entered by the user. We could use derived state to store the filtered list: - -```js -class Example extends Component { - state = { - filterText: "", - }; - - // ******************************************************* - // NOTE: this example is NOT the recommended approach. - // See the examples below for our recommendations instead. - // ******************************************************* - - static getDerivedStateFromProps(props, state) { - // Re-run the filter whenever the list array or filter text change. - // Note we need to store prevPropsList and prevFilterText to detect changes. - if ( - props.list !== state.prevPropsList || - state.prevFilterText !== state.filterText - ) { - return { - prevPropsList: props.list, - prevFilterText: state.filterText, - filteredList: props.list.filter(item => item.text.includes(state.filterText)) - }; - } - return null; - } - - handleChange = event => { - this.setState({ filterText: event.target.value }); - }; - - render() { - return ( - - -
    {this.state.filteredList.map(item =>
  • {item.text}
    • )}
- - ); - } -} -``` - -This implementation avoids recalculating `filteredList` more often than necessary. But it is more complicated than it needs to be, because it has to separately track and detect changes in both props and state in order to properly update the filtered list. In this example, we could simplify things by using `PureComponent` and moving the filter operation into the render method: - -```js -// PureComponents only rerender if at least one state or prop value changes. -// Change is determined by doing a shallow comparison of state and prop keys. -class Example extends PureComponent { - // State only needs to hold the current filter text value: - state = { - filterText: "" - }; - - handleChange = event => { - this.setState({ filterText: event.target.value }); - }; - - render() { - // The render method on this PureComponent is called only if - // props.list or state.filterText has changed. - const filteredList = this.props.list.filter( - item => item.text.includes(this.state.filterText) - ) - - return ( - - -
    {filteredList.map(item =>
  • {item.text}
    • )}
- - ); - } -} -``` - -The above approach is much cleaner and simpler than the derived state version. Occasionally, this won't be good enough—filtering may be slow for large lists, and `PureComponent` won't prevent rerenders if another prop were to change. To address both of these concerns, we could add a memoization helper to avoid unnecessarily re-filtering our list: - -```js -import memoize from "memoize-one"; - -class Example extends Component { - // State only needs to hold the current filter text value: - state = { filterText: "" }; - - // Re-run the filter whenever the list array or filter text changes: - filter = memoize( - (list, filterText) => list.filter(item => item.text.includes(filterText)) - ); - - handleChange = event => { - this.setState({ filterText: event.target.value }); - }; - - render() { - // Calculate the latest filtered list. If these arguments haven't changed - // since the last render, `memoize-one` will reuse the last return value. - const filteredList = this.filter(this.props.list, this.state.filterText); - - return ( - - -
    {filteredList.map(item =>
  • {item.text}
    • )}
- - ); - } -} -``` - -This is much simpler and performs just as well as the derived state version! - -When using memoization, remember a couple of constraints: - -1. In most cases, you'll want to **attach the memoized function to a component instance**. This prevents multiple instances of a component from resetting each other's memoized keys. -1. Typically you'll want to use a memoization helper with a **limited cache size** in order to prevent memory leaks over time. (In the example above, we used `memoize-one` because it only caches the most recent argument and result.) -1. None of the implementations shown in this section will work if `props.list` is recreated each time the parent component renders. But in most cases, this setup is appropriate. - -## In closing - -In real world applications, components often contain a mix of controlled and uncontrolled behaviors. This is okay! If each value has a clear source of truth, you can avoid the anti-patterns mentioned above. - -It is also worth re-iterating that `getDerivedStateFromProps` (and derived state in general) is an advanced feature and should be used sparingly because of this complexity. If your use case falls outside of these patterns, please share it with us on [GitHub](https://github.com/reactjs/reactjs.org/issues/new) or [Twitter](https://twitter.com/reactjs)! diff --git a/content/community/articles.md b/content/community/articles.md deleted file mode 100644 index 7ac99209e15..00000000000 --- a/content/community/articles.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: articles -title: Articles -layout: community -sectionid: community -permalink: community/articles.html ---- - -- [React How-to](https://github.com/petehunt/react-howto) - Pete Hunt's guide to the React ecosystem. -- [9 things every React.js beginner should know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know) - Cam Jackson's guide for beginners. -- [React "Aha" Moments](https://tylermcginnis.com/react-aha-moments/) - Tyler McGinnis' article on his collection of "Aha" moments with React. -- [You're missing the point of React](https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a) - Dan Abramov's article about the best parts of React. -- [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's reccommended timeline for learning React and the React ecosystem. -- [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - Joshua Comeau's guide to showcase how easy it can be to start modern React development. -- [React FAQ](https://reactfaq.site/) - An external site with articles that try to answer frequently asked questions about React. -- [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state. diff --git a/content/community/complementary-tools.it-IT.md b/content/community/complementary-tools.it-IT.md deleted file mode 100644 index def23d84827..00000000000 --- a/content/community/complementary-tools.it-IT.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: docs/complementary-tools-it-IT.html -layout: redirect -dest_url: https://github.com/facebook/react/wiki/Complementary-Tools ---- diff --git a/content/community/complementary-tools.ko-KR.md b/content/community/complementary-tools.ko-KR.md deleted file mode 100644 index b41ef3fe716..00000000000 --- a/content/community/complementary-tools.ko-KR.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: docs/complementary-tools-ko-KR.html -layout: redirect -dest_url: https://github.com/facebook/react/wiki/Complementary-Tools ---- diff --git a/content/community/complementary-tools.md b/content/community/complementary-tools.md deleted file mode 100644 index d3dcf0406ad..00000000000 --- a/content/community/complementary-tools.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: docs/complementary-tools.html -layout: redirect -dest_url: https://github.com/facebook/react/wiki/Complementary-Tools ---- diff --git a/content/community/complementary-tools.zh-CN.md b/content/community/complementary-tools.zh-CN.md deleted file mode 100644 index e27a8bc5f1b..00000000000 --- a/content/community/complementary-tools.zh-CN.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: docs/complementary-tools-zh-CN.html -layout: redirect -dest_url: https://github.com/facebook/react/wiki/Complementary-Tools ---- diff --git a/content/community/conferences.it-IT.md b/content/community/conferences.it-IT.md deleted file mode 100644 index 8cd3facb167..00000000000 --- a/content/community/conferences.it-IT.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: conferences-it-IT -title: Conferenze -permalink: docs/conferences-it-IT.html -prev: thinking-in-react-it-IT.html -next: videos-it-IT.html ---- - -### React.js Conf 2015 -28 e 29 Gennaio - -[Sito web](http://conf.reactjs.com/) - [Agenda](http://conf.reactjs.com/schedule.html) - [Video](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) - - - -### ReactEurope 2015 -2 e 3 Luglio - -[Sito web](http://www.react-europe.org/) - [Agenda](http://www.react-europe.org/#schedule) diff --git a/content/community/conferences.ko-KR.md b/content/community/conferences.ko-KR.md deleted file mode 100644 index 210ab3b5252..00000000000 --- a/content/community/conferences.ko-KR.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: conferences-ko-KR -title: 컨퍼런스들 -permalink: docs/conferences-ko-KR.html -prev: thinking-in-react-ko-KR.html -next: videos-ko-KR.html ---- - -### React.js Conf 2015 -1월 28일 & 29일 - -[웹사이트](http://conf.reactjs.com/) - [스케줄](http://conf.reactjs.com/schedule.html) - [비디오들](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) - - - -### ReactEurope 2015 -7월 2일 & 3일 - -[웹사이트](http://www.react-europe.org/) - [스케줄](http://www.react-europe.org/#schedule) diff --git a/content/community/conferences.md b/content/community/conferences.md deleted file mode 100644 index dd1063d1390..00000000000 --- a/content/community/conferences.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: conferences -title: Conferences -layout: community -sectionid: community -permalink: community/conferences.html -redirect_from: "docs/conferences.html" ---- - -Do you know of a local React.js conference? Add it here! (Please keep the list chronological) - -## Upcoming Conferences - -### Chain React 2018 -July 11-13 in Portland, Oregon USA - -[Website](https://infinite.red/ChainReactConf) - [Twitter](https://twitter.com/chainreactconf) - -### React Rally -August 16-17 in Salt Lake City, Utah USA - -[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally) - -### ReactFoo Delhi -August 18 in Delhi, India - -[Website](https://reactfoo.in/2018-delhi/) - [Twitter](https://twitter.com/reactfoo) - [Past talks](https://hasgeek.tv) - -### #byteconf\_react\_2018 -August 30-31 streamed online, via Twitch - -[Website](https://byteconf.com) - [Twitter](https://twitter.com/byteconf) - -### React Native EU 2018 -September 5-6 in Wrocław, Poland - -[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu) - -### ReactNext 2018 -September 6 in Tel Aviv, Israel - -[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Facebook](https://facebook.com/ReactNext2016) - -### React Alicante 2018 -September 13-15 in Alicante, Spain - -[Website](http://reactalicante.es) - [Twitter](https://twitter.com/ReactAlicante) - -### ReactJS Day 2018 -October 5 in Verona, Italy - -[Website](http://2018.reactjsday.it) - [Twitter](https://twitter.com/reactjsday) - -### React Day Berlin 2018 -November 30, Berlin, Germany - -[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/channel/UC1EYHmQYBUJjkmL6OtK4rlw) - -## Past Conferences - -### React.js Conf 2015 -January 28 & 29 in Facebook HQ, CA - -[Website](http://conf2015.reactjs.org/) - [Schedule](http://conf2015.reactjs.org/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) - - - -### ReactEurope 2015 -July 2 & 3 in Paris, France - -[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists) - -### Reactive 2015 -November 2-4 in Bratislava, Slovakia - -[Website](https://reactive2015.com/) - [Schedule](https://reactive2015.com/schedule_speakers.html#schedule) - -### React.js Conf 2016 -February 22 & 23 in San Francisco, CA - -[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY) - -### React Amsterdam 2016 -April 16 in Amsterdam, The Netherlands - -[Website](https://react.amsterdam/2016) - [Videos](https://youtu.be/sXDZBxbRRag?list=PLNBNS7NRGKMG3uLrm5fgY02hJ87Wzb4IU) - -### ReactEurope 2016 -June 2 & 3 in Paris, France - -[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists) - -### ReactRally 2016 -August 25-26 in Salt Lake City, UT - -[Website](http://www.reactrally.com/) - [Schedule](http://www.reactrally.com/#/schedule) - [Videos](https://www.youtube.com/playlist?list=PLUD4kD-wL_zYSfU3tIYsb4WqfFQzO_EjQ) - -### ReactNext 2016 -September 15 in Tel Aviv, Israel - -[Website](http://react-next.com/) - [Schedule](http://react-next.com/#schedule) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w) - -### ReactNL 2016 -October 13 in Amsterdam, The Netherlands - [Schedule](http://reactnl.org/#program) - -[Website](http://reactnl.org/) - -### Reactive 2016 -October 26-28 in Bratislava, Slovakia - -[Website](https://reactiveconf.com/) - -### React Remote Conf 2016 -October 26-28 online - -[Website](https://allremoteconfs.com/react-2016) - [Schedule](https://allremoteconfs.com/react-2016#schedule) - -### Agent Conference 2017 -January 20-21 in Dornbirn, Austria - -[Website](http://agent.sh/) - -### React Conf 2017 -March 13-14 in Santa Clara, CA - -[Website](http://conf.reactjs.org/) - [Videos](https://www.youtube.com/watch?v=7HSd1sk07uU&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0) - -### React London 2017 -March 28th at the [QEII Centre, London](http://qeiicentre.london/) - -[Website](http://react.london/) - [Videos](https://www.youtube.com/watch?v=2j9rSur_mnk&list=PLW6ORi0XZU0CFjdoYeC0f5QReBG-NeNKJ) - -### React Amsterdam 2017 -April 21st in Amsterdam, The Netherlands - -[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Videos](https://www.youtube.com/watch?v=NQyL-Dm7Kig&list=PLNBNS7NRGKMHxfm0CcYNuINLdRw7r4a9M) - -### ReactEurope 2017 -May 18th & 19th in Paris, France - -[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists) - -### Chain React 2017 -July 10-11 in Portland, Oregon USA - -[Website](https://infinite.red/ChainReactConf) - [Twitter](https://twitter.com/chainreactconf) - [Videos](https://www.youtube.com/watch?v=cz5BzwgATpc&list=PLFHvL21g9bk3RxJ1Ut5nR_uTZFVOxu522) - -### React Rally 2017 -August 24-25 in Salt Lake City, Utah USA - -[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally) - [Videos](https://www.youtube.com/watch?v=f4KnHNCZcH4&list=PLUD4kD-wL_zZUhvAIHJjueJDPr6qHvkni) - -### React Native EU 2017 -September 6-7 in Wroclaw, Poland - -[Website](http://react-native.eu/) - [Videos](https://www.youtube.com/watch?v=453oKJAqfy0&list=PLzUKC1ci01h_hkn7_KoFA-Au0DXLAQZR7) - -### ReactNext 2017 -September 8-10 in Tel Aviv, Israel - -[Website](http://react-next.com/) - [Twitter](https://twitter.com/ReactNext) - [Videos (Hall A)](https://www.youtube.com/watch?v=eKXQw5kR86c&list=PLMYVq3z1QxSqq6D7jxVdqttOX7H_Brq8Z), [Videos (Hall B)](https://www.youtube.com/watch?v=1InokWxYGnE&list=PLMYVq3z1QxSqCZmaqgTXLsrcJ8mZmBF7T) - -### ReactFoo 2017 -September 14 in Bangalore, India - -[Website](https://reactfoo.in/2017/) - [Videos](https://www.youtube.com/watch?v=3G6tMg29Wnw&list=PL279M8GbNsespKKm1L0NAzYLO6gU5LvfH) - -### React Boston 2017 -September 23-24 in Boston, Massachusetts USA - -[Website](http://www.reactboston.com/) - [Twitter](https://twitter.com/ReactBoston) - [Videos](https://www.youtube.com/watch?v=2iPE5l3cl_s&list=PL-fCkV3wv4ub8zJMIhmrrLcQqSR5XPlIT) - -### React Alicante 2017 -September 28-30 in Alicante, Spain - -[Website](http://reactalicante.es) - [Twitter](https://twitter.com/ReactAlicante) - [Videos](https://www.youtube.com/watch?v=UMZvRCWo6Dw&list=PLd7nkr8mN0sWvBH_s0foCE6eZTX8BmLUM) - -### ReactJS Day 2017 -October 6 in Verona, Italy - -[Website](http://2017.reactjsday.it) - [Twitter](https://twitter.com/reactjsday) - [Videos](https://www.youtube.com/watch?v=bUqqJPIgjNU&list=PLWK9j6ps_unl293VhhN4RYMCISxye3xH9) - -### React Conf Brasil 2017 -October 7 in Sao Paulo, Brazil - -[Website](http://reactconfbr.com.br) - [Twitter](https://twitter.com/reactconfbr) - [Facebook](https://www.facebook.com/reactconf/) - -### State.js Conference 2017 -October 13 in Stockholm, Sweden - -[Website](https://statejs.com/) - -### React Summit 2017 -October 21 in Lagos, Nigeria - -[Website](https://reactsummit2017.splashthat.com/) - [Twitter](https://twitter.com/DevCircleLagos/) - [Facebook](https://www.facebook.com/groups/DevCLagos/) - -### ReactiveConf 2017 -October 25–27, Bratislava, Slovakia - -[Website](https://reactiveconf.com) - [Videos](https://www.youtube.com/watch?v=BOKxSFB2hOE&list=PLa2ZZ09WYepMB-I7AiDjDYR8TjO8uoNjs) - -### React Seoul 2017 -November 4 in Seoul, South Korea - -[Website](http://seoul.reactjs.kr/en) - -### React Day Berlin 2017 -December 2, Berlin, Germany - -[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/watch?v=UnNLJvHKfSY&list=PL-3BrJ5CiIx5GoXci54-VsrO6GwLhSHEK) - -### ReactFoo Pune -January 19-20, Pune, India - -[Website](https://reactfoo.in/2018-pune/) - [Twitter](https://twitter.com/ReactFoo) - -### AgentConf 2018 -January 25-28 in Dornbirn, Austria - -[Website](http://agent.sh/) - -### ReactFest 2018 -March 8-9 in London, UK - -[Website](https://reactfest.uk/) - [Twitter](https://twitter.com/ReactFest) - [Videos](https://www.youtube.com/watch?v=YOCrJ5vRCnw&list=PLRgweB8YtNRt-Sf-A0y446wTJNUaAAmle) - -### Reactathon 2018 -March 20-22 in San Francisco, USA - -[Website](https://www.reactathon.com/) - [Twitter](https://twitter.com/reactathon) - [Videos (fundamentals)](https://www.youtube.com/watch?v=knn364bssQU&list=PLRvKvw42Rc7OWK5s-YGGFSmByDzzgC0HP), [Videos (advanced day1)](https://www.youtube.com/watch?v=57hmk4GvJpk&list=PLRvKvw42Rc7N0QpX2Rc5CdrqGuxzwD_0H), [Videos (advanced day2)](https://www.youtube.com/watch?v=1hvQ8p8q0a0&list=PLRvKvw42Rc7Ne46QAjWNWFo1Jf0mQdnIW) - -### React Native Camp UA 2018 -March 31 in Kiev, Ukraine - -[Website](http://reactnative.com.ua/) - [Twitter](https://twitter.com/reactnativecamp) - [Facebook](https://www.facebook.com/reactnativecamp/) - -### React Amsterdam 2018 -April 13 in Amsterdam, The Netherlands - -[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - -### React Finland 2018 -April 24-26 in Helsinki, Finland - -[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) - -### 2018 -April 28 in Sofia, Bulgaria - -[Website](http://react-not-a-conf.com/) - [Twitter](https://twitter.com/reactnotaconf) - [Facebook](https://www.facebook.com/groups/1614950305478021/) - -### ReactEurope 2018 -May 17-18 in Paris, France - -[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - -### ReactFoo Mumbai -May 26 in Mumbai, India - -[Website](https://reactfoo.in/2018-mumbai/) - [Twitter](https://twitter.com/reactfoo) - [Past talks](https://hasgeek.tv) - -## diff --git a/content/community/conferences.zh-CN.md b/content/community/conferences.zh-CN.md deleted file mode 100644 index 5d58aaed6b5..00000000000 --- a/content/community/conferences.zh-CN.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: conferences-zh-CN -title: 会议 -permalink: docs/conferences-zh-CN.html -prev: thinking-in-react-zh-CN.html -next: videos-zh-CN.html ---- - -### React.js Conf 2015 -一月 28 & 29 - -[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) - - - -### ReactEurope 2015 -七月 2 & 3 - -[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - -### Reactive 2015 -十一月 2-4 - -[Website](https://reactive2015.com/) - [Schedule](https://reactive2015.com/schedule_speakers.html#schedule) - -### ReactEurope 2016 -六月 2 & 3 - -[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) diff --git a/content/community/courses.md b/content/community/courses.md deleted file mode 100644 index b0d4fd52549..00000000000 --- a/content/community/courses.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: courses -title: Courses -layout: community -sectionid: community -permalink: community/courses.html ---- - -## Free Courses - -- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React. - -- [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - This series will explore the basic fundamentals of React to get you started. - -- [React Armory: Learn React by Itself](https://reactarmory.com/guides/learn-react-by-itself) - With React Armory, you can learn React without the buzzwords. - -- [The Road to Learn React](https://www.robinwieruch.de/the-road-to-learn-react/) - Build a real world application in plain React without complicated tooling. - -- [React Training: React Patterns](https://reacttraining.com/patterns/) - Free lectures from React Training's "Advanced React.js" course. - -- [Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) - Free course for React newbies and those looking to get a better understanding of React fundamentals. - -## Paid Courses - -- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics. - -- [Frontend Masters](https://frontendmasters.com/courses/) - Video courses on React and other frontend frameworks. - -- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends. - -- [Pure React](https://daveceddia.com/pure-react/) - A step-by-step guide to mastering React. - -- [React for Beginners](https://reactforbeginners.com/) - Learn React in just a couple of afternoons. - -- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level. - -- [Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React". diff --git a/content/community/examples.it-IT.md b/content/community/examples.it-IT.md deleted file mode 100644 index 59242960031..00000000000 --- a/content/community/examples.it-IT.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: docs/examples-it-IT.html -layout: redirect -dest_url: https://github.com/facebook/react/wiki/Examples ---- diff --git a/content/community/examples.ko-KR.md b/content/community/examples.ko-KR.md deleted file mode 100644 index 70932835822..00000000000 --- a/content/community/examples.ko-KR.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: docs/examples-ko-KR.html -layout: redirect -dest_url: https://github.com/facebook/react/wiki/Examples ---- diff --git a/content/community/examples.md b/content/community/examples.md deleted file mode 100644 index 1c72d7f5a02..00000000000 --- a/content/community/examples.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: examples -title: Example Projects -layout: community -sectionid: community -permalink: community/examples.html ---- - -There are many example projects created by the React community. Feel free to add your own project. If you add a project, please commit to keeping it up to date with the latest versions of React. - - -* **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React -* **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji -* **[Github Battle App](https://github.com/ReactTraining/react-fundamentals/tree/hosting)** Battle two Github users and see the most popular Github projects for any language. -* **[K5 Playground](https://playground.cloud.global.fujitsu.com):** Sample applications for React.js and Flux. -* **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & react-router-powered implementation of Hacker News using its Firebase API. -* **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search -* **[Shopping Cart](https://github.com/jeffersonRibeiro/react-shopping-cart)** Simple ecommerce cart application built using React -* **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies. -* **[Product Comparison Page](https://github.com/Rhymond/product-compare-react)** Simple Product Compare page built in React -* **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL. -* **[Bitcoin Price Index](https://github.com/mrkjlchvz/bitcoin-price-index)** Simple bitcoin price index data from CoinDesk API. -* **[Builder Book](https://github.com/builderbook/builderbook)** Open source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB. -* **[GFonts Space](https://github.com/pankajladhar/GFontsSpace)** A space which allows user to play with Google fonts. Built with React, Redux and React-Router. diff --git a/content/community/examples.zh-CN.md b/content/community/examples.zh-CN.md deleted file mode 100644 index ac16cf1bbd0..00000000000 --- a/content/community/examples.zh-CN.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: docs/examples-zh-CN.html -layout: redirect -dest_url: https://github.com/facebook/react/wiki/Examples ---- diff --git a/content/community/external-resources.md b/content/community/external-resources.md deleted file mode 100644 index 656a4399cba..00000000000 --- a/content/community/external-resources.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: external-resources -title: External Resources -layout: community -sectionid: community -permalink: community/external-resources.html ---- - -There are many wonderful curated resources the React community has put together. - -- [Reactiflux](https://www.reactiflux.com/) - A community of 20,000+ React developers. They keep a well curated [learning section](https://www.reactiflux.com/learning/). - -- [React-Redux Links](https://github.com/markerikson/react-redux-links) - Mark Erikson's highly curated list of tutorials and resources for React/Redux/ES6 and more. - -- [Awesome React](https://github.com/enaqx/awesome-react) - A collection of awesome things regarding React ecosystem. - -- [Awesome React Components](https://github.com/brillout/awesome-react-components) - A curated list of React components. - -- [Awesome React Talks](https://github.com/tiaanduplessis/awesome-react-talks) - A curated list of React talks. diff --git a/content/community/meetups.md b/content/community/meetups.md deleted file mode 100644 index 5400ea3be9f..00000000000 --- a/content/community/meetups.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: meetups -title: Meetups Around the World -layout: community -sectionid: community -permalink: community/meetups.html ---- - -Do you have a local React.js meetup? Add it here! (Please keep the list alphabetical) - -## Australia -* [Melbourne](http://www.meetup.com/React-Melbourne/) -* [Sydney](http://www.meetup.com/React-Sydney/) - -## Austria -* [Vienna](http://www.meetup.com/Vienna-ReactJS-Meetup/) - -## Belgium -* [Belgium](http://www.meetup.com/ReactJS-Belgium/) - -## Brazil -* [Belo Horizonte](http://www.meetup.com/reactbh/) -* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/) -* [São Paulo](http://www.meetup.com/pt-BR/ReactJS-SP/) - -## Bolivia -* [Bolivia](https://www.meetup.com/ReactBolivia/) - -## Canada -* [Montreal, QC - ReactJS](https://www.meetup.com/fr-FR/ReactMontreal/) -* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/) -* [Vancouver, BC](http://www.meetup.com/ReactJS-Vancouver-Meetup/) - -## China -* [Beijing](http://www.meetup.com/Beijing-ReactJS-Meetup/) - -## Colombia -* [Medellin](https://www.meetup.com/React-Medellin/) - -## Denmark -* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/) -* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/) - -## England (UK) -* [Manchester](http://www.meetup.com/Manchester-React-User-Group/) - -## France -* [Paris](http://www.meetup.com/ReactJS-Paris/) - -## Germany -* [Berlin](http://www.meetup.com/React-Berlin/) -* [Hamburg](http://www.meetup.com/Hamburg-React-js-Meetup/) -* [Karlsruhe](http://www.meetup.com/react_ka/) -* [Munich](http://www.meetup.com/ReactJS-Meetup-Munich/) - -## Greece -* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/) - -## Hungary -* [Budapest](https://www.meetup.com/React-Budapest/) - -## India -* [Bangalore](https://www.meetup.com/ReactJS-Bangalore/) -* [Chennai](https://www.meetup.com/React-Chennai/) -* [Gurgaon](https://www.meetup.com/React-Gurgaon/) - -## Ireland -* [Dublin](http://www.meetup.com/ReactJS-Dublin/) - -## Israel -* [Tel Aviv](http://www.meetup.com/ReactJS-Israel/) - -## Netherlands -* [Amsterdam](http://www.meetup.com/React-Amsterdam/) - -## New Zealand -* [Wellington](http://www.meetup.com/React-Wellington/) - -## Norway -* [Norway](http://reactjsnorway.com/) -* [Oslo](https://www.meetup.com/ReactJS-Oslo-Meetup/) - -## Peru -* [Lima](http://www.meetup.com/ReactJS-Peru/) - -## Philippines -* [Manila](http://www.meetup.com/reactjs-developers-manila/) - -## Poland -* [Warsaw](http://www.meetup.com/React-js-Warsaw/) - -## Scotland (UK) -* [Edinburgh](https://www.meetup.com/React-Scotland/) - -## Spain -* [Barcelona](http://www.meetup.com/ReactJS-Barcelona/) - -## Sweden -* [Goteborg](http://www.meetup.com/ReactJS-Goteborg/) - -## Ukraine -* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup) - -## US -* [Atlanta, GA - ReactJS](http://www.meetup.com/React-ATL/) -* [Austin, TX - ReactJS](http://www.meetup.com/ReactJS-Austin-Meetup/) -* [Boston, MA - ReactJS](http://www.meetup.com/ReactJS-Boston/) -* [Boston, MA - React Native](http://www.meetup.com/Boston-React-Native-Meetup/) -* [Chicago, IL - ReactJS](http://www.meetup.com/React-Chicago/) -* [Columbus, OH - ReactJS](http://www.meetup.com/ReactJS-Columbus-meetup/) -* [Dallas, TX - ReactJS](http://www.meetup.com/ReactDallas/) -* [Irvine, CA - ReactJS](http://www.meetup.com/ReactJS-OC/) -* [Las Vegas, NV - ReactJS](http://www.meetup.com/ReactVegas/) -* [Leesburg, VA - ReactJS](http://www.meetup.com/React-NOVA/) -* [Los Angeles, CA - ReactJS](http://www.meetup.com/socal-react/) -* [Los Angeles, CA - React Native](http://www.meetup.com/React-Native-Los-Angeles/) -* [Nashville, TN - ReactJS](http://www.meetup.com/NashReact-Meetup/) -* [New York, NY - ReactJS](http://www.meetup.com/NYC-Javascript-React-Group/) -* [New York, NY - React Native](http://www.meetup.com/React-Native-NYC/) -* [Palo Alto, CA - React Native](http://www.meetup.com/React-Native-Silicon-Valley/) -* [Phoenix, AZ - ReactJS](http://www.meetup.com/ReactJS-Phoenix/) -* [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) -* [Portland, OR - ReactJS](http://www.meetup.com/Portland-ReactJS/) -* [Provo, UT - ReactJS](http://www.meetup.com/ReactJS-Utah/) -* [Sacramento, CA - ReactJS](http://www.meetup.com/Sacramento-ReactJS-Meetup/) -* [San Francisco - ReactJS](http://www.meetup.com/ReactJS-San-Francisco/) -* [San Francisco, CA - React Native](http://www.meetup.com/React-Native-San-Francisco/) -* [Santa Monica, CA - ReactJS](http://www.meetup.com/Los-Angeles-ReactJS-User-Group/) -* [Seattle, WA - React Native](http://www.meetup.com/Seattle-React-Native-Meetup/) -* [Seattle, WA - ReactJS](http://www.meetup.com/seattle-react-js/) -* [Tampa, FL - ReactJS](http://www.meetup.com/ReactJS-Tampa-Bay/) -* [Tucson, AZ - ReactJS](http://www.meetup.com/Tucson-ReactJS-Meetup/) -* [Washington, DC - ReactJS](http://www.meetup.com/React-DC/) diff --git a/content/community/nav.yml b/content/community/nav.yml deleted file mode 100644 index 4903f2c0b16..00000000000 --- a/content/community/nav.yml +++ /dev/null @@ -1,42 +0,0 @@ -- title: Community Resources - items: - - id: support - title: Support - - id: conferences - title: Conferences - - id: meetups - title: Meetups - - id: articles - title: Articles - - id: podcasts - title: Podcasts - - id: videos - title: Videos - - id: courses - title: Courses - - id: examples - title: Examples - - id: external-resources - title: External Resources -- title: Tools - items: - - id: debugging-tools - title: Debugging - - id: component-workbenches - title: Component Workbenches - - id: jsx-integrations - title: JSX Integrations - - id: starter-kits - title: Starter Kits - - id: routing - title: Routing - - id: model-management - title: Model Management - - id: data-fetching - title: Data Fetching - - id: testing - title: Testing - - id: ui-components - title: UI Components - - id: misc - title: Miscellaneous diff --git a/content/community/podcasts.md b/content/community/podcasts.md deleted file mode 100644 index 0b91418b9ab..00000000000 --- a/content/community/podcasts.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -id: podcasts -title: Podcasts -layout: community -sectionid: community -permalink: community/podcasts.html ---- - -Podcasts dedicated to React and individual podcast episodes with React discussions. - -## Podcasts - -- [The React Podcast](http://reactpodcast.com) - The podcast about everything React.js, hosted by [React Training](https://reacttraining.com) - -- [JavaScript Air](https://javascriptair.com/) - All about JavaScript (currently not producing new episodes) - -- [React 30](https://react30.com/) - A 30-minute podcast all about React (moved to [The React Podcast](http://reactpodcast.com)). - -- [React Native Radio](https://devchat.tv/react-native-radio) - -## Episodes - -- [CodeWinds Episode 4](http://codewinds.com/podcast/004.html) - Pete Hunt talks with Jeff Barczewski about React. - - -- [JavaScript Jabber 73](https://devchat.tv/js-jabber/073-jsj-react-with-pete-hunt-and-jordan-walke) - Pete Hunt and Jordan Walke talk about React. diff --git a/content/community/support.md b/content/community/support.md deleted file mode 100644 index 3243bde3b63..00000000000 --- a/content/community/support.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: support -title: Where To Get Support -layout: community -sectionid: community -permalink: community/support.html -redirect_from: "support.html" ---- - -**React** is worked on full-time by Facebook's product infrastructure and Instagram's user interface engineering teams. They're often around and available for questions. - -## Stack Overflow - -Many members of the community use Stack Overflow to ask questions. Read through the [existing questions](http://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](http://stackoverflow.com/questions/ask?tags=reactjs)! - -## Discussion Forum - -For longer-form conversations about React, we've set up a [discussion forum at **discuss.reactjs.org**](https://discuss.reactjs.org/). This forum is a great place for discussion about best practices and application architecture as well as the future of React. If you have an answerable code-level question, please post it to Stack Overflow instead. - -In the forum there's also a category for job posts and a category for discussion of our weekly meeting notes. - -## React Community on Hashnode - -[Hashnode's React community](https://hashnode.com/n/reactjs) is a great place to stay up-to-date with React discussion, news and stories. - -## Reactiflux Chat - -If you need an answer right away, check out the [Reactiflux Discord](https://discord.gg/0ZcbPKXt5bZjGY5n) community. There are usually a number of React experts there who can help out or point you to somewhere you might want to look. - -## Freenode IRC - -Some developers also hang out in [#reactjs on Freenode](http://irc.lc/freenode/reactjs). - ->Note: -> ->Our IRC channel is called **#reactjs**. It is *not* called **#react** or **#reactos**. -> ->The **#reactos** channel belongs to an unrelated [ReactOS](https://reactos.org/) operating system project. The **#react** channel is not affiliated with us either. To discuss the React JavaScript library on its official IRC channel, please make sure that you post in **#reactjs**. - -## Facebook and Twitter - -For the latest news about React, [like us on Facebook](https://facebook.com/react) and [follow **@reactjs** on Twitter](https://twitter.com/reactjs). In addition, you can use the [#reactjs](https://twitter.com/hashtag/reactjs) hashtag to see what others are saying or add to the conversation. - -
diff --git a/content/community/tools-comp-workbenches.md b/content/community/tools-comp-workbenches.md deleted file mode 100644 index f8e4c95eddf..00000000000 --- a/content/community/tools-comp-workbenches.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: component-workbenches -title: Component Workbenches -layout: community -permalink: community/component-workbenches.html ---- - -* **[Storybook for React](https://github.com/storybooks/storybook):** UI component development environment for React. -* **[React Styleguidist](https://github.com/styleguidist/react-styleguidist):** Style guide generator & component workbench for React. -* **[React Showroom](https://github.com/OpusCapita/react-showroom-client):** React based components catalog which provides you with markdown documentation and live examples -* **[patternplate](https://github.com/sinnerschrader/patternplate)**: A platform for pattern and component library development using React. -* **[UiZoo.js](https://github.com/myheritage/UiZoo.js)**: Auto-generated component development environment by the JSDoc of React components. -* **[Neutrino React components preset](https://neutrino.js.org/packages/react-components/)**: Create generic React components and preview them without the need to embed in an application. Plays nicely with other Neutrino middleware, so you can build, test, and publish multiple React components from a single repository. -* **[React Cosmos](https://github.com/react-cosmos/react-cosmos)**: Dev tool for creating reusable React components. It scans your project for components and enables you to: render components in different states, mock dependencies (API, localStorage, etc.), see app state evolve in real time. -* **[Bit](https://github.com/teambit/bit)**: Isolate and share components from existing projects to make them available to install in other projects while tracking changes across projects. It helps save the overhead of keeping components in separate repositories. diff --git a/content/community/tools-data-fetching.md b/content/community/tools-data-fetching.md deleted file mode 100644 index 85e1b0b0ad8..00000000000 --- a/content/community/tools-data-fetching.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: data-fetching -title: Data Fetching -layout: community -permalink: community/data-fetching.html ---- - -* **[Apollo](http://dev.apollodata.com/react/):** Easy to set up and use GraphQL client. -* **[Axios](https://github.com/mzabriskie/axios):** Promise based HTTP client for the browser and node.js. -* **[Relay Modern](https://facebook.github.io/relay/docs/en/new-in-relay-modern.html)** - A JavaScript framework for building data-driven React applications. -* **[Request](https://github.com/request/request):** Simplified HTTP request client. -* **[Superagent](https://visionmedia.github.io/superagent/):** A lightweight "isomorphic" library for AJAX requests. diff --git a/content/community/tools-debugging.md b/content/community/tools-debugging.md deleted file mode 100644 index 5416f7eb882..00000000000 --- a/content/community/tools-debugging.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -id: debugging-tools -title: Debugging -layout: community -permalink: community/debugging-tools.html ---- - - * **[React Developer Tools](https://github.com/facebook/react-devtools):** an extension available for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox](https://addons.mozilla.org/firefox/addon/react-devtools/), and as a [standalone app](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) that allows you to inspect the React component hierarchy in the Chrome Developer Tools. diff --git a/content/community/tools-jsx.md b/content/community/tools-jsx.md deleted file mode 100644 index 3b7283f3d11..00000000000 --- a/content/community/tools-jsx.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: jsx-integrations -title: JSX Integrations -layout: community -permalink: community/jsx-integrations.html ---- - -## Editor Integrations -* **[Sublime Text: babel-sublime](https://github.com/babel/babel-sublime):** Snippets, syntax highlighting and optimized color schemes for Sublime Text -* **[Atom: language-babel](https://atom.io/packages/language-babel)** Support for es2016, JSX and Flow. -* **[Visual Studio Code](https://code.visualstudio.com/updates/vFebruary#_languages-javascript)** Visual Studio Code supports JSX directly. -* **[JetBrains WebStorm](http://www.jetbrains.com/webstorm/):** Syntax highlighting, code completion, error detection for JSX -* **[JetBrains IDE Live Templates](https://github.com/Minwe/jetbrains-react):** React live templates for JetBrains editors (e.g. WebStorm, PHPStorm, etc.) -* **[javascript-jsx.tmbundle](https://github.com/jjeising/javascript-jsx.tmbundle)** Syntax for TextMate -* **[web-mode.el](http://web-mode.org):** An autonomous emacs major mode that indents and highlights JSX. No support for Automatic Semicolon Insertion. -* **[vim-jsx](https://github.com/mxw/vim-jsx):** Syntax highlighting and indenting for JSX - -## Build Tools - -* **[Create React App](https://github.com/facebookincubator/create-react-app):** An **officially supported** way to create React apps with no configuration. -* **[nwb](https://github.com/insin/nwb)**: A toolkit for React, Preact & Inferno apps, React libraries and other npm modules for the web, with no configuration (until you need it) -* **[Neutrino](https://neutrino.js.org/)**: Create and build modern JavaScript applications with zero initial configuration. Neutrino combines the power of webpack with the simplicity of presets. -* **[ESLint](http://eslint.org):** A pluggable JavaScript linter that natively supports JSX syntax. Be sure to download [eslint-plugin-react](https://npmjs.com/package/eslint-plugin-react) for React-specific rules. -* **[Structor](https://www.npmjs.com/package/structor):** This tool is a user interface builder for node.js Web applications with React UI. Structor replaces the now deprecated React UI Builder. Watch [Structor Video Tutorials](https://youtu.be/z96xYa51EWI?list=PLAcaUOtEwjoR_U6eE2HQEXwkefeVESix1) -* **[react-jsx](https://github.com/bigpipe/react-jsx):** Compile and use JSX as stand-alone templates that can run server-side and client side! -* **[cjsx-codemod](https://github.com/jsdf/cjsx-codemod):** Write JSX code within Coffeescript! -* **[ReactScript](https://github.com/1j01/react-script):** Write React code within Coffeescript without JSX! -* **[jsxhint](https://npmjs.org/package/jsxhint):** [JSHint](http://jshint.com/) (linting) support. (JSX compilation doesn't affect line numbers so lint can also be run directly on the compiled JS.) -* **[reactify](https://npmjs.org/package/reactify):** [Browserify](http://browserify.org/) transform. -* **[Babel](https://babeljs.io/):** Standalone & [Browserify](http://browserify.org/) transform (formerly known as **6to5**). -* **[node-jsx](https://npmjs.org/package/node-jsx):** Native [Node](http://nodejs.org/) support. -* **[react-hot-loader](http://gaearon.github.io/react-hot-loader/):** Loader for [webpack](http://webpack.github.io/) that lets you edit JSX and have changes appear immediately in the browser without reloading the page. -* **[jsx-loader](https://npmjs.org/package/jsx-loader):** Loader for [webpack](http://webpack.github.io/). -* **[express-jsxtransform](https://www.npmjs.org/package/express-jsxtransform):** Middleware for [Express](https://www.npmjs.org/package/express). -* **[gradle-react-plugin](https://github.com/ehirsch/gradle-react-plugin):** Transform jsx sources during a gradle build. -* **[grunt-react](https://npmjs.org/package/grunt-react):** [GruntJS](http://gruntjs.com/) task. -* **[gulp-react](https://npmjs.org/package/gulp-react):** [GulpJS](http://gulpjs.com/) plugin. -* **[brunch-react](https://www.npmjs.org/package/react-brunch):** [Brunch](http://brunch.io/) plugin. -* **[jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin):** [RequireJS](http://requirejs.org/) plugin. -* **[react-meteor](https://github.com/benjamn/react-meteor):** [Meteor](http://www.meteor.com/) plugin. -* **[pyReact](https://github.com/facebook/react-python):** [Python](http://www.python.org/) bridge to JSX. -* **[react-rails](https://github.com/facebook/react-rails):** Ruby gem for using JSX with [Ruby on Rails](http://rubyonrails.org/). -* **[react-laravel](https://github.com/talyssonoc/react-laravel):** PHP package for using ReactJS with [Laravel](http://laravel.com/). -* **[ReactJS.NET](http://reactjs.net/):** .NET library for React and JSX. -* **[sbt-reactjs](https://github.com/ddispaltro/sbt-reactjs)** SBT/Play/Scala JSX compiler plugin -* **[mimosa-react](https://github.com/dbashford/mimosa-react):** [Mimosa](http://mimosa.io) plugin. -* **[react-grails-asset-pipeline](https://github.com/peh/react-grails-asset-pipeline):** Assets for react and precompilation of jsx files in [Grails](http://grails.org/). -* **[gore-gulp](https://github.com/goreutils/gore-gulp):** Wrapper around [webpack](https://webpack.github.io/), [eslint](http://eslint.org/), [mocha](https://mochajs.org/) for ease of use and zero configuration. -* **[webpack](https://github.com/webpack/webpack):** Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff. -* **[webpack-bbq](https://github.com/wenbing/webpack-bbq):** transform your src to lib, supports server rendering and static rendering. -* **[jsxtransformer](https://github.com/cronn-de/jsxtransformer):** Compile pipeline for jsx files in Java -* **[babylon-jsx](https://github.com/marionebl/babylon-jsx)**: Transform JSX to ES2015 with babylon sans babel -* **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** - A simple CLI to create and build Express server for your create-react-app projects, featuring Server-side rendering and Code-splitting. diff --git a/content/community/tools-misc.md b/content/community/tools-misc.md deleted file mode 100644 index 64e5a0f4422..00000000000 --- a/content/community/tools-misc.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: misc -title: Miscellaneous -layout: community -permalink: community/misc.html ---- - -* **[react-localize-redux](https://github.com/ryandrewjohnson/react-localize-redux)** - Localization library for React/Redux. - -* **[react-inspector](https://github.com/xyc/react-inspector):** Use DevTools-like object inspectors inside your React app. -* **[jreact](https://github.com/KnisterPeter/jreact):** Rendering react server-side within a JVM (Java 7 or Java 8) -* **[react-jss](https://github.com/jsstyles/react-jss):** Inject and mount jss styles in React components. -* **[django-react](https://github.com/markfinger/django-react):** Server-side rendering of React components for django apps. -* **[react-engine](https://github.com/paypal/react-engine):** Composite render engine for isomorphic express apps to render both plain react views and react-router views. -* **[react-render-visualizer](https://github.com/redsunsoft/react-render-visualizer):** A visual way to see what is (re)rendering and why. -* **[javascript-monads](https://github.com/dschalk/javascript-monads):** As this project matures, the monads are becoming more than mere toys. React is used in unorthodox ways, so if you want to use React the way they do at Facebook, this is not for you. Transpiled code for the three monad classes can be downloaded by entering "npm install reactive-monads". -* **[ReactCSS](http://reactcss.com/):** Inline Styles in JS with support for React. -* **[ReactQuestionnaire](https://github.com/kouryuu/react-questionnaire):** Simple react components for building a questionnaire or survey. -* **[renderjs.io](http://renderjs.io):** SEO for Reactjs. Service for making reactjs application crawlable and shareable. diff --git a/content/community/tools-model-mgmt.md b/content/community/tools-model-mgmt.md deleted file mode 100644 index af0827ec508..00000000000 --- a/content/community/tools-model-mgmt.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: model-management -title: Model Management -layout: community -permalink: community/model-management.html ---- - -* **[Alt](http://alt.js.org/):** Pure vanilla flux made isomorphic and without the boilerplate. -* **[astarisx](http://zuudo.github.io/astarisx/):** Highly Composable MVVM Framework for React with built-in pushState router. -* **[avers](https://github.com/wereHamster/avers):** A modern client-side model abstraction library. -* **[backbone-react-component](https://github.com/magalhas/backbone-react-component):** Use multiple Backbone models and collections with React components both on the client and server sides. -* **[Baobab](https://github.com/Yomguithereal/baobab):** Persistent data tree supporting cursors. -* **[cortex](https://github.com/mquan/cortex/):** A JavaScript library for centrally managing data with React. -* **[DeLorean](https://github.com/deloreanjs/delorean):** A completely agnostic JavaScript framework to apply Flux concepts into your interfaces easily. -* **[Elsa](https://github.com/JonAbrams/elsa):** A Babel plugin that makes your arrays and objects immutable by default… and gives them super powers! -* **[Immutable](https://github.com/facebook/immutable-js):** Immutable data structures designed to be more JavaScript-y than Mori. -* **[js-data](http://www.js-data.io/):** A framework-agnostic frontend datastore, that will also fetch your data. -* **[McFly](https://github.com/kenwheeler/mcfly):** A lightweight Flux library that adds factories for Stores & Actions. -* **[NuclearJS](https://github.com/optimizely/nuclear-js):** Immutable, reactive Flux architecture. UI Agnostic. -* **[Reflux](https://github.com/spoike/refluxjs):** An event-based implementation of the Flux architecture that integrates with React components. diff --git a/content/community/tools-routing.md b/content/community/tools-routing.md deleted file mode 100644 index 74459a76c3a..00000000000 --- a/content/community/tools-routing.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -id: routing -title: Routing -layout: community -permalink: community/routing.html ---- - -* **[Aviator](https://github.com/swipely/aviator)** - Aviator is a front-end router built for modular single page applications. ([Example](https://gist.github.com/hojberg/9549330)). -* **[Backbone](http://backbonejs.org/)** - Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. -* **[component-router](https://github.com/in-flux/component-router):** Flux-based routing solution for components - * **[Director](https://github.com/flatiron/director)** - A tiny and isomorphic URL router for JavaScript. - * **[Finch](http://stoodder.github.io/finchjs/)** - A simple, yet powerful, javascript route handling library. - * **[mvc-router](https://github.com/rajeev-k/mvc-router)** Use the Model-View-Controller (MVC) pattern to build React applications. - * **[react-mini-router](https://github.com/larrymyers/react-mini-router)** A minimal URL router mixin. - * **[react-router](https://github.com/rackt/react-router)** - A popular declarative router for React - * **[react-router-component](https://github.com/andreypopp/react-router-component)** Declarative routing. diff --git a/content/community/tools-starter-kits.md b/content/community/tools-starter-kits.md deleted file mode 100644 index 99335820679..00000000000 --- a/content/community/tools-starter-kits.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: starter-kits -title: Starter Kits -layout: community -permalink: community/starter-kits.html ---- - -## Recommended by the React Team - -* **[Create React App](https://github.com/facebook/create-react-app)** - An officially supported way to start a client-side React project with no configuration -* **[Next.js](https://nextjs.org/)** - Framework for server-rendered or statically-exported React apps -* **[Gatsby](https://www.gatsbyjs.org/)** - Blazing-fast static site generator for React -* **[nwb](https://github.com/insin/nwb)** - A toolkit for React apps, libraries and other npm modules for the web -* **[razzle](https://github.com/jaredpalmer/razzle)** - Create server-rendered universal JavaScript applications with no configuration -* **[Neutrino](https://neutrino.js.org/)** - Create and build modern JavaScript applications with zero initial configuration - -## Other Starter Kits - -* **[kyt](https://github.com/nytimes/kyt)** - The framework that the New York Times uses to develop and build their web properties. It's somewhat opinionated but configurable, and includes starter kits with options to build full-stack or static/client-side apps with the following tools: Express, React, static assets, latest ES, CSS/Sass Modules, Jest, code-splitting, ESLint/Prettier, StyleLint, PostCSS, and inline SVGs. -* **[React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate):** React Redux Boilerplate is a workflow boilerplate providing a virtual development environment and production ready build workflow out of the box. (React, Redux, Reselect, Redux Actions, ES6, ESLint, Webpack with integrated environment config support) -* **[React + Redux + Saga Boilerplate](https://github.com/gilbarbara/react-redux-saga-boilerplate)** - -Ready to grow boilerplate with react-router, redux, saga, webpack 2, jest w/ coverage and enzyme. -* **[Create React App + Redux + React Router](https://github.com/notrab/create-react-app-redux)**: Based on Create React App, this boilerplate comes with Redux, Redux Thunk and React Router all configured ready to go. -* **[react-slingshot](https://github.com/coryhouse/react-slingshot):** React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app. -* **[Este](https://github.com/este/este):** Dev stack and starter kit for functional and universal (browser, server, mobile) React applications. Everything you need to start is included. -* **[Rekit](https://github.com/supnate/rekit)** - Toolkit and boilerplates for building scalable web applications with React, Redux and React-router. -* **[webcube](https://github.com/dexteryy/Project-WebCube)** - A JS infrastructure for modern Universal JS web app/sites and static websites. Provides built-in support and simplification for Redux sub-app, reducer bundle, router, immutable, eslint + prettier, docker, monorepo and many other tools. - * **[starter-react-flux](https://github.com/SokichiFujita/starter-react-flux)** A generator for React and Flux project with Flux-Utils, Jest, Immutable.js, React Addons, Webpack, ESLint, Babel and ES2015. - * **[react-async-starter](https://github.com/didierfranc/react-async-starter):** React + Redux + Fetch + ES7 Async with Webpack, Babel and hot reloading. - * **[Kriasoft React Starter Kit](https://github.com/kriasoft/react-starter-kit):** Gulp, Webpack, BrowserSync + [React Starter Kit for Visual Studio](http://visualstudiogallery.msdn.microsoft.com/d65d6b29-6dd7-4100-81b1-609e5afce356) - * **[electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate)** A React + Flux Electron application boilerplate based on React, Flux, React Router, Webpack, React Hot Loader - * **[react-boilerplate](https://github.com/mxstbr/react-boilerplate)** Quick setup for performance orientated, offline-first React.js applications featuring Redux, hot-reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha. - * **[vortigern](https://github.com/barbar/vortigern)** A universal boilerplate for building web applications w/ TypeScript, React, Redux and more. - * **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** CLI to initialize universal create-react-app without ejecting. Supports Server-side rendering with Code-splitting, and Node Stream rendering. - * **[EDGE Platform](https://github.com/sebastian-software/edge)** Universal React/SSR + Apollo GraphQL + JS/CSS Code Splitting + Fine-Tuned Webpack + Localization/Internationalization. Most things are external dependencies. Boilerplate available. - * **[bae](https://github.com/siddharthkp/bae)** Zero config toolkit. SSR (with data fetching) + routing + streaming + styling (with styled-components) + HMR out of the box. - * **[breko-hub](https://github.com/tomatau/breko-hub)** A production ready boilerplate for universal react applications. Complete with code splitting, server render (using koa), redux, sagas, debugging, hot-reloading (live updates on the server), css-modules, scss, super fast integration tests and unit tests. There's also a big focus on clean code and smaller files. diff --git a/content/community/tools-testing.md b/content/community/tools-testing.md deleted file mode 100644 index 0ce5210491d..00000000000 --- a/content/community/tools-testing.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -id: testing -title: Testing -layout: community -permalink: community/testing.html ---- - -* **[Enzyme](https://github.com/airbnb/enzyme/):** a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. -* **[Expect-jsx](https://github.com/algolia/expect-jsx):** toEqualJSX for [expect.js](https://github.com/mjackson/expect) -* **[Jest](https://facebook.github.io/jest/):** Delightful JavaScript testing used by Facebook to test all JavaScript code including React applications. -* **[React-unit](https://github.com/pzavolinsky/react-unit):** a lightweight unit test library for ReactJS with very few (js-only) dependencies. -* **[Skin-deep](https://github.com/glenjamin/skin-deep):** Testing helpers for use with React's shallowRender test utils. -* **[Unexpected-react](https://github.com/bruderstein/unexpected-react/):** Plugin for the [unexpected](http://unexpected.js.org) assertion library that makes it easy to assert over your React Components and trigger events. diff --git a/content/community/tools-ui-components.md b/content/community/tools-ui-components.md deleted file mode 100644 index 02057540e1c..00000000000 --- a/content/community/tools-ui-components.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: ui-components -title: UI Components -layout: community -permalink: community/ui-components.html ---- - -## Free Components -* **[Amaze UI React](https://github.com/amazeui/amazeui-react) (in Chinese):** [Amaze UI](https://github.com/allmobilize/amazeui) components built with React. -* **[Ant Design of React](http://github.com/ant-design/ant-design)** An enterprise-class UI design language and React-based implementation. -* **[Belle](https://github.com/nikgraf/belle/):** Configurable React Components with great UX. -* **[chartify](https://github.com/kirillstepkin/chartify)**: Ultra lightweight and customizable React.js chart component. -* **[Elemental UI](http://elemental-ui.com):** A UI toolkit for React websites and apps, themeable and composed of individually packaged components -* **[Grommet](http://grommet.io)** The most advanced open source UX framework for enterprise applications. -* **[Halogen](http://madscript.com/halogen):** A collection of highly customizable loading spinner animations with React. -* **[Khan Academy's component library](http://khan.github.io/react-components/)** -* **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)**: compiles markdown into safe React JSX without using dangerous escape hatches. -* **[material-ui](http://material-ui.com)** A set of React Components that implement Google's Material Design. -* **[Onsen UI React Components](https://onsen.io/v2/react.html):** UI components for hybrid mobile apps with both Material Design for Android and flat design for iOS. -* **[React Amazing Grid](https://github.com/Amazing-Space-Invader/react-amazing-grid)** Flex grid with inline styles. -* **[React Mdl](https://github.com/tleunen/react-mdl)** React Components for Material Design Lite. -* **[React Web](https://github.com/taobaofed/react-web)** A framework for building web apps with React. -* **[react-amiga-guru-meditation](https://github.com/gfazioli/react-amiga-guru-meditation):** React JS Class to display a Amiga Guru Meditation Tribute -* **[react-autosuggest](https://github.com/moroshko/react-autosuggest)** WAI-ARIA compliant React autosuggest component -* **[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd):** Beautiful, accessible drag and drop for lists with React.js -* **[react-bootstrap](https://github.com/stevoland/react-bootstrap):** Bootstrap 3 components built with React. -* **[react-bootstrap-dialog](https://github.com/akiroom/react-bootstrap-dialog):** React Dialog component for react-bootstrap, instead of `window.alert` or `window.confirm` -* **[react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table):** It's a react table for Bootstrap. -* **[react-component](https://github.com/react-component/):** A collection of react components maintained by Alibaba/Alipay employee. -* **[react-data-menu](https://github.com/dkozar/react-data-menu):** Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other components or screen edges. -* **[react-date-picker](https://github.com/Hacker0x01/react-datepicker):** A simple and reusable datepicker component for React. -* **[react-dates](https://github.com/OpusCapita/react-dates):** Date-inputs + date-picker -* **[react-dnd](https://github.com/gaearon/react-dnd)** Flexible HTML5 drag-and-drop mixin for React with full DOM control -* **[react-document-title](https://github.com/gaearon/react-document-title)** Declarative, nested, stateful, isomorphic document.title for React -* **[react-dropzone](https://github.com/felixrieseberg/React-Dropzone):** React Dropzone for File-Uploads -* **[react-forms](http://prometheusresearch.github.io/react-forms/):** Form rendering and validation for React -* **[react-highlight](https://github.com/akiran/react-highlight):** React component for syntax highlighting -* **[react-image](https://github.com/mbrevda/react-image):** Like `` and Enhanced Image Component for React. -* **[react-input-autosize](https://github.com/JedWatson/react-input-autosize):** Like `` but resizes automatically to fit all its content. -* **[react-intense](https://github.com/brycedorn/react-intense):** A component for viewing large images up close -* **[react-joyride](https://github.com/gilbarbara/react-joyride):** Create walkthroughs and guided tours for your ReactJS apps. -* **[react-ladda](https://github.com/jsdir/react-ladda):** React wrapper for Ladda buttons. -* **[react-lorem-component](https://github.com/martinandert/react-lorem-component):** Lorem Ipsum placeholder component. -* **[react-notification](https://github.com/pburtchaell/react-notification):** Snackbar style notifications -* **[react-select](https://github.com/JedWatson/react-select):** Native React Select / Multiselect input field, similar to Selectize / Chosen / Select2 -* **[react-selectize](https://furqanzafar.github.io/react-selectize/):** A stateless & flexible Select component, designed as a drop in replacement for React.DOM.Select, inspired by Selectize -* **[react-sigma](https://www.npmjs.com/package/react-sigma)**: Lightweight but powerful library for drawing network graphs -* **[react-slick](https://github.com/akiran/react-slick):** Carousel component built with React -* **[react-sparklines](https://borisyankov.github.io/react-sparklines/):** Beautiful and expressive sparklines component -* **[react-spreadsheet](https://github.com/felixrieseberg/React-Spreadsheet-Component):** React Spreadsheets / Editable tables with Excel-Style keyboard input and navigation -* **[react-switch-button](https://github.com/gfazioli/react-switch-button):** Beautiful React Switch button component -* **[react-tappable](https://github.com/JedWatson/react-tappable)** A Tappable React Component that provides native-feeling onTap events for mobile React apps -* **[react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize):** Like ` -``` - -In React, a ` +
+ + + + +

That's right!

+ + +``` + + + +Manipulating the UI imperatively works well enough for isolated examples, but it gets exponentially more difficult to manage in more complex systems. Imagine updating a page full of different forms like this one. Adding a new UI element or a new interaction would require carefully checking all existing code to make sure you haven't introduced a bug (for example, forgetting to show or hide something). + +React was built to solve this problem. + +In React, you don't directly manipulate the UI--meaning you don't enable, disable, show, or hide components directly. Instead, you **declare what you want to show,** and React figures out how to update the UI. Think of getting into a taxi and telling the driver where you want to go instead of telling them exactly where to turn. It's the driver's job to get you there, and they might even know some shortcuts you haven't considered! + + + +## Thinking about UI declaratively {/*thinking-about-ui-declaratively*/} + +You've seen how to implement a form imperatively above. To better understand how to think in React, you'll walk through reimplementing this UI in React below: + +1. **Identify** your component's different visual states +2. **Determine** what triggers those state changes +3. **Represent** the state in memory using `useState` +4. **Remove** any non-essential state variables +5. **Connect** the event handlers to set the state + +### Step 1: Identify your component's different visual states {/*step-1-identify-your-components-different-visual-states*/} + +In computer science, you may hear about a ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine) being in one of several “states”. If you work with a designer, you may have seen mockups for different "visual states". React stands at the intersection of design and computer science, so both of these ideas are sources of inspiration. + +First, you need to visualize all the different "states" of the UI the user might see: + +* **Empty**: Form has a disabled "Submit" button. +* **Typing**: Form has an enabled "Submit" button. +* **Submitting**: Form is completely disabled. Spinner is shown. +* **Success**: "Thank you" message is shown instead of a form. +* **Error**: Same as Typing state, but with an extra error message. + +Just like a designer, you'll want to "mock up" or create "mocks" for the different states before you add logic. For example, here is a mock for just the visual part of the form. This mock is controlled by a prop called `status` with a default value of `'empty'`: + + + +```js +export default function Form({ + status = 'empty' +}) { + if (status === 'success') { + return

That's right!

+ } + return ( + <> +

City quiz

+

+ In which city is there a billboard that turns air into drinkable water? +

+
+ ` is not allowed. [Use `defaultValue` for initial content.](#providing-an-initial-value-for-a-text-area) +- If a text area receives a string `value` prop, it will be [treated as controlled.](#controlling-a-text-area-with-a-state-variable) +- A text area can't be both controlled and uncontrolled at the same time. +- A text area cannot switch between being controlled or uncontrolled over its lifetime. +- Every controlled text area needs an `onChange` event handler that synchronously updates its backing value. + +--- + +## Usage {/*usage*/} + +### Displaying a text area {/*displaying-a-text-area*/} + +Render `` is not supported. + + + +--- + +### Reading the text area value when submitting a form {/*reading-the-text-area-value-when-submitting-a-form*/} + +Add a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`