Browse Source

Removed deadlink from Event System section and added correct links (#3136)

* Removed deadlink from Event System section and added correct links

* Changed wording of Event System section and removed react-native events link

* Update codebase-overview.md

Co-authored-by: Dowen Robinson <drobinson@ad.accelclaims.com>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
main
Dowen Robinson 4 years ago
committed by GitHub
parent
commit
24f47fbc1e
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 65
      content/docs/codebase-overview.md

65
content/docs/codebase-overview.md

@ -35,33 +35,11 @@ For example, a test for [`setInnerHTML.js`](https://github.com/facebook/react/bl
### Warnings and Invariants {#warnings-and-invariants} ### Warnings and Invariants {#warnings-and-invariants}
The React codebase uses the `warning` module to display warnings: The React codebase uses `console.error` to display warnings:
```js ```js
var warning = require('warning'); if (__DEV__) {
console.error('Something is wrong.');
warning(
2 + 2 === 4,
'Math is not working today.'
);
```
**The warning is shown when the `warning` condition is `false`.**
One way to think about it is that the condition should reflect the normal situation rather than the exceptional one.
It is a good idea to avoid spamming the console with duplicate warnings:
```js
var warning = require('warning');
var didWarnAboutMath = false;
if (!didWarnAboutMath) {
warning(
2 + 2 === 4,
'Math is not working today.'
);
didWarnAboutMath = true;
} }
``` ```
@ -114,39 +92,6 @@ ReactRef.detachRefs = function(
When possible, new code should use Flow annotations. When possible, new code should use Flow annotations.
You can run `yarn flow` locally to check your code with Flow. You can run `yarn flow` locally to check your code with Flow.
### Dynamic Injection {#dynamic-injection}
React uses dynamic injection in some modules. While it is always explicit, it is still unfortunate because it hinders understanding of the code. The main reason it exists is because React originally only supported DOM as a target. React Native started as a React fork. We had to add dynamic injection to let React Native override some behaviors.
You may see modules declaring their dynamic dependencies like this:
```js
// Dynamically injected
var textComponentClass = null;
// Relies on dynamically injected value
function createInstanceForText(text) {
return new textComponentClass(text);
}
var ReactHostComponent = {
createInstanceForText,
// Provides an opportunity for dynamic injection
injection: {
injectTextComponentClass: function(componentClass) {
textComponentClass = componentClass;
},
},
};
module.exports = ReactHostComponent;
```
The `injection` field is not handled specially in any way. But by convention, it means that this module wants to have some (presumably platform-specific) dependencies injected into it at runtime.
There are multiple injection points in the codebase. In the future, we intend to get rid of the dynamic injection mechanism and wire up all the pieces statically during the build.
### Multiple Packages {#multiple-packages} ### Multiple Packages {#multiple-packages}
React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place. React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
@ -211,9 +156,7 @@ Its source code is located in [`packages/react-reconciler`](https://github.com/f
### Event System {#event-system} ### Event System {#event-system}
React implements a synthetic event system which is agnostic of the renderers and works both with React DOM and React Native. Its source code is located in [`packages/legacy-events`](https://github.com/facebook/react/tree/master/packages/legacy-events). React implements a layer over native events to smooth out cross-browser differences. Its source code is located in [`packages/react-dom/src/events`](https://github.com/facebook/react/tree/master/packages/react-dom/src/events).
There is a [video with a deep code dive into it](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 mins).
### What Next? {#what-next} ### What Next? {#what-next}

Loading…
Cancel
Save