webpack3+anujs+ReactCSSTransitionGroup

前端之家收集整理的这篇文章主要介绍了webpack3+anujs+ReactCSSTransitionGroup前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

webpack3出来好久,决定试用一下。

  1. mkdir eee
  2. cd eee
  3. npm init -y
  4. npm i anujs react-addons-css-transition-group --save
  5. npm i babel-core babel-loader babel-preset-es2015 babel-preset-react webpack@3.0 --save-dev

最后生成的package.json应该是这样

  1. {
  2. "name": "eee","version": "1.0.0","description": "","main": "index.js","scripts": {
  3. "test": "echo \"Error: no test specified\" && exit 1"
  4. },"keywords": [],"author": "","license": "ISC","dependencies": {
  5. "anujs": "^1.0.6","react-addons-css-transition-group": "^15.6.0"
  6. },"devDependencies": {
  7. "babel-core": "^6.25.0","babel-loader": "^7.1.1","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","babel-plugin-transform-es2015-classes": "^6.24.1","webpack": "^3.0.0"
  8. }
  9. }

我们用到babel,需要用.babelrc

  1. {
  2. "presets": [
  3. ["es2015",{ "modules": false }],"react"
  4. ],"plugins": [
  5. [
  6. "transform-es2015-classes",{
  7. "loose": true
  8. }
  9. ]
  10. ]
  11. }

根目录创建main.js,用法一切如React

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. import ReactCSSTransitionGroup from "react-addons-css-transition-group"
  4.  
  5. var data = ["one","two","three"];
  6. class Control extends React.Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. items: data.splice(0,data.length)
  11. };
  12. this.addItem = this.addItem.bind(this);
  13. this.removeItem = this.removeItem.bind(this);
  14. }
  15.  
  16. addItem() {
  17. var a = data.pop()
  18. var newItems = this.state.items.concat(a || "add"+ (new Date-0));
  19. this.setState({
  20. items: newItems
  21. });
  22. }
  23. removeItem(i) {
  24. var newItems = this.state.items;
  25. var drop = newItems.splice(i,1)
  26. if(drop.length){
  27. [].push.apply(data,drop)
  28. }
  29. this.setState({
  30. items: newItems
  31. });
  32. }
  33. render() {
  34. var $this = this;
  35. var List = this.state.items.map(function(value,index) {
  36. return (
  37. <div key={value} onClick={$this.removeItem.bind($this,index)}>
  38. {" "}{value}
  39. </div>
  40. );
  41. });
  42. return (
  43. <div>
  44. <button onClick={this.addItem}>add Item</button>
  45. <ReactCSSTransitionGroup
  46. transitionName="example"
  47. transitionEnterTimeout={500}
  48. transitionLeaveTimeout={300}
  49. >
  50. {List}
  51. </ReactCSSTransitionGroup>
  52. </div>
  53. );
  54. }
  55. }
  56. class Hello extends React.Component {
  57. render() {
  58. return (
  59. <div>
  60. {` 测试anujs与React动画组件的兼容 `}
  61. <Control data={data}/>
  62. </div>
  63. );
  64. }
  65. }
  66.  
  67. window.onload = function() {
  68. ReactDOM.render(<Hello />,document.body);
  69. };

然后创建index.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <Meta charset="utf-8">
  7. <title>anujs</title>
  8. <style>
  9. .example-enter {
  10. opacity: 0.01;
  11. }
  12.  
  13. .example-enter.example-enter-active {
  14. opacity: 1;
  15. transition: opacity 500ms ease-in;
  16. }
  17.  
  18. .example-leave {
  19. opacity: 1;
  20. }
  21.  
  22. .example-leave.example-leave-active {
  23. opacity: 0.01;
  24. transition: opacity 300ms ease-in;
  25. }
  26. </style>
  27. <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
  28. <script src='./dist/index.js'></script>
  29.  
  30.  
  31. </head>
  32.  
  33. <body>
  34. </body>
  35.  
  36. </html>

最后的魔术由webpack完成,建立webpack.config.js

  1. const path = require("path");
  2. const webpack = require("webpack");
  3. module.exports = {
  4. entry: "./main.js",output: {
  5. path: path.resolve(__dirname,"dist"),filename: "index.js"
  6. },resolve: {
  7. alias: {
  8. react: "anujs","react-dom": "anujs"
  9. }
  10. },module: {
  11. rules: [
  12. {
  13. test: /\.jsx?$/,exclude: /node_modules/,loader: "babel-loader"
  14. }
  15. ]
  16. }
  17. }

然后控制台下输入`webpack --config webpack.config`

然后打开浏览器访问页面

动画生效了!

猜你在找的React相关文章