| /* | |
| This replaces <Sequencer> + multiple <Sampler>s with a marble diagram sequencer. | |
| You can use it like this: | |
| <Marble | |
| resolution={16} | |
| samples={[ | |
| 'samples/kick.wav', | |
| 'samples/snare.wav', | |
| ]} |
A top-level App component returns <Button /> from its render() method.
What is the relationship between <Button /> and this in that Button’s render()?
Does rendering <Button><Icon /></Button> guarantee that an Icon mounts?
Can the App change anything in the Button output? What and how?
Thanks everyone for participating in the quiz!
Many of you have posted correct answers.
What we know:
A top-level App component returns <Button /> from its render() method.
Question:
>What is the relationship between `` and this in that `Button`’s `render()`?
| title | Error Handling in React 16 |
|---|---|
| author | gaearon |
As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.
In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (eg <IE11), consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.
A polyfilled environment for React 16 using core-js to support older browsers might look like:
import 'core-js/es6/map';
import 'core-js/es6/set';
| /** | |
| * Copyright (c) 2015-present, Facebook, Inc. | |
| * | |
| * This source code is licensed under the MIT license found in the | |
| * LICENSE file in the root directory of this source tree. | |
| */ | |
| // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | |
| // /!\ DO NOT MODIFY THIS FILE /!\ | |
| // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
| class Example extends React.Component< | |
| Props, | |
| State, | |
| Snapshot | |
| > { | |
| static getDerivedStateFromProps( | |
| nextProps: Props, | |
| prevState: State | |
| ): $Shape<State> | null { | |
| // ... |
| { | |
| "editor.fontFamily": "Consolas", | |
| "editor.fontSize": 18, | |
| "editor.lineHeight": 26, | |
| "editor.minimap.enabled": false, | |
| "editor.renderIndentGuides": false, | |
| "editor.renderLineHighlight": "none", | |
| "javascript.validate.enable": false, | |
| // "workbench.colorTheme": (find something that looks like Oceanic Next and put it here) | |
| "window.zoomLevel": -1, |
Note:
When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.
If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code: