mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Mond WAN
ae89a74091
* Fix missing react in create-react-class refs #9689 * Modify the 'create-react-class' package to make 'globals' work again **what is the change?:** Pass the global 'react' into the global conditional in the UMD build of 'create-react-class'. **why make this change?:** Here is the deal: - @mondwan's original fix does fix the AMD build, but breaks the 'global JS' build. - My modification makes it work with both AMD and the 'global JS' build. - @mondwan's fix seems to have fixed the CommonJS build too, and I maintained that fix with my modification. ``` Does the 'create-react-class' UMD build work? Before After After + @mondwan's + @mondwan's + @flarnie's Build System | fix | fix | modification +---------------------------------------------------------+ | | | Global JS | :D Success | X Fail | :D Success | | | +---------------------------------------------------------+ | | | AMD | X Fail | :D Success | :D Success | | | +---------------------------------------------------------+ | | | Common JS | X Fail | :D Success | :D Success | | | + + + ``` **test plan:** The testing for this was really tricky and involves a fragile multi-step process: 1) Make sure the fixtures are working on your branch 2) Modify some of the fixtures to use 'create-react-class', like in this commit (you can just cherry-pick it if you are on a branch based on the 15.* branches) - https://github.com/flarnie/react/commit/51dcbd5ef164b86bc509ae070a6273758a60e13c 3) Make sure React is set up, and then `cd fixures && node ./build-all.js` 4) The following fixtures could be used to test the various builds: - test GlobalJS with `globals.html` - test AMD with `requirejs.html` - test CommonJS with `webpack-alias/index.html` **issue:** https://github.com/facebook/react/issues/9689 and https://github.com/facebook/react/issues/9765
40 lines
1.0 KiB
HTML
40 lines
1.0 KiB
HTML
<html>
|
|
<body>
|
|
<script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
|
|
<style>
|
|
.example-appear {
|
|
opacity: 0.01;
|
|
}
|
|
|
|
.example-appear.example-appear-active {
|
|
opacity: 1;
|
|
transition: opacity .5s ease-in;
|
|
}
|
|
</style>
|
|
<div id="container"></div>
|
|
<script>
|
|
requirejs.config({
|
|
paths: {
|
|
react: '../build/react-with-addons',
|
|
'react-dom': '../build/react-dom'
|
|
}
|
|
});
|
|
require(['react', 'react-dom'], function(React, ReactDOM) {
|
|
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
|
|
ReactDOM.render(
|
|
React.createElement(CSSTransitionGroup, {
|
|
transitionName: 'example',
|
|
transitionAppear: true,
|
|
transitionAppearTimeout: 500,
|
|
transitionEnterTimeout: 0,
|
|
transitionLeaveTimeout: 0,
|
|
}, React.createElement('h1', null,
|
|
'Hello World!'
|
|
)),
|
|
document.getElementById('container')
|
|
);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|